From e4045b49e4c6d4e8f6a7f49f9f1c7b07ff3a5c44 Mon Sep 17 00:00:00 2001
From: zealotchen <zealotchen@tencent.com>
Date: Fri, 23 Aug 2024 17:20:23 +0800
Subject: [PATCH] feat(vue-next): fix beforeLoadStyle not work

---
 .../hippy-vue-next-demo/src/main-native.ts    | 19 +++++++++++++++++++
 .../src/style-match/css-map.ts                |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/examples/hippy-vue-next-demo/src/main-native.ts b/examples/hippy-vue-next-demo/src/main-native.ts
index c5a252d7d96..5e08b03b921 100644
--- 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
index 1d4f0373abc..29e021fa60a 100644
--- 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 {