feat!: add support for tailwindcss v4 (#25)

* refactor: remove tailwind imports

* feat: support tailwind 4

* refactor: update test

* ci: inline tests

* chore: change semver range

* chore: remove `local-pkg`

* chore: add `fast-glob` as a dependency

* refactor: add lightningcss

to inline imported css

* refactor: use tailwindcss v3 and tailwindcss v4 simultaneously

* chore: regenerate `package-lock.json`

* fix: cache full context/design system

* fix: load tailwind config without import assertions

* chore: fix semver range

* fix: dynamically import tailwind versions

* fix: use `import-sync` to dynamically and synchronously import tailwindcss utilities

* refactor: simplify build system (#26)

* refactor: use native test runner, remove vite, use tsc

* ci: use `zsh` to glob test files

* ci: use `glob` package for older node versions that don't support glob patterns

* ci: remove eslint9 workaround

* style: fix linting issues

* chore: update eslint config

* chore: fix glob pattern on windows

* ci: upgrade to node 22

* ci: update npm test command to use "npm test" instead of "npm t"

* refactor: use `require` for synchronous dynamic imports

* fix: infinite recursion

* style: code cleanup

* feat: resolve import statements

* wip: try to replace imports with custom visitor

* refactor: remove `lightningcss`

* refactor: use `synckit` to run async tasks in worker thread

* style: eslint fixes

* fix: caching of tailwindcss 3

* fix: rewrite recursive config finder

* fix: entry point option

* fix: use file url on windows

* refactor!: drop support for node <=18

---------

Co-authored-by: zcf0508 <[email protected]>

.cspell.json

@@ -25,6 +25,7 @@
     "objstr",
     "OBJSTR",
     "quasis",
-    "shadcn"
+    "shadcn",
+    "synckit"
   ]
 }

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           cache: npm
-          node-version: 22
+          node-version: 23
 
       - name: Install dependencies
         run: npm ci
@@ -40,16 +40,19 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run tests
-        run: npm test
+      - name: Run tests with tailwindcss v3
+        run: npm run test:v3
+
+      - name: Run tests with tailwindcss v4
+        run: npm run test:v4
 
     strategy:
       fail-fast: true
       matrix:
         node:
-          - 18
           - 20
           - 22
+          - 23
         os:
           - ubuntu-latest
           - windows-latest

build/index.ts

@@ -1,14 +1,30 @@
-import { writeFile } from "fs/promises";
-import { $ } from "readable-tailwind:build:utils.js";
+import { mkdir, writeFile } from "fs/promises";
+ import { transformImports } from "readable-tailwind:build:transform.js";
+ import { $ } from "readable-tailwind:build:utils.js";
 
-const esmDir = "lib/esm"
-const cjsDir = "lib/cjs"
+ async function build(){
 
-await $`npx tsc --module preserve --project tsconfig.build.esm.json --outDir ${esmDir}`
-await $`npx tsc-alias --outDir ${esmDir}`
-await writeFile(`${esmDir}/package.json`, JSON.stringify({ type: "module" }), "utf-8")
+   const esmDir = "lib/esm"
+   const cjsDir = "lib/cjs"
 
-await $`npx tsc --module commonjs --moduleResolution node --project tsconfig.build.cjs.json --verbatimModuleSyntax false --outDir ${cjsDir}`
-await $`npx tsc-alias --outDir ${cjsDir}`
-await writeFile(`${cjsDir}/package.json`, JSON.stringify({ type: "commonjs" }),  "utf-8")
+   console.info("Building ESM...")
+   await mkdir(esmDir, { recursive: true });
+   await $`npx tsc --project tsconfig.build.esm.json --outDir ${esmDir}`
+   await $`npx tsc-alias --outDir ${esmDir}`
+   await writeFile(`${esmDir}/package.json`, JSON.stringify({ type: "module" }), "utf-8")
+   await transformImports([`${esmDir}/**/*.js`], "tailwindcss3", "tailwindcss")
+   await transformImports([`${esmDir}/**/*.js`], "tailwindcss4", "tailwindcss")
 
+   console.info("Building CJS...")
+   await mkdir(cjsDir, { recursive: true });
+   await $`npx tsc --project tsconfig.build.cjs.json --outDir ${cjsDir}`
+   await $`npx tsc-alias --outDir ${cjsDir}`
+   await writeFile(`${cjsDir}/package.json`, JSON.stringify({ type: "commonjs" }),  "utf-8")
+   await transformImports([`${cjsDir}/**/*.js`], "tailwindcss3", "tailwindcss")
+   await transformImports([`${cjsDir}/**/*.js`], "tailwindcss4", "tailwindcss")
+
+   console.info("Build complete")
+
+ }
+
+ build().catch(console.error);

build/transform.ts

@@ -0,0 +1,13 @@
+import { readFile, writeFile } from 'fs/promises';
+ import { glob } from 'glob'
+
+export async function transformImports(globPatterns: string[], search: string, replace: string) {
+  const files = await glob(globPatterns);
+
+  for(const file of files) {
+    const content = await readFile(file, 'utf-8');
+    const transformed = content.replaceAll(search, replace);
+
+    await writeFile(file, transformed);
+  }
+}

docs/rules/sort-classes.md

@@ -21,9 +21,19 @@ Enforce the order of tailwind classes. It is possible to sort classes alphabetic
 
 <br/>
 
+- `entryPoint`
+
+  The path to the entry file of the tailwind css config. If not specified, the plugin will fall back to the default configuration.  
+  The tailwind config is used to determine the sorting order.
+
+  **Type**: `string`  
+  **Default**: `undefined`
+
+<br/>
+
 - `tailwindConfig`
 
-  The path to the tailwind config file. If not specified, the plugin will try to find it automatically or falls back to the default configuration.  
+  The path to the `tailwind.config.js` file. If not specified, the plugin will try to find it automatically or falls back to the default configuration.  
   The tailwind config is used to determine the sorting order.
 
   **Type**: `string`