@modern-js/plugin-tailwindcss 1.4.2 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @modern-js/plugin-tailwindcss
 
+## 1.15.0
+
+### Patch Changes
+
+- Updated dependencies [8658a78]
+- Updated dependencies [335c97c]
+- Updated dependencies [05d4a4f]
+- Updated dependencies [ad05af9]
+- Updated dependencies [5d53d1c]
+- Updated dependencies [37cd159]
+- Updated dependencies [a04a11b]
+  - @modern-js/utils@1.15.0
+  - @modern-js/runtime@1.15.0
+
+## 1.5.1
+
+### Patch Changes
+
+- 3c874ca16: fix: `@modern-js/plugin-tailwindcss` support `pluginName` params
+
+  fix: `@modern-js/plugin-tailwindcss` 支持 `pluginName` 参数
+
+## 1.5.0
+
+### Minor Changes
+
+- 79e83ef: chore: merge `@modern-js/plugin-design-token` to `@modern-js/plugin-tailwindcss`
+
+  chore: 合并 `@modern-js/plugin-design-token` 到 `@modern-js/plugin-tailwindcss`
+
+- 59c941a: chore(runtime): merge `@modern-js/runtime-core` to `@modern-js/runtime`
+
+  chore(runtime): 合并 `@modern-js/runtime-core` 到 `@modern-js/runtime`
+
+### Patch Changes
+
+- Updated dependencies [79e83ef]
+- Updated dependencies [e0cd14a]
+- Updated dependencies [287ac8b]
+- Updated dependencies [22f4dca]
+- Updated dependencies [59c941a]
+- Updated dependencies [7b9067f]
+  - @modern-js/utils@1.9.0
+  - @modern-js/runtime@1.5.0
+
 ## 1.4.2
 
 ### Patch Changes

package/dist/js/modern/cli.js

@@ -0,0 +1,126 @@
+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";
+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`));
+};
+export 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);
+    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: {
+            // TODO: Add interface about postcss config
+            // 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 (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,
+                  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);
+                    }
+
+                    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

@@ -0,0 +1,131 @@
+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',
+
+  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
+
+      const tailwindcssConfig = {};
+      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
+
+
+      if (designSystem) {
+        delete tailwindcssConfig.theme.supportStyledComponents;
+      }
+
+      return resolveConfig(tailwindcssConfig).theme || {};
+    };
+
+    return {
+      config() {
+        const appContext = api.useAppContext();
+        pluginsExportsUtils = createRuntimeExportsUtils(appContext.internalDirectory, 'plugins');
+        return {
+          source: {
+            alias: {
+              '@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
+            }
+          },
+          tools: {// 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
+      }) {
+        const userConfig = api.useResolvedConfigContext();
+        const {
+          source: {
+            designSystem
+          }
+        } = userConfig;
+
+        if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
+          const designTokens = getDesignTokens(userConfig);
+          imports.push({
+            value: '@modern-js/runtime/plugins',
+            specifiers: [{
+              imported: PLUGIN_IDENTIFIER
+            }],
+            initialize: `
+  const designTokens = ${JSON.stringify(designTokens)};
+            `
+          });
+        }
+
+        return {
+          entrypoint,
+          imports
+        };
+      },
+
+      modifyEntryRuntimePlugins({
+        entrypoint,
+        plugins
+      }) {
+        const {
+          source: {
+            designSystem
+          }
+        } = api.useResolvedConfigContext();
+        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/index.js

@@ -0,0 +1,2 @@
+export { default } from "./runtime";
+export * from "./runtime";

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

@@ -0,0 +1,18 @@
+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/index.js

@@ -0,0 +1,3 @@
+import designTokenPlugin from "./plugin";
+export * from "./plugin";
+export default designTokenPlugin;

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

@@ -0,0 +1,62 @@
+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',
+  setup: () => ({
+    hoc({
+      App
+    }, next) {
+      const DesignTokenAppWrapper = props => {
+        const {
+          token = {},
+          useStyledComponentsThemeProvider = false,
+          useDesignTokenContext = false
+        } = options;
+
+        if (useStyledComponentsThemeProvider && useDesignTokenContext) {
+          const {
+            ThemeProvider
+          } = require('@modern-js/runtime/styled');
+
+          return /*#__PURE__*/_jsx(ThemeProvider, {
+            theme: token,
+            children: /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
+              value: token,
+              children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+            })
+          });
+        } else if (useStyledComponentsThemeProvider) {
+          const {
+            ThemeProvider
+          } = require('@modern-js/runtime/styled');
+
+          return /*#__PURE__*/_jsx(ThemeProvider, {
+            theme: token,
+            children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+          });
+        } else if (useDesignTokenContext) {
+          return /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
+            value: token,
+            children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+          });
+        } else {
+          return /*#__PURE__*/_jsx(App, _objectSpread({}, props));
+        }
+      };
+
+      return next({
+        App: hoistNonReactStatics(DesignTokenAppWrapper, App)
+      });
+    }
+
+  })
+}));

package/dist/js/modern/index.js

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

package/dist/js/modern/tailwind.js

@@ -0,0 +1,43 @@
+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 = {}) => {
+  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 defaultTailwindConfig = {
+    purge: purgeConfig
+  };
+  const tailwindConfig = applyOptionsChain(defaultTailwindConfig, config.tools.tailwindcss || {});
+  const designSystem = getPureDesignSystemConfig(config.source.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
+
+    process.exit(0);
+  } // Because there is no default theme configuration
+
+
+  tailwindConfig.theme = designSystem || {};
+  return tailwindConfig;
+};
+
+export { getTailwindConfig };

package/dist/js/modern/utils.js

@@ -0,0 +1,34 @@
+import path from 'path';
+import { fs } from '@modern-js/utils';
+export const template = configPath => `
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : { default: obj };
+}
+const modernConfig = _interopRequireDefault(require('${configPath}')).default;
+
+const theme =
+    modernConfig && modernConfig.source && modernConfig.source.designSystem
+      ? modernConfig.source.designSystem
+      : {};
+const tailwindcss =
+    modernConfig && modernConfig.tools && modernConfig.tools.tailwindcss
+      ? modernConfig.tools.tailwindcss
+      : {};
+
+module.exports = {
+    theme,
+    ...tailwindcss,
+};
+`;
+export const checkTwinMacroNotExist = async appDirectory => {
+  const depName = 'twin.macro';
+  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;
+};

package/dist/js/node/cli.js

@@ -9,7 +9,7 @@ var _path = _interopRequireDefault(require("path"));
 
 var _utils = require("@modern-js/utils");
 
-var _cli = _interopRequireDefault(require("@modern-js/plugin-design-token/cli"));
+var _cli = _interopRequireDefault(require("./design-token/cli"));
 
 var _tailwind = require("./tailwind");
 
@@ -31,10 +31,16 @@ const getRandomTwConfigFileName = internalDirectory => {
 
 exports.getRandomTwConfigFileName = getRandomTwConfigFileName;
 
-var _default = () => ({
+var _default = ({
+  pluginName
+} = {
+  pluginName: '@modern-js/plugin-tailwindcss'
+}) => ({
   name: '@modern-js/plugin-tailwindcss',
   // support designSystem.supportStyledComponents
-  usePlugins: [(0, _cli.default)()],
+  usePlugins: [(0, _cli.default)({
+    pluginName
+  })],
   setup: async api => {
     const {
       appDirectory,

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

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("@modern-js/utils");
+
+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; }
+
+var _default = ({
+  pluginName
+} = {
+  pluginName: '@modern-js/plugin-tailwindcss'
+}) => ({
+  name: '@modern-js/plugin-design-token',
+
+  setup(api) {
+    let pluginsExportsUtils;
+    const resolveConfig = (0, _utils.lazyImport)('tailwindcss/resolveConfig', require);
+    const PLUGIN_IDENTIFIER = 'designToken';
+
+    const getDesignTokens = userConfig => {
+      const {
+        source: {
+          designSystem
+        }
+      } = userConfig; // TODO: Type to be filled
+
+      const tailwindcssConfig = {};
+      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
+
+
+      if (designSystem) {
+        delete tailwindcssConfig.theme.supportStyledComponents;
+      }
+
+      return resolveConfig(tailwindcssConfig).theme || {};
+    };
+
+    return {
+      config() {
+        const appContext = api.useAppContext();
+        pluginsExportsUtils = (0, _utils.createRuntimeExportsUtils)(appContext.internalDirectory, 'plugins');
+        return {
+          source: {
+            alias: {
+              '@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
+          }
+        };
+      },
+
+      modifyEntryImports({
+        entrypoint,
+        imports
+      }) {
+        const userConfig = api.useResolvedConfigContext();
+        const {
+          source: {
+            designSystem
+          }
+        } = userConfig;
+
+        if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
+          const designTokens = getDesignTokens(userConfig);
+          imports.push({
+            value: '@modern-js/runtime/plugins',
+            specifiers: [{
+              imported: PLUGIN_IDENTIFIER
+            }],
+            initialize: `
+  const designTokens = ${JSON.stringify(designTokens)};
+            `
+          });
+        }
+
+        return {
+          entrypoint,
+          imports
+        };
+      },
+
+      modifyEntryRuntimePlugins({
+        entrypoint,
+        plugins
+      }) {
+        const {
+          source: {
+            designSystem
+          }
+        } = api.useResolvedConfigContext();
+        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 _utils.PLUGIN_SCHEMAS['@modern-js/plugin-design-token'];
+      },
+
+      addRuntimeExports() {
+        pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
+      }
+
+    };
+  }
+
+});
+
+exports.default = _default;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _runtime.default;
+  }
+});
+
+var _runtime = _interopRequireWildcard(require("./runtime"));
+
+Object.keys(_runtime).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _runtime[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _runtime[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }