@modern-js/plugin-tailwindcss 1.21.5 → 2.0.0-beta.1

package/CHANGELOG.md

@@ -1,27 +1,103 @@
 # @modern-js/plugin-tailwindcss
 
-## 1.21.5
+## 2.0.0-beta.1
 
-### Patch Changes
-
-- Updated dependencies [a150632]
-- Updated dependencies [29576fc]
-  - @modern-js/runtime@1.21.5
-  - @modern-js/utils@1.21.5
-
-## 1.21.4
-
-### Patch Changes
-
-- @modern-js/runtime@1.21.4
-- @modern-js/utils@1.21.4
+### Major Changes
 
-## 1.21.3
+- dda38c9: chore: v2
 
-### Patch Changes
+### Minor Changes
 
-- @modern-js/runtime@1.21.3
-- @modern-js/utils@1.21.3
+- 92f0ead: 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 配置
+
+- 92f0ead: 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
+
+- Updated dependencies [2344eb2]
+- Updated dependencies [a11fcf8]
+- Updated dependencies [b18fa8f]
+- Updated dependencies [c9e800d39a]
+- Updated dependencies [3e57f2b]
+- Updated dependencies [fbf5eed]
+- Updated dependencies [a2509bfbdb]
+- Updated dependencies [4369648ae2]
+- Updated dependencies [92f0ead]
+- Updated dependencies [92c0994]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [cc971eabfc]
+- Updated dependencies [5b9049f]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [92004d1]
+- Updated dependencies [b8bbe036c7]
+- Updated dependencies [40ed587]
+- Updated dependencies [60d5378632]
+- Updated dependencies [d5a31df781]
+- Updated dependencies [dda38c9]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [3bbea92b2a]
+- Updated dependencies [18aaf42]
+- Updated dependencies [fcace5b5b9]
+- Updated dependencies [abf3421]
+- Updated dependencies [543be9558e]
+- Updated dependencies [14b712d]
+  - @modern-js/runtime@2.0.0-beta.1
+  - @modern-js/utils@2.0.0-beta.1
+
+## 2.0.0-beta.0
+
+### Major Changes
+
+- dda38c9: chore: v2
+
+### Patch Changes
+
+- Updated dependencies [b18fa8f]
+- Updated dependencies [c9e800d39]
+- Updated dependencies [a2509bf]
+- Updated dependencies [4369648ae]
+- Updated dependencies [edd1cfb1a]
+- Updated dependencies [cc971eabf]
+- Updated dependencies [5b9049f]
+- Updated dependencies [6bda14ed7]
+- Updated dependencies [b8bbe036c]
+- Updated dependencies [60d5378]
+- Updated dependencies [d5a31df78]
+- Updated dependencies [dda38c9]
+- Updated dependencies [8b8e1bb57]
+- Updated dependencies [3bbea92b2]
+- Updated dependencies [fcace5b5b]
+- Updated dependencies [abf3421]
+- Updated dependencies [543be95]
+- Updated dependencies [14b712d]
+  - @modern-js/runtime@2.0.0-beta.0
+  - @modern-js/utils@2.0.0-beta.0
 
 ## 1.21.2
 

package/dist/js/modern/cli.js

@@ -1,9 +1,6 @@
 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';
 import DesignTokenPlugin from "./design-token/cli";
@@ -28,30 +25,26 @@ export default (({
       appDirectory,
       internalDirectory
     } = api.useAppContext();
-    let internalTwConfigPath = ''; // When reinstalling dependencies, most of the time the project will be restarted
-
+    let internalTwConfigPath = '';
+    // When reinstalling dependencies, most of the time the project will be restarted
     const notHaveTwinMacro = await checkTwinMacroNotExist(appDirectory);
     return {
       prepare() {
         if (notHaveTwinMacro) {
           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');
         }
       },
-
       validateSchema() {
         return PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
       },
-
       config() {
         return {
           tools: {
@@ -59,27 +52,44 @@ export default (({
             // TODO: In module project, also is called, but should not be called.
             postcss: config => {
               const modernConfig = api.useResolvedConfigContext();
-              const tailwindConfig = getTailwindConfig(modernConfig, {
-                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']
+              if (!config.postcssOptions
+              // config.$$tools === 'module-tools'
+              ) {
+                if (Array.isArray(config.plugins)) {
+                  const tailwindConfig = 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 = 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)];
                 }
-              });
-
-              if (Array.isArray(config.postcssOptions.plugins)) {
-                config.postcssOptions.plugins.push(require('tailwindcss')(tailwindConfig));
               } else {
-                config.postcssOptions.plugins = [require('tailwindcss')(tailwindConfig)];
+                const tailwindConfig = getTailwindConfig(modernConfig, {
+                  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']
+                  }
+                });
+                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;
-
               if (notHaveTwinMacro) {
                 return;
               }
-
               const twinConfig = {
                 twin: {
                   preset: supportCssInJsLibrary,
@@ -90,37 +100,23 @@ export default (({
                 if (Array.isArray(plugin) && plugin[0]) {
                   const pluginTarget = plugin[0];
                   let pluginOptions = plugin[1];
-
-                  if (typeof pluginTarget === 'string' && // TODO: use babel chain
+                  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);
                     }
-
                     return true;
                   }
                 }
-
                 return false;
               });
             }
-
           }
         };
-      },
-
-      moduleTailwindConfig() {
-        const modernConfig = api.useResolvedConfigContext();
-        const tailwindConfig = 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']
-          }
-        });
-        return require('tailwindcss')(tailwindConfig);
       }
-
     };
   }
 }));

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

@@ -1,9 +1,6 @@
 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
@@ -11,34 +8,27 @@ export default (({
   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 = userConfig => {
-      const {
-        source: {
-          designSystem
-        }
-      } = userConfig; // TODO: Type to be filled
-
+      var _userConfig$source;
+      const designSystem = (_userConfig$source = userConfig.source) === null || _userConfig$source === void 0 ? void 0 : _userConfig$source.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 ? _objectSpread({}, designSystem) : {};
 
+      // not use default design token when designToken.defaultTheme is false or theme is false
       if (!designSystem) {
         tailwindcssConfig.presets = [];
-      } // when only designSystem exist, need remove supportStyledComponents
-
+      }
 
+      // when only designSystem exist, need remove supportStyledComponents
       if (designSystem) {
         delete tailwindcssConfig.theme.supportStyledComponents;
       }
-
       return resolveConfig(tailwindcssConfig).theme || {};
     };
-
     return {
       config() {
         const appContext = api.useAppContext();
@@ -49,25 +39,21 @@ export default (({
               '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
             }
           },
-          tools: {// TODO: support less、scss、css vars
+          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
           }
         };
       },
-
       modifyEntryImports({
         entrypoint,
         imports
       }) {
+        var _userConfig$source$de, _userConfig$source2;
         const userConfig = api.useResolvedConfigContext();
-        const {
-          source: {
-            designSystem
-          }
-        } = userConfig;
-
+        const designSystem = (_userConfig$source$de = (_userConfig$source2 = userConfig.source) === null || _userConfig$source2 === void 0 ? void 0 : _userConfig$source2.designSystem) !== null && _userConfig$source$de !== void 0 ? _userConfig$source$de : {};
         if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
           const designTokens = getDesignTokens(userConfig);
           imports.push({
@@ -80,52 +66,41 @@ export default (({
             `
           });
         }
-
         return {
           entrypoint,
           imports
         };
       },
-
       modifyEntryRuntimePlugins({
         entrypoint,
         plugins
       }) {
-        const {
-          source: {
-            designSystem
-          }
-        } = api.useResolvedConfigContext();
+        var _userConfig$source$de2, _userConfig$source3;
+        const userConfig = api.useResolvedConfigContext();
+        const designSystem = (_userConfig$source$de2 = (_userConfig$source3 = userConfig.source) === null || _userConfig$source3 === void 0 ? void 0 : _userConfig$source3.designSystem) !== null && _userConfig$source$de2 !== void 0 ? _userConfig$source$de2 : {};
         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;
         }
-
         if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
           plugins.push({
             name: PLUGIN_IDENTIFIER,
             options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? 'true' : 'false'}, useDesignTokenContext: false}`
           });
         }
-
         return {
           entrypoint,
           plugins
         };
       },
-
       validateSchema() {
         // add source.designSystem.supportStyledComponents config
         return PLUGIN_SCHEMAS['@modern-js/plugin-design-token'];
       },
-
       addRuntimeExports() {
         pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
       }
-
     };
   }
-
 }));

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

@@ -2,17 +2,14 @@ export default (({
   cssVarsHash: _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;
       });
     }
   }
-
 }));

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

@@ -1,9 +1,6 @@
 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";
@@ -21,12 +18,10 @@ export default ((options = {}) => ({
           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, {
@@ -38,7 +33,6 @@ export default ((options = {}) => ({
           const {
             ThemeProvider
           } = require('@modern-js/runtime/styled');
-
           return /*#__PURE__*/_jsx(ThemeProvider, {
             theme: token,
             children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
@@ -52,11 +46,9 @@ export default ((options = {}) => ({
           return /*#__PURE__*/_jsx(App, _objectSpread({}, props));
         }
       };
-
       return next({
         App: hoistNonReactStatics(DesignTokenAppWrapper, App)
       });
     }
-
   })
 }));

package/dist/js/modern/tailwind.js

@@ -1,20 +1,18 @@
 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 = (config, option = {}) => {
+  var _ref, _designSystem;
   const purgeConfig = merge({
     // TODO: how the operating environment is determined
     enabled: process.env.NODE_ENV === 'production',
@@ -26,18 +24,16 @@ const getTailwindConfig = (config, option = {}) => {
     purge: purgeConfig
   };
   const tailwindConfig = applyOptionsChain(defaultTailwindConfig, config.tools.tailwindcss || {});
-  const designSystem = getPureDesignSystemConfig(config.source.designSystem || {});
+  const designSystem = getPureDesignSystemConfig((_ref = (_designSystem = config.designSystem) !== null && _designSystem !== void 0 ? _designSystem : config.source.designSystem) !== null && _ref !== void 0 ? _ref : {});
   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`);
+    // eslint-disable-next-line no-process-exit
     process.exit(0);
-  } // Because there is no default theme configuration
-
+  }
 
+  // Because there is no default theme configuration
   tailwindConfig.theme = designSystem || {};
   return tailwindConfig;
 };
-
 export { getTailwindConfig };

package/dist/js/modern/utils.js

@@ -25,10 +25,8 @@ export const checkTwinMacroNotExist = async appDirectory => {
   const packageJson = (await fs.readJSON(path.join(appDirectory, 'package.json'), {
     throws: false
   })) || {};
-
   if (typeof packageJson.dependencies === 'object' && packageJson.dependencies[depName] || typeof packageJson.devDependencies === 'object' && packageJson.devDependencies[depName]) {
     return false;
   }
-
   return true;
 };