@modern-js/plugin-tailwindcss 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -1,49 +1,56 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-import hoistNonReactStatics from 'hoist-non-react-statics';
-import React, { useContext } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DesignTokenContext = /*#__PURE__*/React.createContext({});
-export const useDesignTokens = () => useContext(DesignTokenContext);
-export default ((options = {}) => ({
-  name: '@modern-js/plugin-design-token',
+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 => {
+    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, {
+          const { ThemeProvider } = require("@modern-js/runtime/styled");
+          return /* @__PURE__ */ jsx(ThemeProvider, {
             theme: token,
-            children: /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
+            children: /* @__PURE__ */ jsx(DesignTokenContext.Provider, {
               value: token,
-              children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+              children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
             })
           });
         } else if (useStyledComponentsThemeProvider) {
-          const {
-            ThemeProvider
-          } = require('@modern-js/runtime/styled');
-          return /*#__PURE__*/_jsx(ThemeProvider, {
+          const { ThemeProvider } = require("@modern-js/runtime/styled");
+          return /* @__PURE__ */ jsx(ThemeProvider, {
             theme: token,
-            children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+            children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
           });
         } else if (useDesignTokenContext) {
-          return /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
+          return /* @__PURE__ */ jsx(DesignTokenContext.Provider, {
             value: token,
-            children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+            children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
           });
         } else {
-          return /*#__PURE__*/_jsx(App, _objectSpread({}, props));
+          return /* @__PURE__ */ jsx(App, __spreadValues({}, props));
         }
       };
       return next({
@@ -51,4 +58,9 @@ export default ((options = {}) => ({
       });
     }
   })
-}));
+});
+export {
+  DesignTokenContext,
+  plugin_default as default,
+  useDesignTokens
+};

package/dist/js/modern/index.js

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

package/dist/js/modern/tailwind.js

@@ -1,39 +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));
+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 getPureDesignSystemConfig = (designSystemConfig) => {
   const pureDesignSystemConfig = cloneDeep(designSystemConfig);
   delete pureDesignSystemConfig.supportStyledComponents;
   return pureDesignSystemConfig;
 };
-const getTailwindConfig = (config, option = {}) => {
-  var _config$tools, _ref, _designSystem;
-  const purgeConfig = merge({
-    // TODO: how the operating environment is determined
-    enabled: process.env.NODE_ENV === 'production',
-    // TODO: Remove or not
-    layers: ['utilities'],
-    content: []
-  }, option.pureConfig || {});
+const getTailwindConfig = (tailwindcss, designSystem, option = {}) => {
+  const purgeConfig = merge(
+    {
+      enabled: process.env.NODE_ENV === "production",
+      layers: ["utilities"],
+      content: []
+    },
+    option.pureConfig || {}
+  );
   const defaultTailwindConfig = {
     purge: purgeConfig
   };
-  const tailwindConfig = applyOptionsChain(defaultTailwindConfig, ((_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : _config$tools.tailwindcss) || {});
-  const designSystem = getPureDesignSystemConfig((_ref = (_designSystem = config.designSystem) !== null && _designSystem !== void 0 ? _designSystem : config.source.designSystem) !== null && _ref !== void 0 ? _ref : {});
+  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`);
-    // eslint-disable-next-line no-process-exit
+    logger.error(
+      `should not exist '${key}' on tools.tailwindcss, please remove it`
+    );
     process.exit(0);
   }
-
-  // Because there is no default theme configuration
-  tailwindConfig.theme = designSystem || {};
+  tailwindConfig.theme = designSystemConfig || {};
   return tailwindConfig;
 };
-export { getTailwindConfig };
+export {
+  getTailwindConfig
+};

package/dist/js/modern/utils.js

@@ -1,6 +1,26 @@
-import path from 'path';
-import { fs } from '@modern-js/utils';
-export const template = configPath => `
+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 };
 }
@@ -20,13 +40,17 @@ module.exports = {
     ...tailwindcss,
 };
 `;
-export const checkTwinMacroNotExist = async appDirectory => {
-  const depName = 'twin.macro';
-  const packageJson = (await fs.readJSON(path.join(appDirectory, 'package.json'), {
+const checkTwinMacroNotExist = (appDirectory) => __async(void 0, null, function* () {
+  const depName = "twin.macro";
+  const packageJson = (yield fs.readJSON(path.join(appDirectory, "package.json"), {
     throws: false
   })) || {};
-  if (typeof packageJson.dependencies === 'object' && packageJson.dependencies[depName] || typeof packageJson.devDependencies === 'object' && packageJson.devDependencies[depName]) {
+  if (typeof packageJson.dependencies === "object" && packageJson.dependencies[depName] || typeof packageJson.devDependencies === "object" && packageJson.devDependencies[depName]) {
     return false;
   }
   return true;
-};
+});
+export {
+  checkTwinMacroNotExist,
+  template
+};

package/dist/js/node/cli.js

@@ -1,131 +1,195 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => cli_default,
+  getRandomTwConfigFileName: () => getRandomTwConfigFileName
 });
-exports.getRandomTwConfigFileName = exports.default = void 0;
-var _path = _interopRequireDefault(require("path"));
-var _utils = require("@modern-js/utils");
-var _cli = _interopRequireDefault(require("./design-token/cli"));
-var _tailwind = require("./tailwind");
-var _utils2 = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-const supportCssInJsLibrary = 'styled-components';
-const getRandomTwConfigFileName = internalDirectory => {
-  return (0, _utils.slash)(_path.default.join(internalDirectory, `tailwind.config.${Date.now()}.${(0, _utils.nanoid)()}.js`));
+module.exports = __toCommonJS(stdin_exports);
+var import_path = __toESM(require("path"));
+var import_utils = require("@modern-js/utils");
+var import_cli = __toESM(require("./design-token/cli"));
+var import_tailwind = require("./tailwind");
+var import_utils2 = require("./utils");
+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());
+  });
+};
+const supportCssInJsLibrary = "styled-components";
+const getRandomTwConfigFileName = (internalDirectory) => {
+  return (0, import_utils.slash)(
+    import_path.default.join(
+      internalDirectory,
+      `tailwind.config.${Date.now()}.${(0, import_utils.nanoid)()}.js`
+    )
+  );
 };
-exports.getRandomTwConfigFileName = getRandomTwConfigFileName;
-var _default = ({
-  pluginName
-} = {
-  pluginName: '@modern-js/plugin-tailwindcss'
+var cli_default = ({ pluginName } = {
+  pluginName: "@modern-js/plugin-tailwindcss"
 }) => ({
-  name: '@modern-js/plugin-tailwindcss',
-  // support designSystem.supportStyledComponents
-  usePlugins: [(0, _cli.default)({
-    pluginName
-  })],
-  setup: async api => {
-    const {
-      appDirectory,
-      internalDirectory
-    } = api.useAppContext();
-    let internalTwConfigPath = '';
-    // When reinstalling dependencies, most of the time the project will be restarted
-    const notHaveTwinMacro = await (0, _utils2.checkTwinMacroNotExist)(appDirectory);
+  name: "@modern-js/plugin-tailwindcss",
+  usePlugins: [
+    (0, import_cli.default)({
+      pluginName
+    })
+  ],
+  setup: (api) => __async(void 0, null, function* () {
+    const { appDirectory, internalDirectory } = api.useAppContext();
+    let internalTwConfigPath = "";
+    const notHaveTwinMacro = yield (0, import_utils2.checkTwinMacroNotExist)(appDirectory);
     return {
       prepare() {
         if (notHaveTwinMacro) {
           return;
         }
         internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
-        const globPattern = (0, _utils.slash)(_path.default.join(appDirectory, _utils.CONFIG_CACHE_DIR, '*.cjs'));
-        const files = _utils.globby.sync(globPattern, {
+        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) {
-          _utils.fs.writeFileSync(internalTwConfigPath, (0, _utils2.template)(files[files.length - 1]), 'utf-8');
+          import_utils.fs.writeFileSync(
+            internalTwConfigPath,
+            (0, import_utils2.template)(files[files.length - 1]),
+            "utf-8"
+          );
         }
       },
       validateSchema() {
-        return _utils.PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
+        return import_utils.PLUGIN_SCHEMAS["@modern-js/plugin-tailwindcss"];
       },
       config() {
         return {
           tools: {
-            // TODO: Add interface about postcss config
-            // TODO: In module project, also is called, but should not be called.
-            postcss: config => {
+            postcss: (config) => {
+              var _a, _b;
               const modernConfig = api.useResolvedConfigContext();
-              if (!config.postcssOptions
-              // config.$$tools === 'module-tools'
-              ) {
-                if (Array.isArray(config.plugins)) {
-                  const tailwindConfig = (0, _tailwind.getTailwindConfig)(modernConfig, {
-                    pureConfig: {
-                      content: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx', './src/**/*.less', './src/**/*.css', './src/**/*.sass', './src/**/*.scss', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
-                    }
-                  });
-                  config.plugins.push(require('tailwindcss')(tailwindConfig));
-                } else {
-                  const tailwindConfig = (0, _tailwind.getTailwindConfig)(modernConfig, {
-                    pureConfig: {
-                      content: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx', './src/**/*.less', './src/**/*.css', './src/**/*.sass', './src/**/*.scss', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
-                    }
-                  });
-                  config.plugins = [require('tailwindcss')(tailwindConfig)];
-                }
-              } else {
-                const tailwindConfig = (0, _tailwind.getTailwindConfig)(modernConfig, {
+              const tailwindConfig = (0, import_tailwind.getTailwindConfig)(
+                (_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: ['./config/html/**/*.html', './config/html/**/*.ejs', './config/html/**/*.hbs', './src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx',
-                    // about storybook
-                    './storybook/**/*', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
+                    content: [
+                      "./config/html/**/*.html",
+                      "./config/html/**/*.ejs",
+                      "./config/html/**/*.hbs",
+                      "./src/**/*.js",
+                      "./src/**/*.jsx",
+                      "./src/**/*.ts",
+                      "./src/**/*.tsx",
+                      "./storybook/**/*",
+                      "./styles/**/*.less",
+                      "./styles/**/*.css",
+                      "./styles/**/*.sass",
+                      "./styles/**/*.scss"
+                    ]
                   }
-                });
-                if (Array.isArray(config.postcssOptions.plugins)) {
-                  config.postcssOptions.plugins.push(require('tailwindcss')(tailwindConfig));
-                } else {
-                  config.postcssOptions.plugins = [require('tailwindcss')(tailwindConfig)];
                 }
+              );
+              if (Array.isArray(config.postcssOptions.plugins)) {
+                config.postcssOptions.plugins.push(
+                  require("tailwindcss")(tailwindConfig)
+                );
+              } else {
+                config.postcssOptions.plugins = [
+                  require("tailwindcss")(tailwindConfig)
+                ];
               }
             },
-            babel(config) {
-              var _config$plugins;
+            babel(_, { addPlugins }) {
               if (notHaveTwinMacro) {
                 return;
               }
-              const twinConfig = {
-                twin: {
-                  preset: supportCssInJsLibrary,
-                  config: internalTwConfigPath
-                }
-              };
-              (_config$plugins = config.plugins) === null || _config$plugins === void 0 ? void 0 : _config$plugins.some(plugin => {
-                if (Array.isArray(plugin) && plugin[0]) {
-                  const pluginTarget = plugin[0];
-                  let pluginOptions = plugin[1];
-                  if (typeof pluginTarget === 'string' &&
-                  // TODO: use babel chain
-                  (0, _utils.slash)(pluginTarget).includes('compiled/babel-plugin-macros')) {
-                    if (pluginOptions) {
-                      pluginOptions = _objectSpread(_objectSpread({}, pluginOptions), twinConfig);
-                    } else {
-                      plugin.push(twinConfig);
+              addPlugins([
+                [
+                  require.resolve("babel-plugin-macros"),
+                  {
+                    twin: {
+                      preset: supportCssInJsLibrary,
+                      config: internalTwConfigPath
                     }
-                    return true;
                   }
-                }
-                return false;
-              });
+                ]
+              ]);
             }
           }
         };
+      },
+      beforeBuildTask({ config }) {
+        const modernConfig = api.useResolvedConfigContext();
+        const { designSystem } = modernConfig;
+        const tailwindConfig = (0, import_tailwind.getTailwindConfig)(
+          config.style.tailwindCss,
+          designSystem,
+          {
+            pureConfig: {
+              content: [
+                "./config/html/**/*.html",
+                "./config/html/**/*.ejs",
+                "./config/html/**/*.hbs",
+                "./src/**/*.js",
+                "./src/**/*.jsx",
+                "./src/**/*.ts",
+                "./src/**/*.tsx",
+                "./storybook/**/*",
+                "./styles/**/*.less",
+                "./styles/**/*.css",
+                "./styles/**/*.sass",
+                "./styles/**/*.scss"
+              ]
+            }
+          }
+        );
+        if (Array.isArray(config.style.postcss.plugins)) {
+          config.style.postcss.plugins.push(
+            require("tailwindcss")(tailwindConfig)
+          );
+        } else {
+          config.style.postcss.plugins = [
+            require("tailwindcss")(tailwindConfig)
+          ];
+        }
+        return config;
       }
     };
-  }
+  })
 });
-exports.default = _default;