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

package/dist/js/treeshaking/cli.js

@@ -12,10 +12,9 @@ export var getRandomTwConfigFileName = function getRandomTwConfigFileName(intern
 };
 export default (function () {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    pluginName: '@modern-js/plugin-tailwindcss'
-  },
-      pluginName = _ref.pluginName;
-
+      pluginName: '@modern-js/plugin-tailwindcss'
+    },
+    pluginName = _ref.pluginName;
   return {
     name: '@modern-js/plugin-tailwindcss',
     // support designSystem.supportStyledComponents
@@ -25,17 +24,14 @@ export default (function () {
     setup: function () {
       var _setup = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(api) {
         var _api$useAppContext, appDirectory, internalDirectory, internalTwConfigPath, notHaveTwinMacro;
-
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _api$useAppContext = api.useAppContext(), appDirectory = _api$useAppContext.appDirectory, internalDirectory = _api$useAppContext.internalDirectory;
                 internalTwConfigPath = ''; // When reinstalling dependencies, most of the time the project will be restarted
-
                 _context.next = 4;
                 return checkTwinMacroNotExist(appDirectory);
-
               case 4:
                 notHaveTwinMacro = _context.sent;
                 return _context.abrupt("return", {
@@ -43,13 +39,11 @@ export default (function () {
                     if (notHaveTwinMacro) {
                       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');
                     }
@@ -64,26 +58,44 @@ export default (function () {
                         // TODO: In module project, also is called, but should not be called.
                         postcss: function postcss(config) {
                           var modernConfig = api.useResolvedConfigContext();
-                          var 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)) {
+                              var 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 {
+                              var _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)];
+                            var _tailwindConfig2 = 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')(_tailwindConfig2));
+                            } else {
+                              config.postcssOptions.plugins = [require('tailwindcss')(_tailwindConfig2)];
+                            }
                           }
                         },
                         babel: function babel(config) {
                           var _config$plugins;
-
                           if (notHaveTwinMacro) {
                             return;
                           }
-
                           var twinConfig = {
                             twin: {
                               preset: supportCssInJsLibrary,
@@ -94,36 +106,24 @@ export default (function () {
                             if (Array.isArray(plugin) && plugin[0]) {
                               var pluginTarget = plugin[0];
                               var 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: function moduleTailwindConfig() {
-                    var modernConfig = api.useResolvedConfigContext();
-                    var 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);
                   }
                 });
-
               case 6:
               case "end":
                 return _context.stop();
@@ -131,11 +131,9 @@ export default (function () {
           }
         }, _callee);
       }));
-
       function setup(_x) {
         return _setup.apply(this, arguments);
       }
-
       return setup;
     }()
   };

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

@@ -3,36 +3,32 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { lazyImport, PLUGIN_SCHEMAS, createRuntimeExportsUtils } from '@modern-js/utils';
 export default (function () {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    pluginName: '@modern-js/plugin-tailwindcss'
-  },
-      pluginName = _ref.pluginName;
-
+      pluginName: '@modern-js/plugin-tailwindcss'
+    },
+    pluginName = _ref.pluginName;
   return {
     name: '@modern-js/plugin-design-token',
     setup: function setup(api) {
       var pluginsExportsUtils;
       var resolveConfig = lazyImport('tailwindcss/resolveConfig', require);
       var PLUGIN_IDENTIFIER = 'designToken';
-
       var getDesignTokens = function getDesignTokens(userConfig) {
-        var _ref2 = userConfig,
-            designSystem = _ref2.source.designSystem; // TODO: Type to be filled
-
+        var _userConfig$source;
+        var designSystem = (_userConfig$source = userConfig.source) === null || _userConfig$source === void 0 ? void 0 : _userConfig$source.designSystem;
         var 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: function config() {
           var appContext = api.useAppContext();
@@ -43,19 +39,20 @@ export default (function () {
                 '@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: function modifyEntryImports(_ref3) {
-          var entrypoint = _ref3.entrypoint,
-              imports = _ref3.imports;
+        modifyEntryImports: function modifyEntryImports(_ref2) {
+          var _userConfig$source$de, _userConfig$source2;
+          var entrypoint = _ref2.entrypoint,
+            imports = _ref2.imports;
           var userConfig = api.useResolvedConfigContext();
-          var designSystem = userConfig.source.designSystem;
-
+          var 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) {
             var designTokens = getDesignTokens(userConfig);
             imports.push({
@@ -66,33 +63,28 @@ export default (function () {
               initialize: "\n  const designTokens = ".concat(JSON.stringify(designTokens), ";\n            ")
             });
           }
-
           return {
             entrypoint: entrypoint,
             imports: imports
           };
         },
-        modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(_ref4) {
-          var entrypoint = _ref4.entrypoint,
-              plugins = _ref4.plugins;
-
-          var _ref5 = api.useResolvedConfigContext(),
-              designSystem = _ref5.source.designSystem;
-
+        modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(_ref3) {
+          var _userConfig$source$de2, _userConfig$source3;
+          var entrypoint = _ref3.entrypoint,
+            plugins = _ref3.plugins;
+          var userConfig = api.useResolvedConfigContext();
+          var 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 : {};
           var 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: ".concat(useSCThemeProvider ? 'true' : 'false', ", useDesignTokenContext: false}")
             });
           }
-
           return {
             entrypoint: entrypoint,
             plugins: plugins

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

@@ -1,19 +1,16 @@
 export default (function () {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$cssVarsHash = _ref.cssVarsHash,
-      cssVarsHash = _ref$cssVarsHash === void 0 ? {} : _ref$cssVarsHash;
-
+    _ref$cssVarsHash = _ref.cssVarsHash,
+    cssVarsHash = _ref$cssVarsHash === void 0 ? {} : _ref$cssVarsHash;
   return {
     postcssPlugin: 'postcss-replace-css-vars',
     Declaration: function (_Declaration) {
       function Declaration(_x) {
         return _Declaration.apply(this, arguments);
       }
-
       Declaration.toString = function () {
         return _Declaration.toString();
       };
-
       return Declaration;
     }(function (decl) {
       if (decl.value && typeof decl.value === 'string') {
@@ -21,7 +18,6 @@ export default (function () {
           if (cssVarsHash[match]) {
             return cssVarsHash[match];
           }
-
           return match;
         });
       }

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

@@ -14,19 +14,16 @@ export default (function () {
       return {
         hoc: function hoc(_ref, next) {
           var App = _ref.App;
-
           var DesignTokenAppWrapper = function DesignTokenAppWrapper(props) {
             var _options$token = options.token,
-                token = _options$token === void 0 ? {} : _options$token,
-                _options$useStyledCom = options.useStyledComponentsThemeProvider,
-                useStyledComponentsThemeProvider = _options$useStyledCom === void 0 ? false : _options$useStyledCom,
-                _options$useDesignTok = options.useDesignTokenContext,
-                useDesignTokenContext = _options$useDesignTok === void 0 ? false : _options$useDesignTok;
-
+              token = _options$token === void 0 ? {} : _options$token,
+              _options$useStyledCom = options.useStyledComponentsThemeProvider,
+              useStyledComponentsThemeProvider = _options$useStyledCom === void 0 ? false : _options$useStyledCom,
+              _options$useDesignTok = options.useDesignTokenContext,
+              useDesignTokenContext = _options$useDesignTok === void 0 ? false : _options$useDesignTok;
             if (useStyledComponentsThemeProvider && useDesignTokenContext) {
               var _require = require('@modern-js/runtime/styled'),
-                  ThemeProvider = _require.ThemeProvider;
-
+                ThemeProvider = _require.ThemeProvider;
               return /*#__PURE__*/_jsx(ThemeProvider, {
                 theme: token,
                 children: /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
@@ -36,8 +33,7 @@ export default (function () {
               });
             } else if (useStyledComponentsThemeProvider) {
               var _require2 = require('@modern-js/runtime/styled'),
-                  _ThemeProvider = _require2.ThemeProvider;
-
+                _ThemeProvider = _require2.ThemeProvider;
               return /*#__PURE__*/_jsx(_ThemeProvider, {
                 theme: token,
                 children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
@@ -51,7 +47,6 @@ export default (function () {
               return /*#__PURE__*/_jsx(App, _objectSpread({}, props));
             }
           };
-
           return next({
             App: hoistNonReactStatics(DesignTokenAppWrapper, App)
           });

package/dist/js/treeshaking/tailwind.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { applyOptionsChain, logger } from '@modern-js/utils';
 import { merge, cloneDeep } from '@modern-js/utils/lodash';
-
 var checkIfExistNotAllowKeys = function checkIfExistNotAllowKeys(tailwindConfig) {
   var notAllowExistKeys = ['theme'];
   var notAllowKey = '';
@@ -10,14 +9,13 @@ var checkIfExistNotAllowKeys = function checkIfExistNotAllowKeys(tailwindConfig)
   });
   return [ret, notAllowKey];
 };
-
 var getPureDesignSystemConfig = function getPureDesignSystemConfig(designSystemConfig) {
   var pureDesignSystemConfig = cloneDeep(designSystemConfig);
   delete pureDesignSystemConfig.supportStyledComponents;
   return pureDesignSystemConfig;
 };
-
 var getTailwindConfig = function getTailwindConfig(config) {
+  var _config$tools, _ref, _designSystem;
   var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var purgeConfig = merge({
     // TODO: how the operating environment is determined
@@ -29,23 +27,20 @@ var getTailwindConfig = function getTailwindConfig(config) {
   var defaultTailwindConfig = {
     purge: purgeConfig
   };
-  var tailwindConfig = applyOptionsChain(defaultTailwindConfig, config.tools.tailwindcss || {});
-  var designSystem = getPureDesignSystemConfig(config.source.designSystem || {});
-
+  var tailwindConfig = applyOptionsChain(defaultTailwindConfig, ((_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : _config$tools.tailwindcss) || {});
+  var designSystem = getPureDesignSystemConfig((_ref = (_designSystem = config.designSystem) !== null && _designSystem !== void 0 ? _designSystem : config.source.designSystem) !== null && _ref !== void 0 ? _ref : {});
   var _checkIfExistNotAllow = checkIfExistNotAllowKeys(tailwindConfig),
-      _checkIfExistNotAllow2 = _slicedToArray(_checkIfExistNotAllow, 2),
-      exist = _checkIfExistNotAllow2[0],
-      key = _checkIfExistNotAllow2[1];
-
+    _checkIfExistNotAllow2 = _slicedToArray(_checkIfExistNotAllow, 2),
+    exist = _checkIfExistNotAllow2[0],
+    key = _checkIfExistNotAllow2[1];
   if (exist) {
-    logger.error("should not exist '".concat(key, "' on tools.tailwindcss, please remove it")); // eslint-disable-next-line no-process-exit
-
+    logger.error("should not exist '".concat(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/treeshaking/utils.js

@@ -18,30 +18,22 @@ export var checkTwinMacroNotExist = /*#__PURE__*/function () {
             return fs.readJSON(path.join(appDirectory, 'package.json'), {
               "throws": false
             });
-
           case 3:
             _context.t0 = _context.sent;
-
             if (_context.t0) {
               _context.next = 6;
               break;
             }
-
             _context.t0 = {};
-
           case 6:
             packageJson = _context.t0;
-
             if (!(_typeof(packageJson.dependencies) === 'object' && packageJson.dependencies[depName] || _typeof(packageJson.devDependencies) === 'object' && packageJson.devDependencies[depName])) {
               _context.next = 9;
               break;
             }
-
             return _context.abrupt("return", false);
-
           case 9:
             return _context.abrupt("return", true);
-
           case 10:
           case "end":
             return _context.stop();
@@ -49,7 +41,6 @@ export var checkTwinMacroNotExist = /*#__PURE__*/function () {
       }
     }, _callee);
   }));
-
   return function checkTwinMacroNotExist(_x) {
     return _ref.apply(this, arguments);
   };

package/dist/types/cli.d.ts

@@ -1,10 +1,8 @@
-import type { CliPlugin } from '@modern-js/core';
+import type { LegacyAppTools, CliPlugin } from '@modern-js/app-tools';
 export declare const getRandomTwConfigFileName: (internalDirectory: string) => string;
-
 declare const _default: ({
   pluginName
 }?: {
   pluginName: string;
-}) => CliPlugin;
-
+}) => CliPlugin<LegacyAppTools>;
 export default _default;

package/dist/types/design-token/cli/index.d.ts

@@ -1,9 +1,7 @@
-import type { CliPlugin } from '@modern-js/core';
-
+import type { CliPlugin, LegacyAppTools } from '@modern-js/app-tools';
 declare const _default: ({
   pluginName
 }?: {
   pluginName: string;
-}) => CliPlugin;
-
+}) => CliPlugin<LegacyAppTools>;
 export default _default;

package/dist/types/design-token/postcss-plugin/index.d.ts

@@ -1,5 +1,4 @@
 import type { Declaration } from 'postcss';
-
 declare const _default: ({
   cssVarsHash
 }?: {
@@ -8,5 +7,4 @@ declare const _default: ({
   postcssPlugin: string;
   Declaration(decl: Declaration): void;
 };
-
 export default _default;

package/dist/types/design-token/runtime/plugin.d.ts

@@ -2,11 +2,9 @@ import type { Plugin } from '@modern-js/runtime';
 import React from 'react';
 export declare const DesignTokenContext: React.Context<any>;
 export declare const useDesignTokens: () => IDesignTokens;
-
 declare const _default: (options?: {
   token?: Record<string, any>;
   useStyledComponentsThemeProvider?: boolean;
   useDesignTokenContext?: boolean;
 }) => Plugin;
-
 export default _default;

package/dist/types/tailwind.d.ts

@@ -1,5 +1,5 @@
-import type { NormalizedConfig } from '@modern-js/core';
-declare const getTailwindConfig: (config: NormalizedConfig, option?: {
+import type { AppLegacyNormalizedConfig } from '@modern-js/app-tools';
+declare const getTailwindConfig: (config: AppLegacyNormalizedConfig, option?: {
   pureConfig?: Record<string, any>;
 }) => any;
 export { getTailwindConfig };

package/dist/types/types.d.ts

@@ -0,0 +1,10 @@
+export declare type LegacyUserConfig = {
+  designSystem?: Record<string, any> & {
+    supportStyledComponents?: boolean;
+  };
+  source?: {
+    designSystem?: Record<string, any> & {
+      supportStyledComponents?: boolean;
+    };
+  };
+};

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -44,14 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@modern-js/utils": "2.0.0-beta.0",
-    "hoist-non-react-statics": "^3.3.2"
+    "hoist-non-react-statics": "^3.3.2",
+    "@modern-js/utils": "2.0.0-beta.2"
   },
   "devDependencies": {
-    "@modern-js/core": "2.0.0-beta.0",
-    "@modern-js/runtime": "2.0.0-beta.0",
-    "@modern-js/types": "2.0.0-beta.0",
-    "@scripts/build": "2.0.0-beta.0",
     "@types/jest": "^27",
     "@types/node": "^14",
     "@types/tailwindcss": "^2.2.1",
@@ -60,11 +56,16 @@
     "jest": "^27",
     "react": "^18",
     "postcss": "^8.4.14",
-    "@scripts/jest-config": "2.0.0-beta.0"
+    "@modern-js/core": "2.0.0-beta.2",
+    "@modern-js/runtime": "2.0.0-beta.2",
+    "@modern-js/types": "2.0.0-beta.2",
+    "@scripts/build": "2.0.0-beta.2",
+    "@modern-js/app-tools": "2.0.0-beta.2",
+    "@scripts/jest-config": "2.0.0-beta.2"
   },
   "peerDependencies": {
     "tailwindcss": "^2.0.4",
-    "@modern-js/runtime": "^2.0.0-beta.0"
+    "@modern-js/runtime": "^2.0.0-beta.2"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {
@@ -77,9 +78,9 @@
     "access": "public"
   },
   "scripts": {
-    "new": "modern new",
-    "dev": "modern build --watch",
-    "build": "modern build",
+    "new": "modern-lib new",
+    "dev": "modern-lib build --watch",
+    "build": "modern-lib build",
     "test": "jest --passWithNoTests"
   }
 }