@modern-js/plugin-tailwindcss 1.2.11 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @modern-js/plugin-tailwindcss
 
+## 1.3.0
+
+### Minor Changes
+
+- 8d0eb81f5: support twin.macro
+
 ## 1.2.11
 
 ### Patch Changes

package/dist/js/node/cli.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getRandomTwConfigFileName = exports.default = void 0;
 
 var _utils = require("@modern-js/utils");
 
@@ -11,52 +11,127 @@ var _cli = _interopRequireDefault(require("@modern-js/plugin-design-token/cli"))
 
 var _tailwind = require("./tailwind");
 
+var _utils2 = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const supportCssInJsLibrary = 'styled-components';
+
+const getRandomTwConfigFileName = internalDirectory => {
+  return `${internalDirectory}/tailwind.config.${Date.now()}.${(0, _utils.nanoid)()}.js`;
+};
+
+exports.getRandomTwConfigFileName = getRandomTwConfigFileName;
+
 var _default = () => ({
   name: '@modern-js/plugin-tailwindcss',
   // support designSystem.supportStyledComponents
   usePlugins: [(0, _cli.default)()],
-  setup: api => ({
-    validateSchema() {
-      return _utils.PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
-    },
-
-    config() {
-      return {
-        tools: {
-          // TODO: Add interface about postcss config
-          // TODO: In module project, also is called, but should not be called.
-          postcss: config => {
-            const modernConfig = api.useResolvedConfigContext();
-            const tailwindConfig = (0, _tailwind.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']
+  setup: async api => {
+    const {
+      appDirectory,
+      internalDirectory
+    } = api.useAppContext();
+    let internalTwConfigPath = ''; // When reinstalling dependencies, most of the time the project will be restarted
+
+    const notHaveTwinMacro = await (0, _utils2.checkTwinMacroNotExist)(appDirectory);
+    return {
+      prepare() {
+        if (notHaveTwinMacro) {
+          return;
+        }
+
+        internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
+
+        const files = _utils.globby.sync(`${appDirectory}/${_utils.CONFIG_CACHE_DIR}/*.cjs`, {
+          absolute: true
+        });
+
+        if (files.length > 0) {
+          _utils.fs.writeFileSync(internalTwConfigPath, (0, _utils2.template)(files[0]), 'utf-8');
+        }
+      },
+
+      validateSchema() {
+        return _utils.PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
+      },
+
+      config() {
+        return {
+          tools: {
+            // TODO: Add interface about postcss config
+            // TODO: In module project, also is called, but should not be called.
+            postcss: config => {
+              const modernConfig = api.useResolvedConfigContext();
+              const tailwindConfig = (0, _tailwind.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' && pluginTarget.includes('compiled/babel-plugin-macros')) {
+                    if (pluginOptions) {
+                      pluginOptions = _objectSpread(_objectSpread({}, pluginOptions), twinConfig);
+                    } else {
+                      plugin.push(twinConfig);
+                    }
 
-            if (Array.isArray(config.postcssOptions.plugins)) {
-              config.postcssOptions.plugins.push(require('tailwindcss')(tailwindConfig));
-            } else {
-              config.postcssOptions.plugins = [require('tailwindcss')(tailwindConfig)];
+                    return true;
+                  }
+                }
+
+                return false;
+              });
             }
+
           }
-        }
-      };
-    },
-
-    moduleTailwindConfig() {
-      const modernConfig = api.useResolvedConfigContext();
-      const tailwindConfig = (0, _tailwind.getTailwindConfig)(modernConfig, {
-        pureConfig: {
-          content: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx', './src/**/*.less', './src/**/*.css', './src/**/*.sass', './src/**/*.scss', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
-        }
-      });
-      return require('tailwindcss')(tailwindConfig);
-    }
+        };
+      },
+
+      moduleTailwindConfig() {
+        const modernConfig = api.useResolvedConfigContext();
+        const tailwindConfig = (0, _tailwind.getTailwindConfig)(modernConfig, {
+          pureConfig: {
+            content: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx', './src/**/*.less', './src/**/*.css', './src/**/*.sass', './src/**/*.scss', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
+          }
+        });
+        return require('tailwindcss')(tailwindConfig);
+      }
 
-  })
+    };
+  }
 });
 
 exports.default = _default;

package/dist/js/node/utils.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.template = exports.checkTwinMacroNotExist = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("@modern-js/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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,
+};
+`;
+
+exports.template = template;
+
+const checkTwinMacroNotExist = async appDirectory => {
+  const depName = 'twin.macro';
+  const packageJson = (await _utils.fs.readJSON(_path.default.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;
+};
+
+exports.checkTwinMacroNotExist = checkTwinMacroNotExist;

package/dist/types/cli.d.ts

@@ -1,4 +1,5 @@
 import type { CliPlugin } from '@modern-js/core';
+export declare const getRandomTwConfigFileName: (internalDirectory: string) => string;
 
 declare const _default: () => CliPlugin;
 

package/dist/types/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const template: (configPath: string) => string;
+export declare const checkTwinMacroNotExist: (appDirectory: string) => Promise<boolean>;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.2.11",
+  "version": "1.3.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -33,11 +33,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@modern-js/utils": "^1.7.6",
-    "@modern-js/plugin-design-token": "^1.0.10"
+    "@modern-js/utils": "^1.7.8",
+    "@modern-js/plugin-design-token": "^1.0.11"
   },
   "devDependencies": {
-    "@modern-js/core": "1.11.2",
+    "@modern-js/core": "1.12.1",
     "@scripts/build": "0.0.0",
     "@types/jest": "^27",
     "@types/node": "^14",
@@ -45,6 +45,7 @@
     "typescript": "^4",
     "tailwindcss": "^2.0.4",
     "jest": "^27",
+    "postcss": "^8.4.14",
     "@scripts/jest-config": "0.0.0"
   },
   "peerDependencies": {