feat(vue-next): fix beforeLoadStyle not work

Tencent · Aug 26, 2024 · 611006c · 611006c
1 parent 2bbdfab
commit 611006c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/examples/hippy-vue-next-demo/src/main-native.ts b/examples/hippy-vue-next-demo/src/main-native.ts
@@ -47,6 +47,25 @@ const app: HippyApp = createApp(App, {
    * default is true, if set false, it will follow vue-loader compilerOptions whitespace setting
    */
   trimWhitespace: true,
+  styleOptions: {
+    beforeLoadStyle: (decl) => {
+      let { value } = decl;
+      // 比如可以对 rem 单位进行处理
+      if (typeof value === 'string' && /rem$/.test(value)) {
+        // get the numeric value of rem
+
+        const { screen } = Native.Dimensions;
+        // 比如可以对 rem 单位进行处理
+        if (typeof value === 'string' && /rem$/.test(value)) {
+          const { width, height } = screen;
+          // 防止hippy 旋转后，宽度发生变化
+          const realWidth = width > height ? width : height;
+          value = Number(parseFloat(`${(realWidth * 100 * Number(value.replace('rem', ''))) / 844}`).toFixed(2));
+        }
+      }
+      return { ...decl, value };
+    },
+  },
 });
 // create router
 const router = createRouter();

diff --git a/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts b/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
@@ -220,7 +220,7 @@ export function getCssMap(
      *  Here is a secret startup option: beforeStyleLoadHook.
      *  Usage for process the styles while styles loading.
      */
-    const cssRules = fromAstNodes(styleCssMap);
+    const cssRules = fromAstNodes(styleCssMap, beforeLoadStyle);
     if (globalCssMap) {
       globalCssMap.append(cssRules);
     } else {