@modern-js/plugin-tailwindcss 1.2.9 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @modern-js/plugin-tailwindcss
 
+## 1.3.0
+
+### Minor Changes
+
+- 8d0eb81f5: support twin.macro
+
+## 1.2.11
+
+### Patch Changes
+
+- a1198d509: feat: bump babel 7.18.0
+- Updated dependencies [a1198d509]
+  - @modern-js/plugin-design-token@1.0.10
+
+## 1.2.10
+
+### Patch Changes
+
+- d32f35134: chore: add modern/jest/eslint/ts config files to .npmignore
+- Updated dependencies [d32f35134]
+- Updated dependencies [6ae4a34ae]
+- Updated dependencies [b80229c79]
+- Updated dependencies [16ca3151b]
+- Updated dependencies [948cc4436]
+  - @modern-js/plugin-design-token@1.0.7
+  - @modern-js/utils@1.7.3
+
 ## 1.2.9
 
 ### 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.9",
+  "version": "1.3.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -32,19 +32,20 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7",
-    "@modern-js/utils": "^1.7.2",
-    "@modern-js/plugin-design-token": "^1.0.6"
+    "@babel/runtime": "^7.18.0",
+    "@modern-js/utils": "^1.7.8",
+    "@modern-js/plugin-design-token": "^1.0.11"
   },
   "devDependencies": {
-    "@modern-js/core": "1.10.1",
+    "@modern-js/core": "1.12.1",
     "@scripts/build": "0.0.0",
-    "@types/jest": "^26",
+    "@types/jest": "^27",
     "@types/node": "^14",
     "@types/tailwindcss": "^2.2.1",
     "typescript": "^4",
     "tailwindcss": "^2.0.4",
     "jest": "^27",
+    "postcss": "^8.4.14",
     "@scripts/jest-config": "0.0.0"
   },
   "peerDependencies": {
@@ -55,11 +56,34 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "wireit": {
+    "build": {
+      "command": "modern build",
+      "files": [
+        "src/**/*",
+        "tsconfig.json",
+        "package.json"
+      ],
+      "output": [
+        "dist/**/*"
+      ]
+    },
+    "test": {
+      "command": "jest --passWithNoTests",
+      "files": [
+        "src/**/*",
+        "tsconfig.json",
+        "package.json",
+        "tests/**/*"
+      ],
+      "output": []
+    }
+  },
   "scripts": {
     "new": "modern new",
     "dev": "modern build --watch",
-    "build": "modern build",
-    "test": "jest --passWithNoTests"
+    "build": "wireit",
+    "test": "wireit"
   },
   "readme": "\n<p align=\"center\">\n  <a href=\"https://modernjs.dev\" target=\"blank\"><img src=\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png\" width=\"300\" alt=\"Modern.js Logo\" /></a>\n</p>\n<p align=\"center\">\n现代 Web 工程体系\n  <br/>\n  <a href=\"https://modernjs.dev\" target=\"blank\">\n    modernjs.dev\n  </a>\n</p>\n<p align=\"center\">\n  The meta-framework suite designed from scratch for frontend-focused modern web development\n</p>\n\n# Introduction\n\n> The doc site ([modernjs.dev](https://modernjs.dev)) and articles are only available in Chinese for now, we are planning to add English versions soon.\n\n- [Modern.js: Hello, World!](https://zhuanlan.zhihu.com/p/426707646)\n\n## Getting Started\n\n- [Quick Start](https://modernjs.dev/docs/start)\n- [Guides](https://modernjs.dev/docs/guides)\n- [API References](https://modernjs.dev/docs/apis)\n\n## Contributing\n\n- [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md)\n"
 }

package/.eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['@modern-js'],
-  parserOptions: {
-    // the base path used to search for `tsconfig.json`
-    tsconfigRootDir: __dirname,
-    // the relative path to sub-package's `tsconfig.json`
-    project: ['./tsconfig.json'],
-  },
-};

package/jest.config.js

@@ -1,7 +0,0 @@
-const sharedConfig = require('@scripts/jest-config');
-
-/** @type {import('@jest/types').Config.InitialOptions} */
-module.exports = {
-  ...sharedConfig,
-  rootDir: __dirname,
-};

package/modern.config.js

@@ -1,8 +0,0 @@
-/** @type {import('@modern-js/module-tools').UserConfig} */
-module.exports = {
-  output: {
-    packageFields: {
-      main: 'CJS+ES6',
-    },
-  },
-};

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "@modern-js/tsconfig/base",
-  "compilerOptions": {
-    "declaration": false,
-    "jsx": "preserve",
-    "baseUrl": "./",
-    "isolatedModules": true,
-    "paths": {}
-  },
-  "include": ["src"]
-}