diff --git a/README.md b/README.md index 7f87b4fa..0630ed16 100644 --- a/README.md +++ b/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 diff --git a/jsr.json b/jsr.json index 9ee24767..d7880bde 100644 --- a/jsr.json +++ b/jsr.json @@ -2,8 +2,7 @@ "name": "@eslint/css", "version": "0.8.1", "exports": { - ".": "./dist/esm/index.js", - "./syntax": "./dist/esm/syntax/index.js" + ".": "./dist/esm/index.js" }, "publish": { "include": [ diff --git a/package.json b/package.json index 6ac280fc..b659d999 100644 --- a/package.json +++ b/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" diff --git a/rollup.config.js b/rollup.config.js index f8c6a48a..84b6c269 100644 --- a/rollup.config.js +++ b/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"', - }, - ], - }, ]; diff --git a/src/syntax/index.js b/src/syntax/index.js deleted file mode 100644 index bbcacbd6..00000000 --- a/src/syntax/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * @fileoverview Common extended CSSTree syntax definitions. - * @author Nicholas C. Zakas - */ - -export { default as tailwindSyntax } from "./tailwind-syntax.js"; diff --git a/src/syntax/tailwind-syntax.js b/src/syntax/tailwind-syntax.js deleted file mode 100644 index 0ef3e368..00000000 --- a/src/syntax/tailwind-syntax.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @fileoverview CSSTree syntax for Tailwind CSS extensions. - * @author Nicholas C. Zakas - */ -export default { - atrules: { - apply: { - prelude: "+", - }, - tailwind: { - prelude: "base | components | utilities", - }, - config: { - prelude: "", - }, - }, - - /* - * CSSTree doesn't currently support custom functions properly, so leaving - * these out for now. - * https://github.com/csstree/csstree/issues/292 - */ - // types: { - // "tailwind-theme-base": "spacing | colors", - // "tailwind-theme-color": " [ '.' [ | ] ]+", - // "tailwind-theme-name": "", - // "tailwind-theme()": "theme( )", - // }, -}; diff --git a/tests/rules/no-invalid-at-rules.test.js b/tests/rules/no-invalid-at-rules.test.js index 4da4b6b9..fd6ec434 100644 --- a/tests/rules/no-invalid-at-rules.test.js +++ b/tests/rules/no-invalid-at-rules.test.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: [ { diff --git a/tsconfig.syntax.json b/tsconfig.syntax.json deleted file mode 100644 index b48cf333..00000000 --- a/tsconfig.syntax.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig.json", - "files": ["dist/esm/syntax/index.js"], - "compilerOptions": { - "outDir": "./dist/esm/syntax" - } -}