feat(build): 生成css.js文件

Author: zhaozhiwen

gulpfile.js

@@ -3,6 +3,7 @@ const babel = require('gulp-babel');
 const less = require('gulp-less');
 const autoprefixer = require('gulp-autoprefixer');
 const cssnano = require('gulp-cssnano');
+const through2 = require('through2');
 
 const paths = {
   dest: {
@@ -14,17 +15,45 @@ const paths = {
   scripts: ['components/**/*.{ts,tsx}', '!components/**/demo/*.{ts,tsx}'],
 };
 
+/**
+ * 当前组件样式 import './index.less' => import './index.css'
+ * 依赖的其他组件样式 import '../test-comp/style' => import '../test-comp/style/css.js'
+ * 依赖的其他组件样式 import '../test-comp/style/index.js' => import '../test-comp/style/css.js'
+ * @param {string} content
+ */
+function cssInjection(content) {
+  return content
+    .replace(/\/style\/?'/g, "/style/css'")
+    .replace(/\/style\/?"/g, '/style/css"')
+    .replace(/\.less/g, '.css');
+}
+
 /**
  * 编译脚本文件
- * @param {*} babelEnv babel环境变量
- * @param {*} destDir 目标目录
+ * @param {string} babelEnv babel环境变量
+ * @param {string} destDir 目标目录
  */
 function compileScripts(babelEnv, destDir) {
   const { scripts } = paths;
   process.env.BABEL_ENV = babelEnv;
   return gulp
     .src(scripts)
     .pipe(babel()) // 使用gulp-babel处理
+    .pipe(
+      through2.obj(function z(file, encoding, next) {
+        this.push(file.clone());
+        // 找到目标
+        if (file.path.match(/(\/|\\)style(\/|\\)index\.js/)) {
+          const content = file.contents.toString(encoding);
+          file.contents = Buffer.from(cssInjection(content)); // 处理文件内容
+          file.path = file.path.replace(/index\.js/, 'css.js'); // 文件重命名
+          this.push(file); // 新增该文件
+          next();
+        } else {
+          next();
+        }
+      }),
+    )
     .pipe(gulp.dest(destDir));
 }
 

package.json

@@ -67,6 +67,7 @@
     "react-simple-code-editor": "^0.10.0",
     "react-use": "^13.12.2",
     "rimraf": "^3.0.0",
+    "through2": "^3.0.1",
     "typescript": "^3.7.3"
   },
   "lint-staged": {

yarn.lock

@@ -1555,13 +1555,20 @@
   resolved "https://registry.npm.taobao.org/@types/unist/download/@types/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha1-nAiGeYdvN061mD8VDUeHqm+zLX4=
 
-"@types/vfile-message@*", "@types/vfile-message@^2.0.0":
+"@types/vfile-message@*":
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/@types/vfile-message/download/@types/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
   integrity sha1-aQ5Grw/fwfn6rgDNBJzIiJV5J9U=
   dependencies:
     vfile-message "*"
 
+"@types/vfile-message@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
+  integrity sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==
+  dependencies:
+    vfile-message "*"
+
 "@types/vfile@^3.0.0":
   version "3.0.2"
   resolved "https://registry.npm.taobao.org/@types/vfile/download/@types/vfile-3.0.2.tgz#19c18cd232df11ce6fa6ad80259bc86c366b09b9"
@@ -15904,7 +15911,7 @@ through2@^2.0.0, through2@^2.0.1, through2@^2.0.2, through2@^2.0.3, through2@~2.
 
 through2@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npm.taobao.org/through2/download/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
+  resolved "https://registry.npm.taobao.org/through2/download/through2-3.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrough2%2Fdownload%2Fthrough2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
   integrity sha1-OSducTwzAu3544jdnIEt07glvVo=
   dependencies:
     readable-stream "2 || 3"