chore: tailwindcss patch add 3.3.3 case

Author: sonofmagic

.vscode/launch.json

@@ -4,6 +4,13 @@
   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "command": "yarn patch",
+      "name": "do tailwindcss-patch",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}/packages/tailwindcss-patch"
+    },
     {
       "command": "npm run build",
       "name": "Debug nuxt-app",

packages/tailwindcss-patch/src/patcher.ts

@@ -80,11 +80,13 @@ export function monkeyPatchForExposingContext(twDir: string, opt: InternalPatchO
   return result
 }
 
+
 export function internalPatch(pkgJsonPath: string | undefined, options: InternalPatchOptions): any | undefined {
   if (pkgJsonPath) {
     const pkgJson = require(pkgJsonPath) as PackageJson
     const twDir = path.dirname(pkgJsonPath)
     if (gte(pkgJson.version!, '3.0.0')) {
+      options.version = pkgJson.version
       const result = monkeyPatchForExposingContext(twDir, options)
       return result
     }

packages/tailwindcss-patch/src/type.ts

@@ -22,6 +22,7 @@ export interface InternalPatchOptions {
   paths?: string[]
   basedir?: string
   custom?: (dir: string, ctx: Record<string, any>) => void
+  version?: string
 }
 
 export interface TailwindcssPatcherOptions {

packages/tailwindcss-patch/test/__snapshots__/index.test.ts.snap

@@ -26,7 +26,7 @@ module.exports = function tailwindcss(configOrPath) {
       console.log("\\n");
       console.time("JIT TOTAL");
       return root;
-    }, function (root, result) {
+    }, async function (root, result) {
       contextRef.value.length = 0;
       var _findAtConfigPath1;
       // Use the path for the \`@config\` directive if it exists, otherwise use the
@@ -37,12 +37,12 @@ module.exports = function tailwindcss(configOrPath) {
         let roots = root.nodes.filter(node => node.type === "root");
         for (const root of roots) {
           if (root.type === "root") {
-            contextRef.value.push((0, _processTailwindFeatures.default)(context)(root, result));
+            contextRef.value.push(await (0, _processTailwindFeatures.default)(context)(root, result));
           }
         }
         return;
       }
-      contextRef.value.push((0, _processTailwindFeatures.default)(context)(root, result));
+      contextRef.value.push(await (0, _processTailwindFeatures.default)(context)(root, result));
     }, false && function lightningCssPlugin(_root, result) {
       let postcss = require("postcss");
       let lightningcss = require("lightningcss");
@@ -120,7 +120,7 @@ function _interop_require_default(obj) {
   };
 }
 function processTailwindFeatures(setupContext) {
-  return function (root, result) {
+  return async function (root, result) {
     let {
       tailwindDirectives,
       applyDirectives
@@ -147,7 +147,7 @@ function processTailwindFeatures(setupContext) {
       throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
     }
     (0, _featureFlags.issueFlagNotices)(context.tailwindConfig);
-    (0, _expandTailwindAtRules.default)(context)(root, result);
+    await (0, _expandTailwindAtRules.default)(context)(root, result);
     // Partition apply rules that are generated by
     // addComponents, addUtilities and so on.
     (0, _partitionApplyAtRules.default)()(root, result);
@@ -1549,3 +1549,166 @@ function processTailwindFeatures(setupContext) {
 }",
 }
 `;
+
+exports[`versions-patch patch tailwindcss3.3.3 1`] = `
+{
+  "plugin": ""use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const _setupTrackingContext = /*#__PURE__*/_interop_require_default(require("./lib/setupTrackingContext"));
+const _processTailwindFeatures = /*#__PURE__*/_interop_require_default(require("./processTailwindFeatures"));
+const _sharedState = require("./lib/sharedState");
+const _findAtConfigPath = require("./lib/findAtConfigPath");
+function _interop_require_default(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+const contextRef = {
+  value: []
+};
+module.exports = function tailwindcss(configOrPath) {
+  return {
+    postcssPlugin: "tailwindcss",
+    plugins: [_sharedState.env.DEBUG && function (root) {
+      console.log("\\n");
+      console.time("JIT TOTAL");
+      return root;
+    }, async function (root, result) {
+      contextRef.value.length = 0;
+      var _findAtConfigPath1;
+      // Use the path for the \`@config\` directive if it exists, otherwise use the
+      // path for the file being processed
+      configOrPath = (_findAtConfigPath1 = (0, _findAtConfigPath.findAtConfigPath)(root, result)) !== null && _findAtConfigPath1 !== void 0 ? _findAtConfigPath1 : configOrPath;
+      let context = (0, _setupTrackingContext.default)(configOrPath);
+      if (root.type === "document") {
+        let roots = root.nodes.filter(node => node.type === "root");
+        for (const root of roots) {
+          if (root.type === "root") {
+            contextRef.value.push(await (0, _processTailwindFeatures.default)(context)(root, result));
+          }
+        }
+        return;
+      }
+      contextRef.value.push(await (0, _processTailwindFeatures.default)(context)(root, result));
+    }, false && function lightningCssPlugin(_root, result) {
+      let postcss = require("postcss");
+      let lightningcss = require("lightningcss");
+      let browserslist = require("browserslist");
+      try {
+        let transformed = lightningcss.transform({
+          filename: result.opts.from,
+          code: Buffer.from(result.root.toString()),
+          minify: false,
+          sourceMap: !!result.map,
+          inputSourceMap: result.map ? result.map.toString() : undefined,
+          targets: typeof process !== "undefined" && process.env.JEST_WORKER_ID ? {
+            chrome: 106 << 16
+          } : lightningcss.browserslistToTargets(browserslist(require("../package.json").browserslist)),
+          drafts: {
+            nesting: true,
+            customMedia: true
+          }
+        });
+        var _result_map;
+        result.map = Object.assign((_result_map = result.map) !== null && _result_map !== void 0 ? _result_map : {}, {
+          toJSON() {
+            return transformed.map.toJSON();
+          },
+          toString() {
+            return transformed.map.toString();
+          }
+        });
+        result.root = postcss.parse(transformed.code.toString("utf8"));
+      } catch (err) {
+        if (typeof process !== "undefined" && process.env.JEST_WORKER_ID) {
+          let lines = err.source.split("\\n");
+          err = new Error(["Error formatting using Lightning CSS:", "", ...["\`\`\`css", ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line), " ".repeat(err.loc.column - 1) + "^-- " + err.toString(), ...lines.slice(err.loc.line, err.loc.line + 2), "\`\`\`"]].join("\\n"));
+        }
+        if (Error.captureStackTrace) {
+          Error.captureStackTrace(err, lightningCssPlugin);
+        }
+        throw err;
+      }
+    }, _sharedState.env.DEBUG && function (root) {
+      console.timeEnd("JIT TOTAL");
+      console.log("\\n");
+      return root;
+    }].filter(Boolean)
+  };
+};
+module.exports.postcss = true;
+module.exports.contextRef = contextRef;",
+  "processTailwindFeatures": ""use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return processTailwindFeatures;
+  }
+});
+const _normalizeTailwindDirectives = /*#__PURE__*/_interop_require_default(require("./lib/normalizeTailwindDirectives"));
+const _expandTailwindAtRules = /*#__PURE__*/_interop_require_default(require("./lib/expandTailwindAtRules"));
+const _expandApplyAtRules = /*#__PURE__*/_interop_require_default(require("./lib/expandApplyAtRules"));
+const _evaluateTailwindFunctions = /*#__PURE__*/_interop_require_default(require("./lib/evaluateTailwindFunctions"));
+const _substituteScreenAtRules = /*#__PURE__*/_interop_require_default(require("./lib/substituteScreenAtRules"));
+const _resolveDefaultsAtRules = /*#__PURE__*/_interop_require_default(require("./lib/resolveDefaultsAtRules"));
+const _collapseAdjacentRules = /*#__PURE__*/_interop_require_default(require("./lib/collapseAdjacentRules"));
+const _collapseDuplicateDeclarations = /*#__PURE__*/_interop_require_default(require("./lib/collapseDuplicateDeclarations"));
+const _partitionApplyAtRules = /*#__PURE__*/_interop_require_default(require("./lib/partitionApplyAtRules"));
+const _detectNesting = /*#__PURE__*/_interop_require_default(require("./lib/detectNesting"));
+const _setupContextUtils = require("./lib/setupContextUtils");
+const _featureFlags = require("./featureFlags");
+function _interop_require_default(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+function processTailwindFeatures(setupContext) {
+  return async function (root, result) {
+    let {
+      tailwindDirectives,
+      applyDirectives
+    } = (0, _normalizeTailwindDirectives.default)(root);
+    (0, _detectNesting.default)()(root, result);
+    // Partition apply rules that are found in the css
+    // itself.
+    (0, _partitionApplyAtRules.default)()(root, result);
+    let context = setupContext({
+      tailwindDirectives,
+      applyDirectives,
+      registerDependency(dependency) {
+        result.messages.push({
+          plugin: "tailwindcss",
+          parent: result.opts.from,
+          ...dependency
+        });
+      },
+      createContext(tailwindConfig, changedContent) {
+        return (0, _setupContextUtils.createContext)(tailwindConfig, changedContent, root);
+      }
+    })(root, result);
+    if (context.tailwindConfig.separator === "-") {
+      throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
+    }
+    (0, _featureFlags.issueFlagNotices)(context.tailwindConfig);
+    await (0, _expandTailwindAtRules.default)(context)(root, result);
+    // Partition apply rules that are generated by
+    // addComponents, addUtilities and so on.
+    (0, _partitionApplyAtRules.default)()(root, result);
+    (0, _expandApplyAtRules.default)(context)(root, result);
+    (0, _evaluateTailwindFunctions.default)(context)(root, result);
+    (0, _substituteScreenAtRules.default)(context)(root, result);
+    (0, _resolveDefaultsAtRules.default)(context)(root, result);
+    (0, _collapseAdjacentRules.default)(context)(root, result);
+    (0, _collapseDuplicateDeclarations.default)(context)(root, result);
+    return context;
+  };
+}",
+}
+`;

packages/tailwindcss-patch/test/cache.test.ts

@@ -58,7 +58,7 @@ describe('cache', () => {
     expect(fs.existsSync(filepath)).toBe(false)
   })
 
-  it('multiple tw context merge cache', () => {
+  it('multiple tw context merge cache', async () => {
     const dir = path.resolve(__dirname, './fixtures/cache')
     const twPatcher = new TailwindcssPatcher({
       cache: {
@@ -67,7 +67,7 @@ describe('cache', () => {
       }
     })
     twPatcher.setCache(new Set())
-    getCss(['text-[100px]'])
+    await getCss(['text-[100px]'])
     let ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
     let set = twPatcher.getClassSet()
@@ -77,7 +77,7 @@ describe('cache', () => {
 
     // 2 times
     // 不累加
-    getCss(['text-[99px]'])
+    await getCss(['text-[99px]'])
     ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
     set = twPatcher.getClassSet()

packages/tailwindcss-patch/test/class.test.ts

@@ -2,20 +2,20 @@ import { TailwindcssPatcher } from '../src/class'
 import path from 'node:path'
 import { getCss, getTestCase } from './utils'
 describe('class', () => {
-  it('default', () => {
+  it('default', async () => {
     // const dir = path.resolve(__dirname, './fixtures/cache')
     const twPatcher = new TailwindcssPatcher()
     expect(twPatcher.cacheOptions.enable).toBe(false)
     twPatcher.patch()
-    getCss([getTestCase('hello-world.html')])
+    await getCss([getTestCase('hello-world.html')])
     const ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
     const set = twPatcher.getClassSet()
     expect(set.size).toBeGreaterThan(0)
     expect(set.size).toBe(4)
   })
 
-  it('cache option', () => {
+  it('cache option', async () => {
     const dir = path.resolve(__dirname, './fixtures/cache')
     const twPatcher = new TailwindcssPatcher({
       cache: {
@@ -28,7 +28,7 @@ describe('class', () => {
     const p = twPatcher.setCache(new Set(['*', 'bg-[#123456]', 'font-bold', 'text-3xl', 'underline']))
     expect(p).toBe(path.resolve(dir, 'index.json'))
     twPatcher.patch()
-    getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
+    await getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
     const ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
     const set = twPatcher.getClassSet({
@@ -38,9 +38,9 @@ describe('class', () => {
     expect(set.size).toBe(5)
   })
 
-  it('multiple time process sources', () => {
+  it('multiple time process sources', async () => {
     const twPatcher = new TailwindcssPatcher()
-    getCss(['text-[100px]'])
+    await getCss(['text-[100px]'])
     let ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
     let set = twPatcher.getClassSet()
@@ -50,7 +50,7 @@ describe('class', () => {
 
     // 2 times
     // 不累加
-    getCss(['text-[99px]'])
+    await getCss(['text-[99px]'])
     ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
     set = twPatcher.getClassSet()

packages/tailwindcss-patch/test/context.test.ts

@@ -1,8 +1,8 @@
 import { getContexts, getClassCacheSet } from '../src'
 import { getCss, getTestCase } from './utils'
 describe('common usage', () => {
-  it('hello-world', () => {
-    const result = getCss(getTestCase('hello-world.html'))
+  it('hello-world', async () => {
+    const result = await getCss(getTestCase('hello-world.html'))
     const ctxs = getContexts()
     expect(ctxs.length).toBeTruthy()
     const set = getClassCacheSet()
@@ -11,8 +11,8 @@ describe('common usage', () => {
     expect(result).toMatchSnapshot()
   })
 
-  it('hello-world with js', () => {
-    const result = getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
+  it('hello-world with js', async () => {
+    const result = await getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
     const ctxs = getContexts()
     expect(ctxs.length).toBeTruthy()
     const set = getClassCacheSet()
@@ -22,8 +22,8 @@ describe('common usage', () => {
   })
 
   // https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/issues/158
-  it("bg-[url('img_src')] lose efficacy", () => {
-    getCss([getTestCase('img-url.jsx')])
+  it("bg-[url('img_src')] lose efficacy", async () => {
+    await getCss([getTestCase('img-url.jsx')])
     const ctxs = getContexts()
     expect(ctxs).toBeTruthy()
     const set = getClassCacheSet()
@@ -33,8 +33,8 @@ describe('common usage', () => {
     //
   })
 
-  it('trailing slash', () => {
-    getCss([getTestCase('trailing-slash.vue')])
+  it('trailing slash', async () => {
+    await getCss([getTestCase('trailing-slash.vue')])
     const ctxs = getContexts()
     expect(ctxs).toBeTruthy()
     const set = getClassCacheSet()

packages/tailwindcss-patch/test/fixtures/versions/README.md

@@ -0,0 +1,3 @@
+# tailwindcss-versions
+
+yarn add tailwindcss