feat: add support for transforming vw and vh units into calc() expressions using CSS variables.

.changeset/transform-rpx.md

@@ -0,0 +1,46 @@
+---
+"@lynx-js/web-core": minor
+---
+
+Added support for `rpx` unit
+
+**This is a breaking change**
+
+The following Styles has been added to `web-core`
+
+```css
+lynx-view {
+  width: 100%;
+  container-name: lynx-view;
+  container-type: inline-size;
+  --rpx-unit: 1cqw;
+}
+```
+
+Check MDN for the details about these styles:
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-name
+- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type
+- https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries
+
+### how it works?
+
+For the following code
+
+```html
+<view style="height:1rpx">
+```
+
+it will be transformed to
+
+```html
+<view style="height:calc(1 * var(--rpx-unit))">
+```
+
+Therefore you could use any `<length>` value to replace the unit, for example:
+
+```html
+<lynx-view style="--rpx-unit:1px">
+```
+
+By default, the --rpx-unit value is `1cqw`

.changeset/transform-vw-vh-support.md

@@ -0,0 +1,25 @@
+---
+"@lynx-js/web-core": minor
+---
+
+Added support for transform `vw` and `vh` unit
+
+Add `transform-vw` and `transform-vh` attributes and properties on `<lynx-view>`.
+
+For the following code
+
+```html
+<view style="height:1vw">
+```
+
+If the `transform-vw` is enabled `<lynx-view transform-vw="true">`, it will be transformed to
+
+```html
+<view style="height:calc(1 * var(--vw-unit))">
+```
+
+Therefore you could use any `<length>` value to replace the unit, for example:
+
+```html
+<lynx-view style="--vw-unit:1px">
+```

packages/web-platform/web-core-e2e/shell-project/devMiddleware.ts

@@ -63,6 +63,8 @@ export async function ssrMiddleware(
         {}, // initData
         {}, // globalProps
         {}, // initI18nResources
+        false,
+        false,
         viewAttributes,
       );
 

packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts

@@ -375,6 +375,45 @@ test.describe('reactlynx3 tests', () => {
         'rgb(255, 255, 0)',
       ); // yellow
     });
+    test('basic-rpx-unit', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const lynxView = await page.locator('lynx-view');
+      await lynxView.evaluate((node) => {
+        node.style.width = '50px';
+      });
+      const target = await page.locator('#target');
+      await expect(target).toHaveCSS('height', '10px'); // 20cqw, 50 / 100 * 20 = 10px
+      await expect(target).toHaveCSS('width', '10px');
+    });
+
+    test('basic-vw-vh-unit', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const lynxView = await page.locator('lynx-view');
+      await lynxView.evaluate((node: any) => {
+        node.style.setProperty('--vh-unit', '10px');
+        node.style.setProperty('--vw-unit', '10px');
+        node.transformVW = true;
+        node.transformVH = true;
+        node.reload();
+      });
+      await wait(500); // Wait for the reload to rebuild the CSS properly
+
+      const target = await page.locator('#target');
+      await expect(target).toHaveCSS('width', '500px');
+      await expect(target).toHaveCSS('height', '500px');
+
+      // Now disable switches and assert it breaks out of the container dimension limits
+      await lynxView.evaluate((node: any) => {
+        node.transformVW = false;
+        node.transformVH = false;
+        node.reload();
+      });
+      await wait(500); // Wait for the reload to rebuild the CSS properly
+      await expect(target).not.toHaveCSS('width', '25px');
+      await expect(target).not.toHaveCSS('height', '50px');
+    });
     test('basic-image', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(100);

packages/web-platform/web-core-e2e/tests/reactlynx/basic-rpx-unit/index.jsx

@@ -0,0 +1,19 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+function App() {
+  return (
+    <view
+      id='target'
+      style={{
+        height: '20rpx',
+        width: '20rpx',
+        background: 'pink',
+      }}
+    />
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-core-e2e/tests/reactlynx/basic-vw-vh-unit/index.jsx

@@ -0,0 +1,21 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+function App() {
+  return (
+    <>
+      <view
+        id='target'
+        style={{
+          height: '50vh',
+          width: '50vw',
+          background: 'blue',
+        }}
+      />
+    </>
+  );
+}
+
+root.render(<App></App>);

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): Uint8Array;
+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 encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name?: string | null): 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 get_font_face_content(buffer: Uint8Array): string;
 
-export function get_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[]): void;
+export function get_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void;
 
 export function get_style_content(buffer: Uint8Array): string;
 
-export function set_inline_styles_in_str(dom: HTMLElement, styles: string): boolean;
+export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean): boolean;
 
 export function set_inline_styles_number_key(dom: HTMLElement, key: number, value?: string | null): void;
 
@@ -192,10 +192,10 @@ 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) => [number, number, number];
-    readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number) => [number, number, number];
+    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 get_font_face_content: (a: any) => [number, number, number, number];
-    readonly get_inline_styles_in_key_value_vec: (a: any, b: number, c: number) => void;
+    readonly get_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void;
     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;
     readonly mainthreadwasmcontext_add_dataset: (a: number, b: number, c: any, d: any) => [number, number];
@@ -232,7 +232,7 @@ 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_str: (a: any, b: number, c: number) => number;
+    readonly set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: 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,10 +15,10 @@ 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) => [number, number, number];
-export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number) => [number, number, number];
+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 get_font_face_content: (a: any) => [number, number, number, number];
-export const get_inline_styles_in_key_value_vec: (a: any, b: number, c: number) => void;
+export const get_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void;
 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;
 export const mainthreadwasmcontext_add_dataset: (a: number, b: number, c: any, d: any) => [number, number];
@@ -55,7 +55,7 @@ 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_str: (a: any, b: number, c: number) => number;
+export const set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: 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): Uint8Array;
+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 encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name?: string | null): 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 get_font_face_content(buffer: Uint8Array): string;
 
-export function get_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[]): void;
+export function get_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void;
 
 export function get_style_content(buffer: Uint8Array): string;
 
-export function set_inline_styles_in_str(dom: HTMLElement, styles: string): boolean;
+export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean): boolean;
 
 export function set_inline_styles_number_key(dom: HTMLElement, key: number, value?: string | null): void;
 
@@ -192,10 +192,10 @@ 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) => void;
-    readonly encode_legacy_json_generated_raw_style_info: (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 get_font_face_content: (a: number, b: number) => void;
-    readonly get_inline_styles_in_key_value_vec: (a: number, b: number, c: number) => void;
+    readonly get_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: 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;
     readonly mainthreadwasmcontext_add_dataset: (a: number, b: number, c: number, d: number, e: number) => void;
@@ -232,7 +232,7 @@ 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_str: (a: number, b: number, c: number) => number;
+    readonly set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: 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,10 +15,10 @@ 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) => void;
-export const encode_legacy_json_generated_raw_style_info: (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 get_font_face_content: (a: number, b: number) => void;
-export const get_inline_styles_in_key_value_vec: (a: number, b: number, c: number) => void;
+export const get_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: 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;
 export const mainthreadwasmcontext_add_dataset: (a: number, b: number, c: number, d: number, e: number) => void;
@@ -55,7 +55,7 @@ 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_str: (a: number, b: number, c: number) => number;
+export const set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: 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): Uint8Array;
+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 encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name?: string | null): 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 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) => [number, number, number];
-export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number) => [number, number, number];
+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 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

@@ -16,7 +16,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);
+    constructor(view_attributes: string, enable_css_selector: boolean, transform_vw: boolean, transform_vh: 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): Uint8Array;
+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 encode_legacy_json_generated_raw_style_info(raw_style_info: RawStyleInfo, config_enable_css_selector: boolean, entry_name?: string | null): 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 get_font_face_content(buffer: Uint8Array): string;