@tuya-sat/micro-dev-loader 2.2.13 → 2.2.14

package/dist/plugins/theme/filterPlugin.d.ts

@@ -1,6 +1,6 @@
 import { Declaration } from "postcss";
-export declare const filterPlugin: {
-    (opts?: {}): {
+export declare const getFilterPlugin: (storeHtmlVarible?: any[]) => {
+    (): {
         postcssPlugin: string;
         Rule(rule: any): void;
         Declaration(decl: Declaration): void;

package/dist/plugins/theme/filterPlugin.js

@@ -2,22 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const filterPlugin = (opts = {}) => {
-    return {
-        postcssPlugin: "filter",
-        Rule(rule) {
-            if (!rule.nodes.length) {
-                rule.remove();
-            }
-        },
-        Declaration(decl) {
-            //@ts-ignore
-            if (decl.variable && decl.parent.selector === "html") {
-                decl.remove();
-            }
-        },
-    };
-};
-filterPlugin.postcss = true;
+const getFilterPlugin = (storeHtmlVarible = []) => {
+    function plugin() {
+        return {
+            postcssPlugin: "filter",
+            Rule(rule) {
+                if (!rule.nodes.length) {
+                    rule.remove();
+                }
+            },
+            Declaration(decl) {
+                //@ts-ignore
+                if (decl.variable && decl.parent.selector === "html") {
+                    const declStr = decl.toString();
+                    !storeHtmlVarible.includes(declStr) && storeHtmlVarible.push(declStr);
+                    decl.remove();
+                }
+            },
+        };
+    }
+    plugin.postcss = true;
+    return plugin;
+};
 
-exports.filterPlugin = filterPlugin;
+exports.getFilterPlugin = getFilterPlugin;

package/dist/plugins/theme/index.d.ts

@@ -5,6 +5,6 @@ export default class ThemePlugin {
     private lessFiles;
     constructor(stylePath?: string);
     apply(compiler: Compiler): void;
-    runCssbundle(): Promise<string>;
-    filterCssVarible(css: string): string;
+    runCssbundle(): Promise<[string, string[]]>;
+    filterCssVarible(css: string): [string, string[]];
 }

package/dist/plugins/theme/index.js

@@ -47,15 +47,19 @@ class ThemePlugin {
                         this.lessFiles.push(item.nameForCondition());
                     });
                     compilation.updateAsset(pathname, (source) => {
-                        return new RawSource(this.filterCssVarible(source.source().toString()));
+                        return new RawSource(this.filterCssVarible(source.source().toString())[0]);
                     });
-                    const content = yield this.runCssbundle();
+                    const [content, storeHtmlVariable] = yield this.runCssbundle();
                     const { contenthash } = compilation.assetsInfo.get(pathname);
                     const darkCssFileName = `dark.${contenthash}.css`;
                     compilation.emitAsset(`${this.stylePath}/${darkCssFileName}`, new RawSource(content));
                     HtmlWebpackPlugin__default["default"].getHooks(compilation).beforeAssetTagGeneration.tapAsync(this.pluginName, (data, cb) => {
                         HtmlWebpackPlugin__default["default"].getHooks(compilation).beforeEmit.tapAsync(this.pluginName, (data, cb) => {
                             const $ = cheerio__default["default"].load(data.html);
+                            const cssVariableStyleSheet = storeHtmlVariable.reduce((prev, curr) => {
+                                return prev + curr + ";\n";
+                            }, "");
+                            $(`<style id="micro-css-variable">html{${cssVariableStyleSheet}}</style>`).insertBefore($("head").children().first());
                             $("link").map(function () {
                                 const reg = /(?<=\/)light.([\s\S]+?).css$/;
                                 const href = $(this).attr("href");
@@ -96,8 +100,9 @@ class ThemePlugin {
         });
     }
     filterCssVarible(css) {
+        const store = [];
         //@ts-ignore
-        return postcss__default["default"]([filterPlugin.filterPlugin]).process(css).css;
+        return [postcss__default["default"]([filterPlugin.getFilterPlugin(store)]).process(css).css, store];
     }
 }
 function createHandleImportPlugin() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-sat/micro-dev-loader",
-  "version": "2.2.13",
+  "version": "2.2.14",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
@@ -14,7 +14,7 @@
     "@babel/generator": "7.17.7",
     "@babel/plugin-syntax-typescript": "7.16.7",
     "@babel/template": "7.16.7",
-    "@tuya-sat/micro-utils": "2.2.13",
+    "@tuya-sat/micro-utils": "2.2.14",
     "cheerio": "1.0.0-rc.10",
     "ejs": "3.1.6",
     "fs-extra": "10.0.1",