feat!: Remove Tailwind syntax in favor of external tailwind-csstree (#166)

* feat!: Remove Tailwind syntax in favor of external tailwind-csstree package

* Update jsr.json

* Fix tests

* Fix types test

Author: nzakas

README.md

@@ -218,13 +218,19 @@ export default defineConfig([
 
 #### Configuring Tailwind Syntax
 
-[Tailwind](https://tailwindcss.com) specifies some extensions to CSS that will otherwise be flagged as invalid by the rules in this plugin. You can configure most of the custom syntax for Tailwind using the builtin `tailwindSyntax` object, like this:
+[Tailwind](https://tailwindcss.com) specifies some extensions to CSS that will otherwise be flagged as invalid by the rules in this plugin. To properly parse Tailwind-specific syntax, install the [`tailwind-csstree`](https://npmjs.com/package/tailwind-csstree) package:
+
+```shell
+npm i tailwind-csstree --save-dev
+```
+
+Then include it in your configuration using `languageOptions.customSyntax`:
 
 ```js
 // eslint.config.js
 import { defineConfig } from "eslint/config";
 import css from "@eslint/css";
-import { tailwindSyntax } from "@eslint/css/syntax";
+import { tailwind4 } from "tailwind-csstree";
 
 export default defineConfig([
 	{
@@ -234,7 +240,7 @@ export default defineConfig([
 		},
 		language: "css/css",
 		languageOptions: {
-			customSyntax: tailwindSyntax,
+			customSyntax: tailwind4,
 		},
 		rules: {
 			"css/no-empty-blocks": "error",
@@ -243,8 +249,6 @@ export default defineConfig([
 ]);
 ```
 
-**Note:** The Tailwind syntax doesn't currently provide for the `theme()` function. This is a [limitation of CSSTree](https://github.com/csstree/csstree/issues/292) that we hope will be resolved soon.
-
 ## Editor and IDE Setup
 
 ### Visual Studio Code

jsr.json

@@ -2,8 +2,7 @@
   "name": "@eslint/css",
   "version": "0.9.0",
   "exports": {
-    ".": "./dist/esm/index.js",
-    "./syntax": "./dist/esm/syntax/index.js"
+    ".": "./dist/esm/index.js"
   },
   "publish": {
     "include": [

package.json

@@ -17,16 +17,6 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./syntax": {
-      "require": {
-        "types": "./dist/cjs/syntax/index.d.cts",
-        "default": "./dist/cjs/syntax/index.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/syntax/index.d.ts",
-        "default": "./dist/esm/syntax/index.js"
-      }
-    },
     "./types": {
       "require": {
         "types": "./dist/cjs/types.cts"
@@ -69,9 +59,8 @@
   "homepage": "https://github.com/eslint/css#readme",
   "scripts": {
     "build:dedupe-types": "node tools/dedupe-types.js dist/cjs/index.cjs dist/esm/index.js",
-    "build:cts": "node -e \"fs.copyFileSync('dist/esm/index.d.ts', 'dist/cjs/index.d.cts')\"",
-    "build:syntax-cts": "node -e \"fs.copyFileSync('dist/esm/syntax/index.d.ts', 'dist/cjs/syntax/index.d.cts')\" && node tools/update-cts.js dist/cjs/types.cts dist/cjs/index.d.cts",
-    "build": "rollup -c && npm run build:dedupe-types && tsc -p tsconfig.esm.json && npm run build:cts && tsc -p tsconfig.syntax.json && npm run build:syntax-cts",
+    "build:cts": "node -e \"fs.copyFileSync('dist/esm/index.d.ts', 'dist/cjs/index.d.cts')\" && node tools/update-cts.js dist/cjs/types.cts dist/cjs/index.d.cts",
+    "build": "rollup -c && npm run build:dedupe-types && tsc -p tsconfig.esm.json && npm run build:cts",
     "build:readme": "node tools/update-readme.js",
     "build:update-rules-docs": "node tools/update-rules-docs.js",
     "build:baseline": "node tools/generate-baseline.js",
@@ -114,6 +103,7 @@
     "rollup": "^4.16.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.1",
+    "tailwind-csstree": "^0.1.0",
     "typescript": "^5.8.2",
     "web-features": "^2.35.1",
     "yorkie": "^2.0.0"

rollup.config.js

@@ -29,18 +29,4 @@ export default [
 			}),
 		],
 	},
-	{
-		input: "src/syntax/index.js",
-		output: [
-			{
-				file: "dist/cjs/syntax/index.cjs",
-				format: "cjs",
-			},
-			{
-				file: "dist/esm/syntax/index.js",
-				format: "esm",
-				banner: '// @ts-self-types="./index.d.ts"',
-			},
-		],
-	},
 ];

src/syntax/index.js

@@ -9,7 +9,7 @@
 
 import rule from "../../src/rules/no-invalid-at-rules.js";
 import css from "../../src/index.js";
-import tailwindSyntax from "../../src/syntax/tailwind-syntax.js";
+import { tailwind3 } from "tailwind-csstree";
 import { RuleTester } from "eslint";
 
 //------------------------------------------------------------------------------
@@ -46,25 +46,25 @@ ruleTester.run("no-invalid-at-rules", rule, {
 		{
 			code: "@tailwind base; @tailwind components; @tailwind utilities;",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 		},
 		{
 			code: "a { @apply text-red-500; }",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 		},
 		{
 			code: "a { @apply text-red-500 bg-blue-500; }",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 		},
 		{
 			code: "@config 'tailwind.config.js';",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 		},
 		{
@@ -240,7 +240,7 @@ ruleTester.run("no-invalid-at-rules", rule, {
 		{
 			code: "a { @apply; }",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 			errors: [
 				{
@@ -258,7 +258,7 @@ ruleTester.run("no-invalid-at-rules", rule, {
 		{
 			code: "@config;",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 			errors: [
 				{
@@ -276,7 +276,7 @@ ruleTester.run("no-invalid-at-rules", rule, {
 		{
 			code: "@config foo;",
 			languageOptions: {
-				customSyntax: tailwindSyntax,
+				customSyntax: tailwind3,
 			},
 			errors: [
 				{