From 6caec390b874bf434099eb6c1bbb7ebef0da44c8 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Tue, 20 May 2025 13:47:59 +0200
Subject: [PATCH] feat(ui): update prettier configuration and quote styles

- Add cx to tailwind functions
- Set tailwind stylesheet path
- Convert single quotes to double quotes in CSS
- Add prettier ignore comments for animation utilities
---
 ui/.prettierrc   |  5 +++--
 ui/src/index.css | 25 +++++++++++++++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/ui/.prettierrc b/ui/.prettierrc
index 65b362d..43fe6c4 100644
--- a/ui/.prettierrc
+++ b/ui/.prettierrc
@@ -6,6 +6,7 @@
   "arrowParens": "avoid",
   "singleQuote": false,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindFunctions": ["clsx"],
-  "printWidth": 90
+  "tailwindFunctions": ["clsx", "cx"],
+  "printWidth": 90,
+  "tailwindStylesheet": "./src/index.css"
 }
diff --git a/ui/src/index.css b/ui/src/index.css
index beacb34..44acd2a 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @config "../tailwind.config.js";
 
@@ -10,10 +10,10 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --font-sans: 'Circular', sans-serif;
-  --font-display: 'Circular', sans-serif;
-  --font-serif: 'Circular', serif;
-  --font-mono: 'Source Code Pro Variable', monospace;
+  --font-sans: "Circular", sans-serif;
+  --font-display: "Circular", sans-serif;
+  --font-serif: "Circular", serif;
+  --font-mono: "Source Code Pro Variable", monospace;
 
   --grid-layout: auto 1fr auto;
   --grid-headerBody: auto 1fr;
@@ -122,13 +122,22 @@
   }
 }
 
+/* If we don't ignore this, Prettier will add a space between the value and the `ms`. Rendering the utility invalid. */
+/* prettier-ignore */
 @utility max-width-* {
-  max-width: --modifier(--container- *, [length], [ *]);
+  max-width: --modifier(--container-*, [length], [*]);
 }
 
-/* Ensure there is not a `ms` and ms -> `...)ms` */
+/* If we don't ignore this, Prettier will add a space between the value and the `ms`. Rendering the utility invalid. */
+/* prettier-ignore */
 @utility animation-delay-* {
-  animation-delay: --value(integer) ms;
+  animation-delay: --value(integer)ms;
+}
+
+/* If we don't ignore this, Prettier will add a space between the value and the `ms`. Rendering the utility invalid. */
+/* prettier-ignore */
+@utility animation-duration-* {
+  animation-duration: --value(integer)ms;
 }
 
 html {