feat: add support for rem unit transformation across style processing and decoding pipelines

.changeset/rem-unit-transform.md

@@ -0,0 +1,21 @@
+---
+"@lynx-js/web-core": patch
+---
+
+feat(web-core): add support for configurable rem unit transform
+
+- **Description**: Added a new configuration option `transformREM` (also exposed as `transform_rem` on the Rust layer) to the Web Core renderer. When enabled, it recursively converts static `rem` unit values in your styles into dynamic CSS custom properties (`calc(VALUE * var(--rem-unit))`) during template decoding and evaluation. This enables developers to implement responsive font scaling and layout sizing dynamically on the client side simply by modifying the root CSS variable `--rem-unit`.
+
+- **Usage**:
+  You can enable this feature when working with `LynxView` by setting `transformREM` to `true`, or directly as an HTML attribute `transform-rem`:
+
+  ```html
+  <lynx-view url="https://example.com/template.js" transform-rem="true"></lynx-view>
+  ```
+
+  ```javascript
+  const lynxView = document.createElement('lynx-view');
+  lynxView.transformREM = true;
+  ```
+
+  With this enabled, a CSS declaration like `font-size: 1.5rem;` is transparently evaluated as `font-size: calc(1.5 * var(--rem-unit));` by the runtime engine.

packages/web-platform/web-core/binary/client/client.d.ts

@@ -160,17 +160,17 @@ export class StyleSheetResource {
  */
 export function add_inline_style_raw_string_key(dom: HTMLElement, key: string, value?: string | null): void;
 
-export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
-export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
 export function get_font_face_content(buffer: Uint8Array): string;
 
 export function get_style_content(buffer: Uint8Array): string;
 
-export function set_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void;
+export function set_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): void;
 
-export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean): boolean;
+export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): boolean;
 
 export function set_inline_styles_number_key(dom: HTMLElement, key: number, value?: string | null): void;
 
@@ -192,8 +192,8 @@ export interface InitOutput {
     readonly __wbg_set_eventinfo_event_type: (a: number, b: number, c: number) => void;
     readonly __wbg_stylesheetresource_free: (a: number, b: number) => void;
     readonly add_inline_style_raw_string_key: (a: any, b: number, c: number, d: number, e: number) => void;
-    readonly decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
-    readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
+    readonly decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
+    readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
     readonly get_font_face_content: (a: any) => [number, number, number, number];
     readonly get_style_content: (a: any) => [number, number, number, number];
     readonly mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
@@ -231,8 +231,8 @@ export interface InitOutput {
     readonly ruleprelude_new: () => number;
     readonly ruleprelude_push_selector: (a: number, b: number) => void;
     readonly selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number) => [number, number];
-    readonly set_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void;
-    readonly set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: number) => number;
+    readonly set_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number, f: number) => void;
+    readonly set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: number, f: number) => number;
     readonly set_inline_styles_number_key: (a: any, b: number, c: number, d: number) => void;
     readonly stylesheetresource_new: (a: any, b: any) => [number, number, number];
     readonly selector_new: () => number;

packages/web-platform/web-core/binary/client/client_bg.wasm.d.ts

@@ -15,8 +15,8 @@ export const __wbg_set_eventinfo_event_name: (a: number, b: number, c: number) =
 export const __wbg_set_eventinfo_event_type: (a: number, b: number, c: number) => void;
 export const __wbg_stylesheetresource_free: (a: number, b: number) => void;
 export const add_inline_style_raw_string_key: (a: any, b: number, c: number, d: number, e: number) => void;
-export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
-export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
+export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
+export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
 export const get_font_face_content: (a: any) => [number, number, number, number];
 export const get_style_content: (a: any) => [number, number, number, number];
 export const mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
@@ -54,8 +54,8 @@ export const rule_set_prelude: (a: number, b: number) => void;
 export const ruleprelude_new: () => number;
 export const ruleprelude_push_selector: (a: number, b: number) => void;
 export const selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number) => [number, number];
-export const set_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void;
-export const set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: number) => number;
+export const set_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number, f: number) => void;
+export const set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: number, f: number) => number;
 export const set_inline_styles_number_key: (a: any, b: number, c: number, d: number) => void;
 export const stylesheetresource_new: (a: any, b: any) => [number, number, number];
 export const selector_new: () => number;

packages/web-platform/web-core/binary/client_legacy/client.d.ts

@@ -160,17 +160,17 @@ export class StyleSheetResource {
  */
 export function add_inline_style_raw_string_key(dom: HTMLElement, key: string, value?: string | null): void;
 
-export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
-export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
 export function get_font_face_content(buffer: Uint8Array): string;
 
 export function get_style_content(buffer: Uint8Array): string;
 
-export function set_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void;
+export function set_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): void;
 
-export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean): boolean;
+export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): boolean;
 
 export function set_inline_styles_number_key(dom: HTMLElement, key: number, value?: string | null): void;
 
@@ -192,8 +192,8 @@ export interface InitOutput {
     readonly __wbg_set_eventinfo_event_type: (a: number, b: number, c: number) => void;
     readonly __wbg_stylesheetresource_free: (a: number, b: number) => void;
     readonly add_inline_style_raw_string_key: (a: number, b: number, c: number, d: number, e: number) => void;
-    readonly decode_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-    readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+    readonly decode_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
+    readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
     readonly get_font_face_content: (a: number, b: number) => void;
     readonly get_style_content: (a: number, b: number) => void;
     readonly mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
@@ -231,8 +231,8 @@ export interface InitOutput {
     readonly ruleprelude_new: () => number;
     readonly ruleprelude_push_selector: (a: number, b: number) => void;
     readonly selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
-    readonly set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number) => void;
-    readonly set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: number) => number;
+    readonly set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+    readonly set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: number, f: number) => number;
     readonly set_inline_styles_number_key: (a: number, b: number, c: number, d: number) => void;
     readonly stylesheetresource_new: (a: number, b: number, c: number) => void;
     readonly selector_new: () => number;

packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts

@@ -15,8 +15,8 @@ export const __wbg_set_eventinfo_event_name: (a: number, b: number, c: number) =
 export const __wbg_set_eventinfo_event_type: (a: number, b: number, c: number) => void;
 export const __wbg_stylesheetresource_free: (a: number, b: number) => void;
 export const add_inline_style_raw_string_key: (a: number, b: number, c: number, d: number, e: number) => void;
-export const decode_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const decode_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
+export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
 export const get_font_face_content: (a: number, b: number) => void;
 export const get_style_content: (a: number, b: number) => void;
 export const mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
@@ -54,8 +54,8 @@ export const rule_set_prelude: (a: number, b: number) => void;
 export const ruleprelude_new: () => number;
 export const ruleprelude_push_selector: (a: number, b: number) => void;
 export const selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
-export const set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number) => void;
-export const set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: number) => number;
+export const set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+export const set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: number, f: number) => number;
 export const set_inline_styles_number_key: (a: number, b: number, c: number, d: number) => void;
 export const stylesheetresource_new: (a: number, b: number, c: number) => void;
 export const selector_new: () => number;

packages/web-platform/web-core/binary/encode/encode.d.ts

@@ -109,9 +109,9 @@ export class StyleInfoDecoder {
     [Symbol.dispose](): void;
 }
 
-export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
-export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
 export function get_font_face_content(buffer: Uint8Array): string;
 

packages/web-platform/web-core/binary/encode/encode_bg.wasm.d.ts

@@ -6,8 +6,8 @@ export const __wbg_rule_free: (a: number, b: number) => void;
 export const __wbg_ruleprelude_free: (a: number, b: number) => void;
 export const __wbg_selector_free: (a: number, b: number) => void;
 export const __wbg_styleinfodecoder_free: (a: number, b: number) => void;
-export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
-export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
+export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
+export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
 export const get_font_face_content: (a: any) => [number, number, number, number];
 export const get_style_content: (a: any) => [number, number, number, number];
 export const rawstyleinfo_append_import: (a: number, b: number, c: number) => void;

packages/web-platform/web-core/binary/server/server.d.ts

@@ -15,7 +15,7 @@ export class MainThreadServerContext {
     get_parent(child_id: number): number | undefined;
     get_tag(element_id: number): string | undefined;
     insert_before(parent_id: number, child_id: number, ref_id?: number | null): void;
-    constructor(view_attributes: string, enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean);
+    constructor(view_attributes: string, enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean);
     push_style_sheet(resource: StyleSheetResource, entry_name?: string | null): void;
     remove_attribute(element_id: number, key: string): void;
     remove_child(parent_id: number, child_id: number): void;
@@ -130,9 +130,9 @@ export class StyleSheetResource {
     constructor(buffer: Uint8Array, _document: any);
 }
 
-export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function decode_style_info(buffer: Uint8Array, entry_name: string | null | undefined, config_enable_css_selector: boolean, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
-export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean): Uint8Array;
+export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name: string | null | undefined, transform_vw: boolean, transform_vh: boolean, transform_rem: boolean): Uint8Array;
 
 export function get_font_face_content(buffer: Uint8Array): string;
 

packages/web-platform/web-core/binary/server/server_bg.wasm.d.ts

@@ -7,8 +7,8 @@ export const __wbg_rule_free: (a: number, b: number) => void;
 export const __wbg_ruleprelude_free: (a: number, b: number) => void;
 export const __wbg_selector_free: (a: number, b: number) => void;
 export const __wbg_stylesheetresource_free: (a: number, b: number) => void;
-export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
-export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number];
+export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
+export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number];
 export const get_font_face_content: (a: any) => [number, number, number, number];
 export const get_style_content: (a: any) => [number, number, number, number];
 export const init_server_in_shadow_css: (a: number, b: number) => void;
@@ -23,7 +23,7 @@ export const mainthreadservercontext_get_page_css: (a: number) => [number, numbe
 export const mainthreadservercontext_get_parent: (a: number, b: number) => number;
 export const mainthreadservercontext_get_tag: (a: number, b: number) => [number, number];
 export const mainthreadservercontext_insert_before: (a: number, b: number, c: number, d: number) => void;
-export const mainthreadservercontext_new: (a: number, b: number, c: number, d: number, e: number) => number;
+export const mainthreadservercontext_new: (a: number, b: number, c: number, d: number, e: number, f: number) => number;
 export const mainthreadservercontext_push_style_sheet: (a: number, b: number, c: number, d: number) => [number, number];
 export const mainthreadservercontext_remove_attribute: (a: number, b: number, c: number, d: number) => void;
 export const mainthreadservercontext_remove_child: (a: number, b: number, c: number) => void;

packages/web-platform/web-core/css/index.css

@@ -40,6 +40,11 @@ lynx-view::part(page) {
   --vh-unit: inherit;
 }
 
+@property --rem-unit {
+  syntax: "<length>";
+  inherits: true;
+}
+
 @property --rpx-unit {
   syntax: "<length>";
   inherits: true;