fix: parsing @apply in Tailwind 4 (#25)

fix parsing `@apply` prelude in tailwind 4

Author: jrmajor

src/tailwind4.js

@@ -7,8 +7,10 @@
 // Imports
 //-----------------------------------------------------------------------------
 
-import * as TailwindThemeKey from "./node/tailwind-theme-key.js";
 import defaultSyntax from "@eslint/css-tree/definition-syntax-data";
+import * as TailwindThemeKey from "./node/tailwind-theme-key.js";
+import * as TailwindUtilityClass from "./node/tailwind-class.js";
+import tailwindApply from "./atrule/tailwind-apply.js";
 import theme from "./scope/theme.js";
 import { themeTypes } from "./types/theme-types.js";
 
@@ -23,9 +25,12 @@ import { themeTypes } from "./types/theme-types.js";
 
 /** @type {Partial<SyntaxConfig>} */
 export const tailwind4 = {
+    atrule: {
+        apply: tailwindApply,
+    },
     atrules: {
         apply: {
-            prelude: "<ident>+",
+            prelude: "<tw-apply-ident>+",
         },
         config: {
             prelude: "<string>",
@@ -61,10 +66,12 @@ export const tailwind4 = {
         "tw-spacing": "--spacing(<number>)",
         "tw-any-spacing": "<tw-spacing> | <tw-theme-spacing>",
         "tw-any-color": "<tw-alpha> | <tw-theme-color>",
+        "tw-apply-ident": "<ident> | [ <ident> ':' <ident> ]",
         ...themeTypes
     },
     node: {
-        TailwindThemeKey
+        TailwindThemeKey,
+        TailwindUtilityClass
     },
     scope: {
         Value: {

tests/fixtures/tailwind4.css

@@ -10,7 +10,7 @@
 
 @layer components {
   .btn {
-    @apply px-4 py-2 bg-blue-500 text-white;
+    @apply px-4 py-2 bg-blue-500 text-white dark:text-black;
   }
 }
 

tests/tailwind4.test.js

@@ -376,7 +376,7 @@ describe("Tailwind 4", function () {
 
     describe("@apply", () => {
         it("should parse @apply with valid classes", () => {
-            const tree = toPlainObject(parse(".example { @apply bg-red-500 text-white; }"));
+            const tree = toPlainObject(parse(".example { @apply bg-red-500 text-white focus:ring-3; }"));
             assert.deepStrictEqual(tree, {
                 type: "StyleSheet",
                 loc: null,
@@ -421,6 +421,20 @@ describe("Tailwind 4", function () {
                                                 type: "Identifier",
                                                 name: "text-white",
                                                 loc: null
+                                            },
+                                            {
+                                                type: "TailwindUtilityClass",
+                                                loc: null,
+                                                variant: {
+                                                    type: "Identifier",
+                                                    name: "focus",
+                                                    loc: null
+                                                },
+                                                name: {
+                                                    type: "Identifier",
+                                                    name: "ring-3",
+                                                    loc: null
+                                                }
                                             }
                                         ]
                                     },