feat(rn-style-transformer): 新增样式变量编译插件 (#16035)

Co-authored-by: liyixin5 <[email protected]>
NervJS · Jul 3, 2024 · 1b4f85a · 1b4f85a
1 parent d328921
commit 1b4f85a
Show file tree

Hide file tree

Showing 4 changed files with 19,853 additions and 13,553 deletions.
diff --git a/packages/taro-rn-style-transformer/README.md b/packages/taro-rn-style-transformer/README.md
@@ -6,7 +6,7 @@
 
 `object`
 
- `postcss` 相关配置，其他样式语言预处理后经过此配置。
+`postcss` 相关配置，其他样式语言预处理后经过此配置。
 
 ```js
 module.exports = {
@@ -15,39 +15,52 @@ module.exports = {
     // ...
     postcss: {
       // postcss 配置，参考 https://github.com/postcss/postcss#options
-      options: { /* ... */ },
+      options: {
+        /* ... */
+      },
       // 默认true，控制是否对 css value 进行 scalePx2dp 转换，pxtransform配置 enable 才生效
       scalable: boolean,
       pxtransform: {
         enable: boolean, // 默认true
-        config: { /* ... */ } // 插件 pxtransform 配置项，参考尺寸章节
+        config: {
+          /* ... */
+        }, // 插件 pxtransform 配置项，参考尺寸章节
       },
       // 跟其他端 css module 配置保持统一
       cssModules: {
         enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
-      }
+      },
+      // postcss-css-variables 配置，样式变量编译相关
+      'postcss-css-variables': {
+        enable: boolean, // 默认 true
+        config: {
+          /* ... */
+        }, // 插件 postcss-css-variables 配置项，参考 https://github.com/MadLittleMods/postcss-css-variables?tab=readme-ov-file#options
+      },
     },
-  }
+  },
 }
 ```
 
 ### rn.sass
 
 `object`
 
- `sass` 相关配置。`options` 配置项参考[官方文档](https://github.com/sass/node-sass#options)。
+`sass` 相关配置。`options` 配置项参考[官方文档](https://github.com/sass/node-sass#options)。
 
 ```js
 module.exports = {
   // ...
   rn: {
     // ...
     sass: {
-      options: { /* ... */ },
-    	// 加入到脚本注入的每个 sass 文件头部，在 config.sass 之前
+      options: {
+        /* ... */
+      },
+      // 加入到脚本注入的每个 sass 文件头部，在 config.sass 之前
       additionalData: '', // {String|Function}
-    }
-  }
+    },
+  },
 }
 ```
 
@@ -63,18 +76,20 @@ module.exports = {
   rn: {
     // ...
     less: {
-      options: { /* ... */ },
+      options: {
+        /* ... */
+      },
       additionalData: '', // {String|Function}
-    }
-  }
+    },
+  },
 }
 ```
 
 ### rn.stylus
 
 `object`
 
- `stylus` 相关配置。`options` 配置项如下。
+`stylus` 相关配置。`options` 配置项如下。
 
 ```js
 module.exports = {
@@ -89,23 +104,23 @@ module.exports = {
          * @type {(string|Function)[]}
          * @default []
          */
-        use: ["nib"],
+        use: ['nib'],
 
         /**
          * Add path(s) to the import lookup paths.
          *
          * @type {string[]}
          * @default []
          */
-        include: [path.join(__dirname, "src/styl/config")],
+        include: [path.join(__dirname, 'src/styl/config')],
 
         /**
          * Import the specified Stylus files/paths.
          *
          * @type {string[]}
          * @default []
          */
-        import: ["nib", path.join(__dirname, "src/styl/mixins")],
+        import: ['nib', path.join(__dirname, 'src/styl/mixins')],
 
         /**
          * Define Stylus variables or functions.
@@ -115,8 +130,8 @@ module.exports = {
          */
         // Array is the recommended syntax: [key, value, raw]
         define: [
-          ["$development", process.env.NODE_ENV === "development"],
-          ["rawVar", 42, true],
+          ['$development', process.env.NODE_ENV === 'development'],
+          ['rawVar', 42, true],
         ],
         // Object is deprecated syntax (there is no possibility to specify "raw')
         // define: {
@@ -153,7 +168,7 @@ module.exports = {
         hoistAtrules: true,
       },
       additionalData: '', // {String|Function}
-    }
-  }
+    },
+  },
 }
 ```
diff --git a/packages/taro-rn-style-transformer/package.json b/packages/taro-rn-style-transformer/package.json
@@ -34,6 +34,7 @@
     "@tarojs/helper": "workspace:*",
     "fbjs": "^3.0.5",
     "less": "^4.2.0",
+    "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-pxtransform": "workspace:*",
     "postcss-reporter": "^7.1.0",

diff --git a/packages/taro-rn-style-transformer/src/transforms/postcss.ts b/packages/taro-rn-style-transformer/src/transforms/postcss.ts
@@ -3,6 +3,7 @@ import * as path from 'node:path'
 import { isNpmPkg, printLog, processTypeEnum, recursiveMerge, resolveSync } from '@tarojs/helper'
 import postcss from 'postcss'
 import postcssImport from 'postcss-import'
+import postcssCssVariables from 'postcss-css-variables'
 import pxtransform from 'postcss-pxtransform'
 import stylelint from 'stylelint'
 
@@ -19,6 +20,13 @@ const defaultPxtransformOption: {
   }
 }
 
+const defaultPostcssCssVariablesOption: {
+  [key: string]: any
+} = {
+  enable: true,
+  config: {}
+}
+
 export function makePostcssPlugins ({
   filename,
   designWidth,
@@ -27,7 +35,7 @@ export function makePostcssPlugins ({
   transformOptions,
   additionalData
 }) {
-  const optionsWithDefaults = ['pxtransform', 'postcss-import', 'postcss-reporter', 'stylelint', 'cssModules']
+  const optionsWithDefaults = ['pxtransform', 'postcss-import', 'postcss-reporter', 'stylelint', 'cssModules', 'postcss-css-variables']
 
   if (designWidth) {
     defaultPxtransformOption.config.designWidth = designWidth
@@ -37,6 +45,7 @@ export function makePostcssPlugins ({
     defaultPxtransformOption.config.deviceRatio = deviceRatio
   }
   const pxtransformOption = recursiveMerge({}, defaultPxtransformOption, postcssConfig.pxtransform)
+  const postcssCssVariablesOption = recursiveMerge({}, defaultPostcssCssVariablesOption, postcssConfig['postcss-css-variables'])
 
   const plugins = [
     postcssImport({
@@ -60,6 +69,10 @@ export function makePostcssPlugins ({
     plugins.push(pxtransform(pxtransformOption.config))
   }
 
+  if (postcssCssVariablesOption.enable) {
+    plugins.push(postcssCssVariables(postcssCssVariablesOption.config))
+  }
+
   const skipRows = additionalData ? additionalData.split('\n').length : 0
 
   plugins.push(