@modern-js/plugin-tailwindcss 2.13.3 → 2.13.5-beta.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @modern-js/plugin-tailwindcss
 
+## 2.13.4
+
+### Patch Changes
+
+- @modern-js/runtime@2.13.4
+- @modern-js/utils@2.13.4
+
 ## 2.13.3
 
 ### Patch Changes

package/dist/cjs/cli.js

@@ -168,6 +168,10 @@ var cli_default = ({ pluginName } = {
           config.style.postcss.plugins = [tailwindPlugin];
         }
         return config;
+      },
+      modifyLibuild(config, next) {
+        config.transformCache = false;
+        return next(config);
       }
     };
   }

package/dist/esm/cli.js

@@ -257,6 +257,10 @@ var cli_default = function() {
                                             ];
                                         }
                                         return config;
+                                    },
+                                    modifyLibuild: function modifyLibuild(config, next) {
+                                        config.transformCache = false;
+                                        return next(config);
                                     }
                                 }
                             ];

package/dist/esm-node/cli.js

@@ -148,6 +148,10 @@ var cli_default = ({ pluginName } = {
           config.style.postcss.plugins = [tailwindPlugin];
         }
         return config;
+      },
+      modifyLibuild(config, next) {
+        config.transformCache = false;
+        return next(config);
       }
     };
   }

package/dist/js/modern/cli.js

@@ -0,0 +1,174 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+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,
+  getTwinMacroMajorVersion
+} from "./utils";
+const supportCssInJsLibrary = "styled-components";
+const getRandomTwConfigFileName = (internalDirectory) => {
+  return slash(
+    path.join(
+      internalDirectory,
+      `tailwind.config.${Date.now()}.${nanoid()}.js`
+    )
+  );
+};
+var cli_default = ({ pluginName } = {
+  pluginName: "@modern-js/plugin-tailwindcss"
+}) => ({
+  name: "@modern-js/plugin-tailwindcss",
+  usePlugins: [
+    designTokenPlugin({
+      pluginName
+    })
+  ],
+  setup: (api) => __async(void 0, null, function* () {
+    const { appDirectory, internalDirectory } = api.useAppContext();
+    let internalTwConfigPath = "";
+    const haveTwinMacro = yield checkTwinMacroExist(appDirectory);
+    const tailwindPath = getTailwindPath(appDirectory);
+    const tailwindVersion = getTailwindVersion(appDirectory);
+    const defaultContent = [
+      "./config/html/**/*.html",
+      "./config/html/**/*.ejs",
+      "./config/html/**/*.hbs",
+      "./src/**/*.js",
+      "./src/**/*.jsx",
+      "./src/**/*.ts",
+      "./src/**/*.tsx",
+      "./storybook/**/*"
+    ];
+    return {
+      prepare() {
+        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) => {
+              initTailwindConfig();
+              const tailwindPlugin = require(tailwindPath)(tailwindConfig);
+              if (Array.isArray(config.postcssOptions.plugins)) {
+                config.postcssOptions.plugins.push(tailwindPlugin);
+              } else {
+                config.postcssOptions.plugins = [tailwindPlugin];
+              }
+            },
+            babel(_, { addPlugins }) {
+              if (haveTwinMacro) {
+                initTailwindConfig();
+                addPlugins([
+                  [
+                    require.resolve("babel-plugin-macros"),
+                    {
+                      twin: {
+                        preset: supportCssInJsLibrary,
+                        config: internalTwConfigPath || tailwindConfig
+                      }
+                    }
+                  ]
+                ]);
+              }
+            }
+          }
+        };
+      },
+      beforeBuildTask(config) {
+        const modernConfig = api.useResolvedConfigContext();
+        const { designSystem } = modernConfig;
+        const tailwindConfig = getTailwindConfig(
+          tailwindVersion,
+          config.style.tailwindCss,
+          designSystem,
+          {
+            pureConfig: {
+              content: defaultContent
+            }
+          }
+        );
+        const tailwindPlugin = require(tailwindPath)(tailwindConfig);
+        if (Array.isArray(config.style.postcss.plugins)) {
+          config.style.postcss.plugins.push(tailwindPlugin);
+        } else {
+          config.style.postcss.plugins = [tailwindPlugin];
+        }
+        return config;
+      }
+    };
+  })
+});
+export {
+  cli_default as default,
+  getRandomTwConfigFileName
+};

package/dist/js/modern/design-token/cli/index.js

@@ -0,0 +1,110 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import {
+  lazyImport,
+  PLUGIN_SCHEMAS,
+  createRuntimeExportsUtils
+} from "@modern-js/utils";
+var cli_default = ({ pluginName } = { pluginName: "@modern-js/plugin-tailwindcss" }) => ({
+  name: "@modern-js/plugin-design-token",
+  setup(api) {
+    let pluginsExportsUtils;
+    const resolveConfig = lazyImport("tailwindcss/resolveConfig", require);
+    const PLUGIN_IDENTIFIER = "designToken";
+    const getDesignTokens = (designSystem) => {
+      const tailwindcssConfig = {};
+      tailwindcssConfig.theme = designSystem ? __spreadValues({}, designSystem) : {};
+      if (!designSystem) {
+        tailwindcssConfig.presets = [];
+      }
+      if (designSystem) {
+        delete tailwindcssConfig.theme.supportStyledComponents;
+      }
+      return resolveConfig(tailwindcssConfig).theme || {};
+    };
+    return {
+      config() {
+        const appContext = api.useAppContext();
+        pluginsExportsUtils = createRuntimeExportsUtils(
+          appContext.internalDirectory,
+          "plugins"
+        );
+        return {
+          source: {
+            alias: {
+              "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
+            }
+          },
+          tools: {}
+        };
+      },
+      modifyEntryImports({ entrypoint, imports }) {
+        var _a, _b;
+        const userConfig = api.useResolvedConfigContext();
+        const designSystem = (_b = (_a = userConfig.source) == null ? void 0 : _a.designSystem) != null ? _b : {};
+        if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
+          const designTokens = getDesignTokens(userConfig.source.designSystem);
+          imports.push({
+            value: "@modern-js/runtime/plugins",
+            specifiers: [
+              {
+                imported: PLUGIN_IDENTIFIER
+              }
+            ],
+            initialize: `
+  const designTokens = ${JSON.stringify(designTokens)};
+            `
+          });
+        }
+        return {
+          entrypoint,
+          imports
+        };
+      },
+      modifyEntryRuntimePlugins({ entrypoint, plugins }) {
+        var _a, _b;
+        const userConfig = api.useResolvedConfigContext();
+        const designSystem = (_b = (_a = userConfig.source) == null ? void 0 : _a.designSystem) != null ? _b : {};
+        let useSCThemeProvider = true;
+        if (designSystem) {
+          useSCThemeProvider = (designSystem == null ? void 0 : designSystem.supportStyledComponents) || false;
+        }
+        if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
+          plugins.push({
+            name: PLUGIN_IDENTIFIER,
+            options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? "true" : "false"}, useDesignTokenContext: false}`
+          });
+        }
+        return {
+          entrypoint,
+          plugins
+        };
+      },
+      validateSchema() {
+        return PLUGIN_SCHEMAS["@modern-js/plugin-design-token"];
+      },
+      addRuntimeExports() {
+        pluginsExportsUtils.addExport(
+          `export { default as designToken } from '${pluginName}/runtime-design-token'`
+        );
+      }
+    };
+  }
+});
+export {
+  cli_default as default
+};

package/dist/js/modern/design-token/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./runtime";
+export * from "./runtime";
+export {
+  default2 as default
+};

package/dist/js/modern/design-token/postcss-plugin/index.js

@@ -0,0 +1,18 @@
+var postcss_plugin_default = ({
+  cssVarsHash = {}
+} = {}) => ({
+  postcssPlugin: "postcss-replace-css-vars",
+  Declaration(decl) {
+    if (decl.value && typeof decl.value === "string") {
+      decl.value = decl.value.replace(/--\S*/g, (match) => {
+        if (cssVarsHash[match]) {
+          return cssVarsHash[match];
+        }
+        return match;
+      });
+    }
+  }
+});
+export {
+  postcss_plugin_default as default
+};

package/dist/js/modern/design-token/runtime/index.js

@@ -0,0 +1,6 @@
+import designTokenPlugin from "./plugin";
+export * from "./plugin";
+var runtime_default = designTokenPlugin;
+export {
+  runtime_default as default
+};

package/dist/js/modern/design-token/runtime/plugin.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx } from "react/jsx-runtime";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import React, { useContext } from "react";
+const DesignTokenContext = React.createContext({});
+const useDesignTokens = () => useContext(DesignTokenContext);
+var plugin_default = (options = {}) => ({
+  name: "@modern-js/plugin-design-token",
+  setup: () => ({
+    hoc({ App }, next) {
+      const DesignTokenAppWrapper = (props) => {
+        const {
+          token = {},
+          useStyledComponentsThemeProvider = false,
+          useDesignTokenContext = false
+        } = options;
+        if (useStyledComponentsThemeProvider && useDesignTokenContext) {
+          const { ThemeProvider } = require("@modern-js/runtime/styled");
+          return /* @__PURE__ */ jsx(ThemeProvider, {
+            theme: token,
+            children: /* @__PURE__ */ jsx(DesignTokenContext.Provider, {
+              value: token,
+              children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
+            })
+          });
+        } else if (useStyledComponentsThemeProvider) {
+          const { ThemeProvider } = require("@modern-js/runtime/styled");
+          return /* @__PURE__ */ jsx(ThemeProvider, {
+            theme: token,
+            children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
+          });
+        } else if (useDesignTokenContext) {
+          return /* @__PURE__ */ jsx(DesignTokenContext.Provider, {
+            value: token,
+            children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
+          });
+        } else {
+          return /* @__PURE__ */ jsx(App, __spreadValues({}, props));
+        }
+      };
+      return next({
+        App: hoistNonReactStatics(DesignTokenAppWrapper, App)
+      });
+    }
+  })
+});
+export {
+  DesignTokenContext,
+  plugin_default as default,
+  useDesignTokens
+};

package/dist/js/modern/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./cli";
+export {
+  default2 as default
+};

package/dist/js/modern/tailwind.js

@@ -0,0 +1,45 @@
+import { applyOptionsChain, logger } from "@modern-js/utils";
+import { merge, cloneDeep } from "@modern-js/utils/lodash";
+const checkIfExistNotAllowKeys = (tailwindConfig) => {
+  const notAllowExistKeys = ["theme"];
+  let notAllowKey = "";
+  const ret = Object.keys(tailwindConfig).some(
+    (key) => notAllowExistKeys.includes(key) && (notAllowKey = key)
+  );
+  return [ret, notAllowKey];
+};
+const getPureDesignSystemConfig = (designSystemConfig) => {
+  const pureDesignSystemConfig = cloneDeep(designSystemConfig);
+  delete pureDesignSystemConfig.supportStyledComponents;
+  return pureDesignSystemConfig;
+};
+const getTailwindConfig = (tailwindVersion, tailwindcss, designSystem, option = {}) => {
+  const purgeConfig = merge(
+    {
+      enabled: process.env.NODE_ENV === "production",
+      layers: ["utilities"],
+      content: []
+    },
+    option.pureConfig || {}
+  );
+  const defaultTailwindConfig = tailwindVersion === "3" ? { content: purgeConfig.content } : {
+    purge: purgeConfig
+  };
+  const tailwindConfig = applyOptionsChain(
+    defaultTailwindConfig,
+    tailwindcss || {}
+  );
+  const designSystemConfig = getPureDesignSystemConfig(designSystem != null ? designSystem : {});
+  const [exist, key] = checkIfExistNotAllowKeys(tailwindConfig);
+  if (exist) {
+    logger.error(
+      `should not exist '${key}' on tools.tailwindcss, please remove it`
+    );
+    process.exit(0);
+  }
+  tailwindConfig.theme = designSystemConfig || {};
+  return tailwindConfig;
+};
+export {
+  getTailwindConfig
+};

package/dist/js/modern/utils.js

@@ -0,0 +1,86 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import path from "path";
+import { fs } from "@modern-js/utils";
+const template = (configPath) => `
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : { default: obj };
+}
+const modernConfig = _interopRequireDefault(require('${configPath}')).default;
+
+const theme =
+    modernConfig && modernConfig.source && modernConfig.source.designSystem
+      ? modernConfig.source.designSystem
+      : {};
+const tailwindcss =
+    modernConfig && modernConfig.tools && modernConfig.tools.tailwindcss
+      ? modernConfig.tools.tailwindcss
+      : {};
+
+module.exports = {
+    theme,
+    ...tailwindcss,
+};
+`;
+const TWIN_MACRO_NAME = "twin.macro";
+const checkTwinMacroExist = (appDirectory) => __async(void 0, null, function* () {
+  const packageJson = (yield fs.readJSON(path.join(appDirectory, "package.json"), {
+    throws: false
+  })) || {};
+  return Boolean(
+    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] });
+  } catch (err) {
+    return "tailwindcss";
+  }
+}
+function getTailwindVersion(appDirectory) {
+  try {
+    const packageJsonPath = require.resolve("tailwindcss/package.json", {
+      paths: [appDirectory, __dirname]
+    });
+    return require(packageJsonPath).version.split(".")[0];
+  } catch (err) {
+    return "3";
+  }
+}
+export {
+  checkTwinMacroExist,
+  getTailwindPath,
+  getTailwindVersion,
+  getTwinMacroMajorVersion,
+  template
+};