fix(vue-next): fix beforeLoadStyle not work

Author: zealotchen0

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();

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 {