@modern-js/plugin-tailwindcss 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @modern-js/plugin-tailwindcss
 
+## 2.4.0
+
+### Patch Changes
+
+- 98a2733: fix(tailwind): fix webpack cache not work when using twin.macro
+
+  fix(tailwind): 修复使用 twin.macro 时 webpack 缓存不生效的问题
+
+- Updated dependencies [98a2733]
+- Updated dependencies [9e907ec]
+- Updated dependencies [8c2db5f]
+  - @modern-js/utils@2.4.0
+  - @modern-js/runtime@2.4.0
+
 ## 2.3.0
 
 ### Patch Changes

package/README.md

@@ -1,30 +1,26 @@
-
 <p align="center">
   <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
 </p>
+
+<h1 align="center">Modern.js</h1>
+
 <p align="center">
-现代 Web 工程体系
-  <br/>
-  <a href="https://modernjs.dev" target="blank">
-    modernjs.dev
-  </a>
-</p>
-<p align="center">
-  The meta-framework suite designed from scratch for frontend-focused modern web development
+  A Progressive React Framework for modern web development.
 </p>
 
-# Introduction
-
-> The doc site ([modernjs.dev](https://modernjs.dev)) and articles are only available in Chinese for now, we are planning to add English versions soon.
+## Getting Started
 
-- [Modern.js: Hello, World!](https://zhuanlan.zhihu.com/p/426707646)
+Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-start) to get started with Modern.js.
 
-## Getting Started
+## Documentation
 
-- [Quick Start](https://modernjs.dev/docs/start)
-- [Guides](https://modernjs.dev/docs/guides)
-- [API References](https://modernjs.dev/docs/apis)
+- [English Documentation](https://modernjs.dev/en/)
+- [中文文档](https://modernjs.dev)
 
 ## Contributing
 
-- [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md)
+Please read the [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md).
+
+## License
+
+Modern.js is [MIT licensed](https://github.com/modern-js-dev/modern.js/blob/main/LICENSE).

package/dist/js/modern/cli.js

@@ -33,7 +33,8 @@ import {
   template,
   checkTwinMacroExist,
   getTailwindPath,
-  getTailwindVersion
+  getTailwindVersion,
+  getTwinMacroMajorVersion
 } from "./utils";
 const supportCssInJsLibrary = "styled-components";
 const getRandomTwConfigFileName = (internalDirectory) => {
@@ -71,43 +72,52 @@ var cli_default = ({ pluginName } = {
     ];
     return {
       prepare() {
-        if (!haveTwinMacro) {
-          return;
-        }
-        internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
-        const globPattern = slash(
-          path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs")
-        );
-        const files = globby.sync(globPattern, {
-          absolute: true
-        });
-        if (files.length > 0) {
-          fs.writeFileSync(
-            internalTwConfigPath,
-            template(files[files.length - 1]),
-            "utf-8"
-          );
+        if (haveTwinMacro) {
+          const twinMajorVersion = getTwinMacroMajorVersion(appDirectory);
+          const useConfigPath = twinMajorVersion && twinMajorVersion < 3;
+          if (useConfigPath) {
+            internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
+            const globPattern = slash(
+              path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs")
+            );
+            const files = globby.sync(globPattern, {
+              absolute: true
+            });
+            if (files.length > 0) {
+              fs.writeFileSync(
+                internalTwConfigPath,
+                template(files[files.length - 1]),
+                "utf-8"
+              );
+            }
+          }
         }
       },
       validateSchema() {
         return PLUGIN_SCHEMAS["@modern-js/plugin-tailwindcss"];
       },
       config() {
+        let tailwindConfig;
+        const initTailwindConfig = () => {
+          var _a, _b;
+          if (!tailwindConfig) {
+            const modernConfig = api.useResolvedConfigContext();
+            tailwindConfig = getTailwindConfig(
+              tailwindVersion,
+              (_a = modernConfig == null ? void 0 : modernConfig.tools) == null ? void 0 : _a.tailwindcss,
+              (_b = modernConfig == null ? void 0 : modernConfig.source) == null ? void 0 : _b.designSystem,
+              {
+                pureConfig: {
+                  content: defaultContent
+                }
+              }
+            );
+          }
+        };
         return {
           tools: {
             postcss: (config) => {
-              var _a, _b;
-              const modernConfig = api.useResolvedConfigContext();
-              const tailwindConfig = getTailwindConfig(
-                tailwindVersion,
-                (_a = modernConfig == null ? void 0 : modernConfig.tools) == null ? void 0 : _a.tailwindcss,
-                (_b = modernConfig == null ? void 0 : modernConfig.source) == null ? void 0 : _b.designSystem,
-                {
-                  pureConfig: {
-                    content: defaultContent
-                  }
-                }
-              );
+              initTailwindConfig();
               const tailwindPlugin = require(tailwindPath)(tailwindConfig);
               if (Array.isArray(config.postcssOptions.plugins)) {
                 config.postcssOptions.plugins.push(tailwindPlugin);
@@ -117,13 +127,14 @@ var cli_default = ({ pluginName } = {
             },
             babel(_, { addPlugins }) {
               if (haveTwinMacro) {
+                initTailwindConfig();
                 addPlugins([
                   [
                     require.resolve("babel-plugin-macros"),
                     {
                       twin: {
                         preset: supportCssInJsLibrary,
-                        config: internalTwConfigPath
+                        config: internalTwConfigPath || tailwindConfig
                       }
                     }
                   ]

package/dist/js/modern/utils.js

@@ -40,15 +40,26 @@ module.exports = {
     ...tailwindcss,
 };
 `;
+const TWIN_MACRO_NAME = "twin.macro";
 const checkTwinMacroExist = (appDirectory) => __async(void 0, null, function* () {
-  const depName = "twin.macro";
   const packageJson = (yield fs.readJSON(path.join(appDirectory, "package.json"), {
     throws: false
   })) || {};
   return Boolean(
-    typeof packageJson.dependencies === "object" && packageJson.dependencies[depName] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[depName]
+    typeof packageJson.dependencies === "object" && packageJson.dependencies[TWIN_MACRO_NAME] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[TWIN_MACRO_NAME]
   );
 });
+const getTwinMacroMajorVersion = (appDirectory) => {
+  try {
+    const pkgJsonPath = require.resolve(`${TWIN_MACRO_NAME}/package.json`, {
+      paths: [appDirectory]
+    });
+    const { version } = require(pkgJsonPath);
+    return Number(version.split(".")[0]);
+  } catch (err) {
+    return null;
+  }
+};
 function getTailwindPath(appDirectory) {
   try {
     return require.resolve("tailwindcss", { paths: [appDirectory, __dirname] });
@@ -70,5 +81,6 @@ export {
   checkTwinMacroExist,
   getTailwindPath,
   getTailwindVersion,
+  getTwinMacroMajorVersion,
   template
 };

package/dist/js/node/cli.js

@@ -88,43 +88,52 @@ var cli_default = ({ pluginName } = {
     ];
     return {
       prepare() {
-        if (!haveTwinMacro) {
-          return;
-        }
-        internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
-        const globPattern = (0, import_utils.slash)(
-          import_path.default.join(appDirectory, import_utils.CONFIG_CACHE_DIR, "*.cjs")
-        );
-        const files = import_utils.globby.sync(globPattern, {
-          absolute: true
-        });
-        if (files.length > 0) {
-          import_utils.fs.writeFileSync(
-            internalTwConfigPath,
-            (0, import_utils2.template)(files[files.length - 1]),
-            "utf-8"
-          );
+        if (haveTwinMacro) {
+          const twinMajorVersion = (0, import_utils2.getTwinMacroMajorVersion)(appDirectory);
+          const useConfigPath = twinMajorVersion && twinMajorVersion < 3;
+          if (useConfigPath) {
+            internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
+            const globPattern = (0, import_utils.slash)(
+              import_path.default.join(appDirectory, import_utils.CONFIG_CACHE_DIR, "*.cjs")
+            );
+            const files = import_utils.globby.sync(globPattern, {
+              absolute: true
+            });
+            if (files.length > 0) {
+              import_utils.fs.writeFileSync(
+                internalTwConfigPath,
+                (0, import_utils2.template)(files[files.length - 1]),
+                "utf-8"
+              );
+            }
+          }
         }
       },
       validateSchema() {
         return import_utils.PLUGIN_SCHEMAS["@modern-js/plugin-tailwindcss"];
       },
       config() {
+        let tailwindConfig;
+        const initTailwindConfig = () => {
+          var _a, _b;
+          if (!tailwindConfig) {
+            const modernConfig = api.useResolvedConfigContext();
+            tailwindConfig = (0, import_tailwind.getTailwindConfig)(
+              tailwindVersion,
+              (_a = modernConfig == null ? void 0 : modernConfig.tools) == null ? void 0 : _a.tailwindcss,
+              (_b = modernConfig == null ? void 0 : modernConfig.source) == null ? void 0 : _b.designSystem,
+              {
+                pureConfig: {
+                  content: defaultContent
+                }
+              }
+            );
+          }
+        };
         return {
           tools: {
             postcss: (config) => {
-              var _a, _b;
-              const modernConfig = api.useResolvedConfigContext();
-              const tailwindConfig = (0, import_tailwind.getTailwindConfig)(
-                tailwindVersion,
-                (_a = modernConfig == null ? void 0 : modernConfig.tools) == null ? void 0 : _a.tailwindcss,
-                (_b = modernConfig == null ? void 0 : modernConfig.source) == null ? void 0 : _b.designSystem,
-                {
-                  pureConfig: {
-                    content: defaultContent
-                  }
-                }
-              );
+              initTailwindConfig();
               const tailwindPlugin = require(tailwindPath)(tailwindConfig);
               if (Array.isArray(config.postcssOptions.plugins)) {
                 config.postcssOptions.plugins.push(tailwindPlugin);
@@ -134,13 +143,14 @@ var cli_default = ({ pluginName } = {
             },
             babel(_, { addPlugins }) {
               if (haveTwinMacro) {
+                initTailwindConfig();
                 addPlugins([
                   [
                     require.resolve("babel-plugin-macros"),
                     {
                       twin: {
                         preset: supportCssInJsLibrary,
-                        config: internalTwConfigPath
+                        config: internalTwConfigPath || tailwindConfig
                       }
                     }
                   ]

package/dist/js/node/utils.js

@@ -46,6 +46,7 @@ __export(utils_exports, {
   checkTwinMacroExist: () => checkTwinMacroExist,
   getTailwindPath: () => getTailwindPath,
   getTailwindVersion: () => getTailwindVersion,
+  getTwinMacroMajorVersion: () => getTwinMacroMajorVersion,
   template: () => template
 });
 module.exports = __toCommonJS(utils_exports);
@@ -71,15 +72,26 @@ module.exports = {
     ...tailwindcss,
 };
 `;
+const TWIN_MACRO_NAME = "twin.macro";
 const checkTwinMacroExist = (appDirectory) => __async(void 0, null, function* () {
-  const depName = "twin.macro";
   const packageJson = (yield import_utils.fs.readJSON(import_path.default.join(appDirectory, "package.json"), {
     throws: false
   })) || {};
   return Boolean(
-    typeof packageJson.dependencies === "object" && packageJson.dependencies[depName] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[depName]
+    typeof packageJson.dependencies === "object" && packageJson.dependencies[TWIN_MACRO_NAME] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[TWIN_MACRO_NAME]
   );
 });
+const getTwinMacroMajorVersion = (appDirectory) => {
+  try {
+    const pkgJsonPath = require.resolve(`${TWIN_MACRO_NAME}/package.json`, {
+      paths: [appDirectory]
+    });
+    const { version } = require(pkgJsonPath);
+    return Number(version.split(".")[0]);
+  } catch (err) {
+    return null;
+  }
+};
 function getTailwindPath(appDirectory) {
   try {
     return require.resolve("tailwindcss", { paths: [appDirectory, __dirname] });
@@ -102,5 +114,6 @@ function getTailwindVersion(appDirectory) {
   checkTwinMacroExist,
   getTailwindPath,
   getTailwindVersion,
+  getTwinMacroMajorVersion,
   template
 });

package/dist/js/treeshaking/cli.js

@@ -126,7 +126,7 @@ import path from "path";
 import { PLUGIN_SCHEMAS, fs, CONFIG_CACHE_DIR, globby, nanoid, slash } from "@modern-js/utils";
 import designTokenPlugin from "./design-token/cli";
 import { getTailwindConfig } from "./tailwind";
-import { template, checkTwinMacroExist, getTailwindPath, getTailwindVersion } from "./utils";
+import { template, checkTwinMacroExist, getTailwindPath, getTailwindVersion, getTwinMacroMajorVersion } from "./utils";
 var supportCssInJsLibrary = "styled-components";
 var getRandomTwConfigFileName = function(internalDirectory) {
     return slash(path.join(internalDirectory, "tailwind.config.".concat(Date.now(), ".").concat(nanoid(), ".js")));
@@ -172,32 +172,41 @@ var cli_default = function() {
                                 2,
                                 {
                                     prepare: function prepare() {
-                                        if (!haveTwinMacro) {
-                                            return;
-                                        }
-                                        internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
-                                        var globPattern = slash(path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs"));
-                                        var files = globby.sync(globPattern, {
-                                            absolute: true
-                                        });
-                                        if (files.length > 0) {
-                                            fs.writeFileSync(internalTwConfigPath, template(files[files.length - 1]), "utf-8");
+                                        if (haveTwinMacro) {
+                                            var twinMajorVersion = getTwinMacroMajorVersion(appDirectory);
+                                            var useConfigPath = twinMajorVersion && twinMajorVersion < 3;
+                                            if (useConfigPath) {
+                                                internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
+                                                var globPattern = slash(path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs"));
+                                                var files = globby.sync(globPattern, {
+                                                    absolute: true
+                                                });
+                                                if (files.length > 0) {
+                                                    fs.writeFileSync(internalTwConfigPath, template(files[files.length - 1]), "utf-8");
+                                                }
+                                            }
                                         }
                                     },
                                     validateSchema: function validateSchema() {
                                         return PLUGIN_SCHEMAS["@modern-js/plugin-tailwindcss"];
                                     },
                                     config: function config() {
+                                        var tailwindConfig;
+                                        var initTailwindConfig = function() {
+                                            if (!tailwindConfig) {
+                                                var ref, ref1;
+                                                var modernConfig = api.useResolvedConfigContext();
+                                                tailwindConfig = getTailwindConfig(tailwindVersion, modernConfig === null || modernConfig === void 0 ? void 0 : (ref = modernConfig.tools) === null || ref === void 0 ? void 0 : ref.tailwindcss, modernConfig === null || modernConfig === void 0 ? void 0 : (ref1 = modernConfig.source) === null || ref1 === void 0 ? void 0 : ref1.designSystem, {
+                                                    pureConfig: {
+                                                        content: defaultContent
+                                                    }
+                                                });
+                                            }
+                                        };
                                         return {
                                             tools: {
                                                 postcss: function(config) {
-                                                    var ref, ref1;
-                                                    var modernConfig = api.useResolvedConfigContext();
-                                                    var tailwindConfig = getTailwindConfig(tailwindVersion, modernConfig === null || modernConfig === void 0 ? void 0 : (ref = modernConfig.tools) === null || ref === void 0 ? void 0 : ref.tailwindcss, modernConfig === null || modernConfig === void 0 ? void 0 : (ref1 = modernConfig.source) === null || ref1 === void 0 ? void 0 : ref1.designSystem, {
-                                                        pureConfig: {
-                                                            content: defaultContent
-                                                        }
-                                                    });
+                                                    initTailwindConfig();
                                                     var tailwindPlugin = require(tailwindPath)(tailwindConfig);
                                                     if (Array.isArray(config.postcssOptions.plugins)) {
                                                         config.postcssOptions.plugins.push(tailwindPlugin);
@@ -210,13 +219,14 @@ var cli_default = function() {
                                                 babel: function babel(_, param) {
                                                     var addPlugins = param.addPlugins;
                                                     if (haveTwinMacro) {
+                                                        initTailwindConfig();
                                                         addPlugins([
                                                             [
                                                                 require.resolve("babel-plugin-macros"),
                                                                 {
                                                                     twin: {
                                                                         preset: supportCssInJsLibrary,
-                                                                        config: internalTwConfigPath
+                                                                        config: internalTwConfigPath || tailwindConfig
                                                                     }
                                                                 }
                                                             ]

package/dist/js/treeshaking/utils.js

@@ -127,13 +127,13 @@ import { fs } from "@modern-js/utils";
 var template = function(configPath) {
     return "\nfunction _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj };\n}\nconst modernConfig = _interopRequireDefault(require('".concat(configPath, "')).default;\n\nconst theme =\n    modernConfig && modernConfig.source && modernConfig.source.designSystem\n      ? modernConfig.source.designSystem\n      : {};\nconst tailwindcss =\n    modernConfig && modernConfig.tools && modernConfig.tools.tailwindcss\n      ? modernConfig.tools.tailwindcss\n      : {};\n\nmodule.exports = {\n    theme,\n    ...tailwindcss,\n};\n");
 };
+var TWIN_MACRO_NAME = "twin.macro";
 var checkTwinMacroExist = function() {
     var _ref = _asyncToGenerator(function(appDirectory) {
-        var depName, packageJson;
+        var packageJson;
         return __generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    depName = "twin.macro";
                     return [
                         4,
                         fs.readJSON(path.join(appDirectory, "package.json"), {
@@ -144,7 +144,7 @@ var checkTwinMacroExist = function() {
                     packageJson = _state.sent() || {};
                     return [
                         2,
-                        Boolean(typeof packageJson.dependencies === "object" && packageJson.dependencies[depName] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[depName])
+                        Boolean(typeof packageJson.dependencies === "object" && packageJson.dependencies[TWIN_MACRO_NAME] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[TWIN_MACRO_NAME])
                     ];
             }
         });
@@ -153,6 +153,19 @@ var checkTwinMacroExist = function() {
         return _ref.apply(this, arguments);
     };
 }();
+var getTwinMacroMajorVersion = function(appDirectory) {
+    try {
+        var pkgJsonPath = require.resolve("".concat(TWIN_MACRO_NAME, "/package.json"), {
+            paths: [
+                appDirectory
+            ]
+        });
+        var version = require(pkgJsonPath).version;
+        return Number(version.split(".")[0]);
+    } catch (err) {
+        return null;
+    }
+};
 function getTailwindPath(appDirectory) {
     try {
         return require.resolve("tailwindcss", {
@@ -178,4 +191,4 @@ function getTailwindVersion(appDirectory) {
         return "3";
     }
 }
-export { checkTwinMacroExist, getTailwindPath, getTailwindVersion, template };
+export { checkTwinMacroExist, getTailwindPath, getTailwindVersion, getTwinMacroMajorVersion, template };

package/dist/types/utils.d.ts

@@ -1,4 +1,5 @@
 export declare const template: (configPath: string) => string;
 export declare const checkTwinMacroExist: (appDirectory: string) => Promise<boolean>;
+export declare const getTwinMacroMajorVersion: (appDirectory: string) => number | null;
 export declare function getTailwindPath(appDirectory: string): string;
 export declare function getTailwindVersion(appDirectory: string): '2' | '3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/plugin-tailwindcss",
-  "description": "The meta-framework suite designed from scratch for frontend-focused modern web development.",
+  "description": "A Progressive React Framework for modern web development.",
   "homepage": "https://modernjs.dev",
   "bugs": "https://github.com/modern-js-dev/modern.js/issues",
   "repository": "modern-js-dev/modern.js",
@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.3.0",
+  "version": "2.4.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -46,7 +46,7 @@
     "@babel/runtime": "^7.18.0",
     "babel-plugin-macros": "3.1.0",
     "hoist-non-react-statics": "^3.3.2",
-    "@modern-js/utils": "2.3.0"
+    "@modern-js/utils": "2.4.0"
   },
   "devDependencies": {
     "@types/jest": "^27",
@@ -56,17 +56,17 @@
     "jest": "^27",
     "react": "^18",
     "postcss": "8.4.21",
-    "@modern-js/core": "2.3.0",
-    "@modern-js/module-tools": "2.3.0",
-    "@modern-js/runtime": "2.3.0",
-    "@modern-js/types": "2.3.0",
-    "@scripts/build": "2.3.0",
-    "@modern-js/app-tools": "2.3.0",
-    "@scripts/jest-config": "2.3.0"
+    "@modern-js/core": "2.4.0",
+    "@modern-js/module-tools": "2.4.0",
+    "@modern-js/runtime": "2.4.0",
+    "@modern-js/types": "2.4.0",
+    "@scripts/build": "2.4.0",
+    "@modern-js/app-tools": "2.4.0",
+    "@scripts/jest-config": "2.4.0"
   },
   "peerDependencies": {
     "tailwindcss": ">= 2.0.0 || >= 3.0.0",
-    "@modern-js/runtime": "^2.3.0"
+    "@modern-js/runtime": "^2.4.0"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {