add format check, update prettier rules, apply rules consistently

resources/js/utils/useCssVariable.ts

@@ -1,49 +1,49 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue';
 
 export function useCssVariable(variableName: string) {
-  const value = ref('')
-  let observer: MutationObserver | null = null
-  let mediaQuery: MediaQueryList | null = null
-  
-  const updateValue = () => {
-    const computedStyle = getComputedStyle(document.documentElement)
-    const cssValue = computedStyle.getPropertyValue(variableName).trim()
-    value.value = cssValue
-  }
-  
-  onMounted(() => {
-    // Initialize with current value
-    updateValue()
-    
-    // Watch for class changes on document.documentElement (where theme classes are applied)
-    observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          updateValue()
+    const value = ref('');
+    let observer: MutationObserver | null = null;
+    let mediaQuery: MediaQueryList | null = null;
+
+    const updateValue = () => {
+        const computedStyle = getComputedStyle(document.documentElement);
+        const cssValue = computedStyle.getPropertyValue(variableName).trim();
+        value.value = cssValue;
+    };
+
+    onMounted(() => {
+        // Initialize with current value
+        updateValue();
+
+        // Watch for class changes on document.documentElement (where theme classes are applied)
+        observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    updateValue();
+                }
+            });
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+
+        // Also watch for system color scheme changes
+        if (window.matchMedia) {
+            mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', updateValue);
         }
-      })
-    })
-    
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    })
-    
-    // Also watch for system color scheme changes
-    if (window.matchMedia) {
-      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-      mediaQuery.addEventListener('change', updateValue)
-    }
-  })
-  
-  onUnmounted(() => {
-    if (observer) {
-      observer.disconnect()
-    }
-    if (mediaQuery) {
-      mediaQuery.removeEventListener('change', updateValue)
-    }
-  })
-  
-  return value
-} 
+    });
+
+    onUnmounted(() => {
+        if (observer) {
+            observer.disconnect();
+        }
+        if (mediaQuery) {
+            mediaQuery.removeEventListener('change', updateValue);
+        }
+    });
+
+    return value;
+}