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

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @modern-js/plugin-tailwindcss
 
+## 2.0.0-beta.4
+
+### Major Changes
+
+- dda38c9c3e: chore: v2
+
+### Minor Changes
+
+- 92f0eade39: feat:
+
+  1. add style config and add new hook
+  2. add dts alias logic
+  3. add copy logic
+  4. add log logic
+  5. add skipDeps config
+
+  feat:
+
+  1. 添加样式配置以及新的 hook
+  2. 添加 dts 别名处理
+  3. 添加 copy 逻辑
+  4. 添加日志逻辑
+  5. 添加 skipDeps 配置
+
+- 92f0eade39: feat:
+
+  1. core: 增加 test 函数
+  2. module plugins: 增加 `babel`, `mainField`, `target` 插件
+  3. storybook: 修改部分逻辑并且增加 tspath webpack 插件
+  4. 增加 designSystem 配置
+
+  feat:
+
+  1. core: add test method
+  2. module plugins: add `babel`, `mainField`, `target` plugin
+  3. storybook: change some logic and add tspath webpack plugin
+  4. add `designSystem` config
+
+### Patch Changes
+
+- d6546ad916: add buildConfig style in module-tools and remove tools
+  在 module-tools 里新增 buildConfig style 并删除 tools
+- 67472ca: fix: move babel-plugin-marcos to plugin-tailwindcss
+
+  fix: 将 babel-plugin-marcos 依赖移动到 plugin-tailwindcss 中
+
+- Updated dependencies [2344eb26ed]
+- Updated dependencies [a11fcf8b50]
+- Updated dependencies [a931594]
+- Updated dependencies [e7ce063]
+- Updated dependencies [b18fa8f3ed]
+- Updated dependencies [7879e8f]
+- Updated dependencies [50d4675]
+- Updated dependencies [c9e800d39a]
+- Updated dependencies [6604f1b]
+- Updated dependencies [6aca875]
+- Updated dependencies [fda836f]
+- Updated dependencies [d6bc321]
+- Updated dependencies [3e57f2bd58]
+- Updated dependencies [2e6031955e]
+- Updated dependencies [c5798d2]
+- Updated dependencies [fbf5eed5aa]
+- Updated dependencies [a2509bfbdb]
+- Updated dependencies [a7c6883]
+- Updated dependencies [425e57092d]
+- Updated dependencies [e4357f1856]
+- Updated dependencies [7b7d12c]
+- Updated dependencies [4369648ae2]
+- Updated dependencies [92f0eade39]
+- Updated dependencies [92c0994468]
+- Updated dependencies [2cc2eb3]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [cc971eabfc]
+- Updated dependencies [5b9049f2e9]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [92004d1906]
+- Updated dependencies [b8bbe036c7]
+- Updated dependencies [40ed5874c6]
+- Updated dependencies [60d5378632]
+- Updated dependencies [d5a31df781]
+- Updated dependencies [dda38c9c3e]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [3bbea92b2a]
+- Updated dependencies [9144c21]
+- Updated dependencies [b710adb843]
+- Updated dependencies [18aaf42249]
+- Updated dependencies [34702d5]
+- Updated dependencies [fcace5b5b9]
+- Updated dependencies [ea7cf06]
+- Updated dependencies [bbe4c4a]
+- Updated dependencies [e4558a0]
+- Updated dependencies [abf3421a75]
+- Updated dependencies [543be9558e]
+- Updated dependencies [14b712da84]
+  - @modern-js/runtime@2.0.0-beta.4
+  - @modern-js/utils@2.0.0-beta.4
+
 ## 2.0.0-beta.3
 
 ### Major Changes

package/dist/js/modern/cli.js

@@ -1,124 +1,177 @@
-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 path from 'path';
-import { PLUGIN_SCHEMAS, fs, CONFIG_CACHE_DIR, globby, nanoid, slash } from '@modern-js/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());
+  });
+};
+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, checkTwinMacroNotExist } from "./utils";
-const supportCssInJsLibrary = 'styled-components';
-export const getRandomTwConfigFileName = internalDirectory => {
-  return slash(path.join(internalDirectory, `tailwind.config.${Date.now()}.${nanoid()}.js`));
+const supportCssInJsLibrary = "styled-components";
+const getRandomTwConfigFileName = (internalDirectory) => {
+  return slash(
+    path.join(
+      internalDirectory,
+      `tailwind.config.${Date.now()}.${nanoid()}.js`
+    )
+  );
 };
-export 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: [DesignTokenPlugin({
-    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 checkTwinMacroNotExist(appDirectory);
+  name: "@modern-js/plugin-tailwindcss",
+  usePlugins: [
+    DesignTokenPlugin({
+      pluginName
+    })
+  ],
+  setup: (api) => __async(void 0, null, function* () {
+    const { appDirectory, internalDirectory } = api.useAppContext();
+    let internalTwConfigPath = "";
+    const notHaveTwinMacro = yield checkTwinMacroNotExist(appDirectory);
     return {
       prepare() {
         if (notHaveTwinMacro) {
           return;
         }
         internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
-        const globPattern = slash(path.join(appDirectory, CONFIG_CACHE_DIR, '*.cjs'));
+        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');
+          fs.writeFileSync(
+            internalTwConfigPath,
+            template(files[files.length - 1]),
+            "utf-8"
+          );
         }
       },
       validateSchema() {
-        return PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
+        return 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 => {
-              var _modernConfig$tools, _modernConfig$source;
+            postcss: (config) => {
+              var _a, _b;
               const modernConfig = api.useResolvedConfigContext();
-              const tailwindConfig = getTailwindConfig(modernConfig === null || modernConfig === void 0 ? void 0 : (_modernConfig$tools = modernConfig.tools) === null || _modernConfig$tools === void 0 ? void 0 : _modernConfig$tools.tailwindcss, modernConfig === null || modernConfig === void 0 ? void 0 : (_modernConfig$source = modernConfig.source) === null || _modernConfig$source === void 0 ? void 0 : _modernConfig$source.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']
+              const tailwindConfig = 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",
+                      "./storybook/**/*",
+                      "./styles/**/*.less",
+                      "./styles/**/*.css",
+                      "./styles/**/*.sass",
+                      "./styles/**/*.scss"
+                    ]
+                  }
                 }
-              });
+              );
               if (Array.isArray(config.postcssOptions.plugins)) {
-                config.postcssOptions.plugins.push(require('tailwindcss')(tailwindConfig));
+                config.postcssOptions.plugins.push(
+                  require("tailwindcss")(tailwindConfig)
+                );
               } else {
-                config.postcssOptions.plugins = [require('tailwindcss')(tailwindConfig)];
+                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
-                  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
-      }) {
+      beforeBuildTask({ config }) {
         const modernConfig = api.useResolvedConfigContext();
-        const {
-          designSystem
-        } = modernConfig;
-        const tailwindConfig = getTailwindConfig(config.style.tailwindCss, 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']
+        const { designSystem } = modernConfig;
+        const tailwindConfig = 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));
+          config.style.postcss.plugins.push(
+            require("tailwindcss")(tailwindConfig)
+          );
         } else {
-          config.style.postcss.plugins = [require('tailwindcss')(tailwindConfig)];
+          config.style.postcss.plugins = [
+            require("tailwindcss")(tailwindConfig)
+          ];
         }
         return config;
       }
     };
-  }
-}));
+  })
+});
+export {
+  cli_default as default,
+  getRandomTwConfigFileName
+};

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

@@ -1,27 +1,36 @@
-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 { lazyImport, PLUGIN_SCHEMAS, createRuntimeExportsUtils } from '@modern-js/utils';
-export default (({
-  pluginName
-} = {
-  pluginName: '@modern-js/plugin-tailwindcss'
-}) => ({
-  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 {
+  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 resolveConfig = lazyImport("tailwindcss/resolveConfig", require);
+    const PLUGIN_IDENTIFIER = "designToken";
+    const getDesignTokens = (designSystem) => {
       const tailwindcssConfig = {};
-      tailwindcssConfig.theme = designSystem ? _objectSpread({}, designSystem) : {};
-
-      // not use default design token when designToken.defaultTheme is false or theme is false
+      tailwindcssConfig.theme = designSystem ? __spreadValues({}, designSystem) : {};
       if (!designSystem) {
         tailwindcssConfig.presets = [];
       }
-
-      // when only designSystem exist, need remove supportStyledComponents
       if (designSystem) {
         delete tailwindcssConfig.theme.supportStyledComponents;
       }
@@ -30,35 +39,32 @@ export default (({
     return {
       config() {
         const appContext = api.useAppContext();
-        pluginsExportsUtils = createRuntimeExportsUtils(appContext.internalDirectory, 'plugins');
+        pluginsExportsUtils = createRuntimeExportsUtils(
+          appContext.internalDirectory,
+          "plugins"
+        );
         return {
           source: {
             alias: {
-              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
+              "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
             }
           },
-          tools: {
-            // TODO: support less、scss、css vars
-            // less: https://github.com/modern-js-dev/modern.js/pull/398/files#diff-f77c749e403fbf1fb676d5687bef3d7138a230331c849298d8afaff9b6afbc3dR166
-            // sass: https://github.com/modern-js-dev/modern.js/pull/398/files#diff-f77c749e403fbf1fb676d5687bef3d7138a230331c849298d8afaff9b6afbc3dR229
-            // postcss: https://github.com/modern-js-dev/modern.js/pull/398/files#diff-f77c749e403fbf1fb676d5687bef3d7138a230331c849298d8afaff9b6afbc3dR281
-          }
+          tools: {}
         };
       },
-      modifyEntryImports({
-        entrypoint,
-        imports
-      }) {
-        var _userConfig$source$de, _userConfig$source;
+      modifyEntryImports({ entrypoint, imports }) {
+        var _a, _b;
         const userConfig = api.useResolvedConfigContext();
-        const designSystem = (_userConfig$source$de = (_userConfig$source = userConfig.source) === null || _userConfig$source === void 0 ? void 0 : _userConfig$source.designSystem) !== null && _userConfig$source$de !== void 0 ? _userConfig$source$de : {};
-        if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
+        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
-            }],
+            value: "@modern-js/runtime/plugins",
+            specifiers: [
+              {
+                imported: PLUGIN_IDENTIFIER
+              }
+            ],
             initialize: `
   const designTokens = ${JSON.stringify(designTokens)};
             `
@@ -69,22 +75,18 @@ export default (({
           imports
         };
       },
-      modifyEntryRuntimePlugins({
-        entrypoint,
-        plugins
-      }) {
-        var _userConfig$source$de2, _userConfig$source2;
+      modifyEntryRuntimePlugins({ entrypoint, plugins }) {
+        var _a, _b;
         const userConfig = api.useResolvedConfigContext();
-        const designSystem = (_userConfig$source$de2 = (_userConfig$source2 = userConfig.source) === null || _userConfig$source2 === void 0 ? void 0 : _userConfig$source2.designSystem) !== null && _userConfig$source$de2 !== void 0 ? _userConfig$source$de2 : {};
+        const designSystem = (_b = (_a = userConfig.source) == null ? void 0 : _a.designSystem) != null ? _b : {};
         let useSCThemeProvider = true;
         if (designSystem) {
-          // when designSystem exist, designToken.styledComponents`s default value is false.
-          useSCThemeProvider = (designSystem === null || designSystem === void 0 ? void 0 : designSystem.supportStyledComponents) || false;
+          useSCThemeProvider = (designSystem == null ? void 0 : designSystem.supportStyledComponents) || false;
         }
-        if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
+        if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
           plugins.push({
             name: PLUGIN_IDENTIFIER,
-            options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? 'true' : 'false'}, useDesignTokenContext: false}`
+            options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? "true" : "false"}, useDesignTokenContext: false}`
           });
         }
         return {
@@ -93,12 +95,16 @@ export default (({
         };
       },
       validateSchema() {
-        // add source.designSystem.supportStyledComponents config
-        return PLUGIN_SCHEMAS['@modern-js/plugin-design-token'];
+        return PLUGIN_SCHEMAS["@modern-js/plugin-design-token"];
       },
       addRuntimeExports() {
-        pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
+        pluginsExportsUtils.addExport(
+          `export { default as designToken } from '${pluginName}/runtime-design-token'`
+        );
       }
     };
   }
-}));
+});
+export {
+  cli_default as default
+};

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

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

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

@@ -1,15 +1,18 @@
-export default (({
-  cssVarsHash: _cssVarsHash = {}
+var postcss_plugin_default = ({
+  cssVarsHash = {}
 } = {}) => ({
-  postcssPlugin: 'postcss-replace-css-vars',
+  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];
+    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

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