From ac3fd3dbce1498f5acee41d0e0bfe9ef1f3f7aa3 Mon Sep 17 00:00:00 2001
From: zealotchen <zealotchen@tencent.com>
Date: Mon, 26 Aug 2024 14:30:37 +0800
Subject: [PATCH] fix(vue-next): fix beforeLoadStyle not work

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

diff --git a/driver/js/examples/hippy-vue-next-demo/src/main-native.ts b/driver/js/examples/hippy-vue-next-demo/src/main-native.ts
index 89e0db5e097..5e22a426ece 100644
--- a/driver/js/examples/hippy-vue-next-demo/src/main-native.ts
+++ b/driver/js/examples/hippy-vue-next-demo/src/main-native.ts
@@ -4,6 +4,7 @@ import {
   EventBus,
   setScreenSize,
   BackAndroid,
+  Native,
 } from '@hippy/vue-next';
 
 import App from './app.vue';
@@ -45,6 +46,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/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
index 1d4f0373abc..29e021fa60a 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
+++ b/driver/js/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 {