@cloudbase/lowcode-builder 1.8.44 → 1.8.45-beta.1

package/lib/builder/mp/index.js

@@ -387,9 +387,12 @@ async function generatePkg(ctx, weapp, appRoot, pageConfigs) {
                     subWxss: rootPath && !((_l = ctx.mainAppData) === null || _l === void 0 ? void 0 : _l.mpPkgUrl)
                         ? `@import "${path_1.default.posix.relative(`/${rootPath}/pages/${page.id}`, '/lowcode')}/style.wxss";`
                         : '',
-                    content: (0, weapps_core_1.toCssText)((0, cals_1.processCommonStyle2CSSProperties)(page.commonStyle, {
-                        defaultUnit: processCssUnit,
-                    }), 'page'),
+                    content: [
+                        (0, weapps_core_1.toCssText)((0, cals_1.processCommonStyle2CSSProperties)(page.commonStyle, {
+                            defaultUnit: processCssUnit,
+                        }), 'page'),
+                        (0, util_2.generateScopedStyleText)(componentInstances),
+                    ].join('\n'),
                     pageWxss: importor.styles.length ? `@import "../../lowcode/${page.id}/style.wxss"` : '',
                 },
             };

package/lib/builder/mp/util.d.ts

@@ -41,3 +41,4 @@ export declare function findComponentInfo(xComponent: {
     materialLibs: any;
     miniprogramPlugins: any;
 }): any;
+export declare function generateScopedStyleText(widgets: Record<string, IWeAppComponentInstance>): string;

package/lib/builder/mp/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findComponentInfo = exports.processRepeaterSchema = exports.createDataBinds = exports.createTemplateEventFlows = exports.createTemplateQuery = exports.generateDataContainerListeners = exports.generateSyncListeners = exports.createEventHandlers = exports.createWidgetProps = exports.generatedDynamicData = void 0;
+exports.generateScopedStyleText = exports.findComponentInfo = exports.processRepeaterSchema = exports.createDataBinds = exports.createTemplateEventFlows = exports.createTemplateQuery = exports.generateDataContainerListeners = exports.generateSyncListeners = exports.createEventHandlers = exports.createWidgetProps = exports.generatedDynamicData = void 0;
 const weapps_core_1 = require("@cloudbase/lowcode-generator/lib/weapps-core");
 const lowcode_generator_1 = require("@cloudbase/lowcode-generator");
 const weapp_1 = require("@cloudbase/lowcode-generator/lib/generator/util/weapp");
@@ -481,3 +481,36 @@ function findComponentInfo(xComponent, { materialLibs, miniprogramPlugins }) {
     return compProto;
 }
 exports.findComponentInfo = findComponentInfo;
+function generateScopedStyleText(widgets) {
+    const cssTextList = [];
+    function traverse(target) {
+        var _a;
+        for (const [id, widget] of Object.entries(target)) {
+            const scopedStyle = (_a = widget.xProps) === null || _a === void 0 ? void 0 : _a.scopedStyle;
+            if (scopedStyle) {
+                let cssText = scopedStyle
+                    // 移除 `/* ... */` 注释
+                    .replace(/\/\*(?:[\s\S]*?)\*\//g, '')
+                    // 移除换行及其前后的空白符
+                    .replace(/\s*\n\s*/g, '')
+                    // 添加 `#wd-page-root` 前缀以增加样式权重
+                    .replace(/(:root.*?{)/g, '\n#wd-page-root $1')
+                    // 替换 `:root`
+                    .replace(/:root/g, `.wd-comp-id-${id}`)
+                    // `: ` => `:`
+                    .replace(/\s*:\s*/g, ':')
+                    // ` {` => `{`
+                    .replace(/\s*{\s*/g, '{')
+                    // `;}` => `}`
+                    .replace(/;\s*}/g, '}');
+                cssTextList.push(cssText.trim());
+            }
+            if (widget.properties) {
+                traverse(widget.properties);
+            }
+        }
+    }
+    traverse(widgets);
+    return cssTextList.join('\n');
+}
+exports.generateScopedStyleText = generateScopedStyleText;