feat(rn-css-variables): 新增 RN 端编译 css 变量逻辑，新增 RN 暗黑模式编译命令 (#2425)

package.json

@@ -68,6 +68,7 @@
     "dev:taro:jdharmony": "pnpm --dir ./packages/nutui-taro-demo dev:jdharmony",
     "rn:copy": "node ./scripts/rn/copy-file.js",
     "dev:taro:rn": "pnpm --dir ./packages/nutui-taro-demo-rn dev:jdrn & pnpm run gulp:watch",
+    "dev:taro:rn:dark": "THEME=dark pnpm dev:taro:rn",
     "gulp:watch": "gulp watch --environment",
     "dev:taro:weapp:jmapp": "pnpm --dir ./packages/nutui-taro-demo && npm run dev:weapp:jmapp",
     "test": "vitest --coverage",

packages/nutui-taro-demo-rn/config/index.js

@@ -8,6 +8,16 @@ if (projectID) {
   fileStr = `src/styles/variables-${projectID}.scss`
   themeStr = `src/styles/theme-${projectID}.scss`
 }
+const sassResource = [
+  path.resolve(__dirname, '../../../', fileStr),
+  path.resolve(__dirname, '../../../', themeStr),
+]
+const theme = process.env.THEME
+if (theme) {
+  sassResource.push(
+    path.resolve(__dirname, '../../../', `src/styles/theme-${theme}.scss`)
+  )
+}
 
 const config = {
   projectName: 'first',
@@ -52,10 +62,7 @@ const config = {
     '@styles': path.resolve(__dirname, '../styles'),
   },
   sass: {
-    resource: [
-      path.resolve(__dirname, '../../../', fileStr),
-      path.resolve(__dirname, '../../../', themeStr),
-    ],
+    resource: sassResource,
   },
   defineConstants: {},
   copy: {
@@ -152,13 +159,25 @@ const config = {
   },
   rn: {
     appName: 'JDReactAPIDemos',
+    postcss: {
+      'postcss-css-variables': {
+        enable: true,
+        config: {
+          // variables: {
+          //   '--nutui-color-primary': '#000',
+          //   '--nutui-color-primary-stop-1': '#000',
+          //   '--nutui-color-primary-stop-2': '#000',
+          // },
+        },
+      },
+    },
   },
   isWatch: true,
 }
 
 module.exports = function (merge) {
   if (process.env.NODE_ENV === 'development') {
-    return merge({}, config, require('./dev'))
+    return Object.assign({}, config, require('./dev'))
   }
-  return merge({}, config, require('./prod'))
+  return Object.assign({}, config, require('./prod'))
 }

scripts/rn/copy-file.js

@@ -65,7 +65,7 @@ const copyFile = async (from, to, success, isSingle = false) => {
         if (!['icon'].includes(item)) {
           modify(
             `${targetBaseUrl}/packages/${item}/${item}.taro.tsx`,
-            `import "./${item}.harmony.css";\n`
+            `import "./${item}.scss";\n`
           )
         }
       }