fix: enable Biome CSS tailwindDirectives for @apply parsing

- Add css.parser.tailwindDirectives to biome config
- Auto-format CSS files with new parser settings

apps/tutorial/src/app/globals.css

@@ -58,12 +58,16 @@
   }
 
   .glow-cyan {
-    box-shadow: 0 0 20px hsl(var(--accent-cyan) / 0.3), 0 0 40px hsl(var(--accent-cyan) / 0.2), 0 0
+    box-shadow:
-      60px hsl(var(--accent-cyan) / 0.1);
+      0 0 20px hsl(var(--accent-cyan) / 0.3),
+      0 0 40px hsl(var(--accent-cyan) / 0.2),
+      0 0 60px hsl(var(--accent-cyan) / 0.1);
   }
 
   .glow-purple {
-    box-shadow: 0 0 20px hsl(var(--accent-purple) / 0.3), 0 0 40px hsl(var(--accent-purple) / 0.2),
+    box-shadow:
+      0 0 20px hsl(var(--accent-purple) / 0.3),
+      0 0 40px hsl(var(--accent-purple) / 0.2),
       0 0 60px hsl(var(--accent-purple) / 0.1);
   }
 

apps/web/src/app/globals.css

@@ -174,14 +174,17 @@
   body {
     @apply bg-background text-foreground;
     font-family: var(--font-sans);
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   /* Grid/Blueprint background patterns */
   .grid-background {
-    background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
+    background-image:
+      linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
       linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
     background-size: var(--grid-size) var(--grid-size);
     background-position: -1px -1px;
@@ -195,13 +198,16 @@
   .blueprint-background {
     background-color: hsl(var(--background));
     /* Major grid lines (4x size) */
-    background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
+    background-image:
+      linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
       linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
       /* Minor grid lines (1x size) */
       linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
       linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
-    background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
+    background-size:
-      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
+      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
+      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
+      var(--grid-size) var(--grid-size),
       var(--grid-size) var(--grid-size);
   }
 
@@ -266,11 +272,15 @@
 
   /* Shadow utilities - Blueprint aesthetic */
   .shadow-blueprint {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 0 0 1px rgb(0 0 0 / 0.02);
+    box-shadow:
+      0 1px 2px 0 rgb(0 0 0 / 0.03),
+      0 0 0 1px rgb(0 0 0 / 0.02);
   }
 
   .shadow-blueprint-hover {
-    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(0 0 0 / 0.03);
+    box-shadow:
+      0 2px 4px 0 rgb(0 0 0 / 0.05),
+      0 0 0 1px rgb(0 0 0 / 0.03);
   }
 
   /* Transition presets */
@@ -471,7 +481,12 @@
     position: absolute;
     width: 100%;
     height: 2px;
-    background: linear-gradient(90deg, transparent, hsl(var(--brutalist-accent) / 0.3), transparent);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--brutalist-accent) / 0.3),
+      transparent
+    );
     animation: scanline 30s linear infinite;
     pointer-events: none;
     z-index: 1;

packages/config/biome.json

@@ -56,6 +56,12 @@
       "semicolons": "always"
     }
   },
+  "css": {
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true
+    }
+  },
   "overrides": [
     {
       "includes": ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],

packages/storybook/styles/globals.css

@@ -135,14 +135,17 @@
   body {
     @apply bg-background text-foreground;
     font-family: var(--font-sans);
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   /* Grid/Blueprint background patterns */
   .grid-background {
-    background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
+    background-image:
+      linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
       linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
     background-size: var(--grid-size) var(--grid-size);
     background-position: -1px -1px;
@@ -156,13 +159,16 @@
   .blueprint-background {
     background-color: hsl(var(--background));
     /* Major grid lines (4x size) */
-    background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
+    background-image:
+      linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
       linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
       /* Minor grid lines (1x size) */
       linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
       linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
-    background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
+    background-size:
-      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
+      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
+      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
+      var(--grid-size) var(--grid-size),
       var(--grid-size) var(--grid-size);
   }