feat: [arco-scripts] build style allow prepend additional data by config

arco-design · Mar 31, 2022 · 276bdaf · 276bdaf
1 parent 61be727
commit 276bdaf
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 2 deletions.
diff --git a/packages/arco-scripts/src/config/style.config.ts b/packages/arco-scripts/src/config/style.config.ts
@@ -22,6 +22,24 @@ const autoprefix = new LessAutoprefix();
 const FILE_ASSET_EXT = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ttf', 'eot', 'woff', 'woff2'];
 const FILE_WATCHED_EXT = FILE_ASSET_EXT.concat(['less', 'css']);
 
+type AdditionalDataOption = {
+  /**
+   * Content added
+   * @zh 新增的数据
+   */
+  data: string;
+  /**
+   * Whether to insert content at the end
+   * @zh 是否在文件末尾插入内容，默认为文件首插入
+   */
+  append?: boolean;
+  /**
+   * Whether to use `data` to overwrite the original file content
+   * @zh 是否使用 `data` 覆盖原文件内容
+   */
+  overwrite?: boolean;
+};
+
 export interface StyleConfig {
   /**
    * Config for building CSS
@@ -99,6 +117,16 @@ export interface StyleConfig {
      * @zh 样式编译器的配置选项
      */
     compilerOptions: Record<string, any>;
+    /**
+     * Prepends/Appends Less code to the actual entry file.
+     * @zh 在 Less 文件编译前修改其内容（不修改源码）
+     */
+    additionalData?:
+      | AdditionalDataOption
+      | ((file: {
+          path: string;
+          contents: string;
+        }) => AdditionalDataOption | Promise<AdditionalDataOption>);
   };
   /**
    * Config of asset

diff --git a/packages/arco-scripts/src/scripts/build/component/compileStyle.ts b/packages/arco-scripts/src/scripts/build/component/compileStyle.ts
@@ -10,6 +10,7 @@ import cleanCSS from 'gulp-clean-css';
 import mergeStream from 'merge-stream';
 import { print } from 'arco-cli-dev-utils';
 
+import through from 'through2';
 import handleStyleJSEntry from './handleStyleJSEntry';
 import styleConfig from '../../../config/style.config';
 import { BUILD_ENV_MODE } from '../../../constant';
@@ -97,6 +98,37 @@ function compileLess() {
   if (destDirs.length) {
     let stream = gulp
       .src(cssConfig.entry, { allowEmpty: true })
+      .pipe(
+        gulpIf(
+          !!cssConfig.additionalData,
+          through.obj(async (file: { path: string; contents: Buffer }, _, cb) => {
+            try {
+              const originalContents = file.contents.toString();
+              const { data, append, overwrite } =
+                typeof cssConfig.additionalData === 'function'
+                  ? await cssConfig.additionalData({
+                      path: file.path,
+                      contents: originalContents,
+                    })
+                  : cssConfig.additionalData;
+              file.contents = Buffer.from(
+                overwrite
+                  ? data
+                  : append
+                  ? `${originalContents}\n${data}`
+                  : `${data}\n${originalContents}`
+              );
+            } catch (error) {
+              print.error(
+                '[arco-scripts]',
+                `Failed to append/prepend additional data to ${file.path}`
+              );
+            }
+
+            cb(null, file);
+          })
+        )
+      )
       .pipe(cssConfig.compiler(cssConfig.compilerOptions))
       .pipe(cleanCSS());
 

diff --git a/packages/arco-scripts/src/scripts/build/component/compileTS.ts b/packages/arco-scripts/src/scripts/build/component/compileTS.ts
@@ -106,7 +106,7 @@ async function withBabel({ type, outDir, watch }: CompileOptions) {
           ({ path }) => {
             return !path.endsWith('.d.ts') && /\.(t|j)sx?$/.test(path);
           },
-          through.obj((file, _, cb) => {
+          through.obj((file: { path: string; contents: Buffer }, _, cb) => {
             try {
               file.contents = Buffer.from(transform(file));
               // .jsx -> .js

diff --git a/packages/arco-scripts/src/scripts/build/component/handleStyleJSEntry.ts b/packages/arco-scripts/src/scripts/build/component/handleStyleJSEntry.ts
@@ -166,7 +166,7 @@ function injectArcoDepStyle(componentEsDirPattern: string) {
         base: componentEsDirPattern,
       })
       .pipe(
-        through.obj(async (file, _, cb) => {
+        through.obj(async (file: { path: string; contents: Buffer }, _, cb) => {
           try {
             await Promise.all([
               transformStyleEntryContent({