feat: Add ppx unit support for CSS transformations and update inline style processing for unit conversions.#2381
Merged
PupilTong merged 3 commits intolynx-family:mainfrom Mar 26, 2026
Conversation
…e style processing for unit conversions.
🦋 Changeset detectedLatest commit: b65c840 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📝 WalkthroughWalkthroughRenames WASM inline-style API from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs (1)
130-145:⚠️ Potential issue | 🟡 MinorServer-side function uses misleading
get_prefix despite setting attributes.The server-side
get_inline_styles_in_key_value_vecinmain_thread_server_context.rs:343performs an identical operation to its client-side counterpart—it transforms styles and callselement.set_attribute("style", ...). Theget_prefix is inconsistent with the actual behavior.Consider renaming the server-side function to
set_inline_styles_in_key_value_vecto match both the client-side convention and the function's actual semantics.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs` around lines 130 - 145, The server-side function named get_inline_styles_in_key_value_vec actually transforms and sets the element style attribute, so rename the function to set_inline_styles_in_key_value_vec to match the client-side API (set_inline_styles_in_key_value_vec) and its semantics; update the function definition (formerly get_inline_styles_in_key_value_vec), all its references/call sites, and any public API exports to use the new name so callers remain consistent and compilation succeeds.
🧹 Nitpick comments (1)
packages/web-platform/web-core/src/style_transformer/inline_style.rs (1)
281-288: Test only verifies unit transformation, not CSS property transformations.Consider adding tests to verify whether CSS transformations (e.g.,
display: linear,flexshorthand) are expected to work or be skipped when usingtransform_inline_style_key_value_vec.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web-platform/web-core/src/style_transformer/inline_style.rs` around lines 281 - 288, The existing test rpx_unit_in_key_value_vec only checks rpx unit conversion; add additional unit tests for transform_inline_style_key_value_vec to cover CSS property transformation behavior (e.g., test with keys like "display" -> "linear" or "flex" shorthand, and "flex" with numeric values) so it's explicit whether property-level transforms are applied or skipped; create new test cases (e.g., rpx_and_display_transforms, flex_shorthand_behavior) that call transform_inline_style_key_value_vec and assert the exact expected output strings, and if current behavior should change, either update transform_inline_style_key_value_vec implementation or adjust assertions to reflect skipping transformations.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts`:
- Around line 437-440: The call to
wasmContext.set_inline_styles_in_key_value_vec is missing from the server
bindings; either add a corresponding method to the Rust MainThreadServerContext
implementation (edit src/main_thread/server/main_thread_server_context.rs to
implement set_inline_styles_in_key_value_vec with the same signature and
semantics as used here) and regenerate the bindings so MainThreadServerContext
in binary/server/server.d.ts exposes it, or if the intended operation is to read
rather than write, change the call in createElementAPI.ts to use the existing
wasmContext.get_inline_styles_in_key_value_vec; update the call site to match
the chosen method's parameter/return types accordingly.
---
Outside diff comments:
In
`@packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs`:
- Around line 130-145: The server-side function named
get_inline_styles_in_key_value_vec actually transforms and sets the element
style attribute, so rename the function to set_inline_styles_in_key_value_vec to
match the client-side API (set_inline_styles_in_key_value_vec) and its
semantics; update the function definition (formerly
get_inline_styles_in_key_value_vec), all its references/call sites, and any
public API exports to use the new name so callers remain consistent and
compilation succeeds.
---
Nitpick comments:
In `@packages/web-platform/web-core/src/style_transformer/inline_style.rs`:
- Around line 281-288: The existing test rpx_unit_in_key_value_vec only checks
rpx unit conversion; add additional unit tests for
transform_inline_style_key_value_vec to cover CSS property transformation
behavior (e.g., test with keys like "display" -> "linear" or "flex" shorthand,
and "flex" with numeric values) so it's explicit whether property-level
transforms are applied or skipped; create new test cases (e.g.,
rpx_and_display_transforms, flex_shorthand_behavior) that call
transform_inline_style_key_value_vec and assert the exact expected output
strings, and if current behavior should change, either update
transform_inline_style_key_value_vec implementation or adjust assertions to
reflect skipping transformations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0faf93dc-72a6-4cd6-ad11-f693e06bade1
📒 Files selected for processing (17)
.changeset/fix-rpx-unit-inline.md.changeset/transform-ppx.mdpackages/web-platform/web-core-e2e/tests/reactlynx.spec.tspackages/web-platform/web-core-e2e/tests/reactlynx/basic-ppx-unit/index.jsxpackages/web-platform/web-core-e2e/tests/reactlynx/basic-rpx-unit-js-value/index.jsxpackages/web-platform/web-core/binary/client/client.d.tspackages/web-platform/web-core/binary/client/client_bg.wasm.d.tspackages/web-platform/web-core/binary/client_legacy/client.d.tspackages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.tspackages/web-platform/web-core/css/index.csspackages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rspackages/web-platform/web-core/src/style_transformer/inline_style.rspackages/web-platform/web-core/src/style_transformer/token_transformer.rspackages/web-platform/web-core/test_transformer.rspackages/web-platform/web-core/tests/element-apis.spec.tspackages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.tspackages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts
packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts
Show resolved
Hide resolved
Merging this PR will degrade performance by 22.04%
Performance Changes
Comparing 
Footnotes
|
Web Explorer#8440 Bundle Size — 727.81KiB (+0.02%).b65c840(current) vs 863469e main#8433(baseline) Bundle metrics
|
| Current #8440 |
Baseline #8433 |
|
|---|---|---|
 Initial JS |
42.62KiB |
42.62KiB |
 Initial CSS |
2.16KiB(+1.61%) |
2.13KiB |
 Cache Invalidation |
0.62% |
0% |
| Chunks |
8 |
8 |
| Assets |
10 |
10 |
| Modules |
147(-2%) |
150 |
| Duplicate Modules |
11 |
11 |
| Duplicate Code |
34.75%(+0.06%) |
34.73% |
| Packages |
3 |
3 |
| Duplicate Packages |
0 |
0 |
Bundle size by type 2 changes 2 regressions
| Current #8440 |
Baseline #8433 |
|
|---|---|---|
| Other |
384.4KiB (+0.03%) |
384.29KiB |
| JS |
341.25KiB |
341.25KiB |
| CSS |
2.16KiB (+1.61%) |
2.13KiB |
Bundle analysis report Branch PupilTong:p/hw/support-ppx Project dashboard
Generated by RelativeCI Documentation Report issue
…use calc() with CSS variables for vw, vh, and rpx units.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/web-platform/web-core/tests/element-apis.spec.ts`:
- Around line 500-502: The test currently asserts raw "vw/vh/rpx/ppx" strings
for targetStyle (the assert around expect(targetStyle).toBe(...)) which doesn't
verify that __SetAttribute('style', ...) performed unit conversion; update the
assertion to expect the converted "calc(... var(--*-unit))" fragments for width,
height, margin and padding (or explicitly rename the test to indicate
passthrough behavior if you intend no conversion). Locate the assertion that
references targetStyle in element-apis.spec.ts and replace the equality check
with an assertion that the string contains the converted calc(...) var(--*-unit)
pieces (or rename the test title and expectation to "passthrough" if conversion
is not desired).
- Around line 1491-1494: The test calls wasmCtx.generate_html(true), which
coerces true→1 and ends up testing element ID 1 instead of the intended view3
element; replace the boolean argument with the actual element UID used elsewhere
(e.g., pass view3.uid or the same element-ID lookup helper used in other calls)
so html3 is generated for the correct element and the expectation targets
view3's styles.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 583c392a-bae4-4077-88c1-bf2a43761758
📒 Files selected for processing (1)
packages/web-platform/web-core/tests/element-apis.spec.ts
Sherry-hue
approved these changes
Mar 26, 2026
Merged
3 tasks
colinaaa
pushed a commit
that referenced
this pull request
Apr 6, 2026
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/rspeedy@0.14.0 ### Minor Changes - feat: add `Minify.mainThreadOptions` and `Minify.backgroundOptions` for thread-specific minifier. ([#2336](#2336)) ### Patch Changes - Bump Rsbuild v1.7.4 with Rspack v1.7.10. ([#2384](#2384)) - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.20.0 ## @lynx-js/lynx-bundle-rslib-config@0.3.0 ### Minor Changes - **BREAKING CHANGE**: ([#2370](#2370)) Simplify the API for external bundle builds by `externalsPresets` and `externalsPresetDefinitions`. ### Patch Changes - Preserve the default external-bundle `output.minify.jsOptions` when users set `output.minify: true` in `defineExternalBundleRslibConfig`, so required minifier options are not lost. ([#2390](#2390)) ## @lynx-js/external-bundle-rsbuild-plugin@0.1.0 ### Minor Changes - **BREAKING CHANGE**: ([#2370](#2370)) Simplify the API for external bundle builds by `externalsPresets` and `externalsPresetDefinitions`. ### Patch Changes - Updated dependencies \[[`7b7a0c6`](7b7a0c6)]: - @lynx-js/externals-loading-webpack-plugin@0.1.0 ## @lynx-js/react-rsbuild-plugin@0.14.0 ### Minor Changes - feat: support `optimizeBundleSize` option to remove unused code for main-thread and background. ([#2336](#2336)) - If `optimizeBundleSize` is `true` or `optimizeBundleSize.background` is `true`, `lynx.registerDataProcessors` calls will be marked as pure for the background thread output. - If `optimizeBundleSize` is `true` or `optimizeBundleSize.mainThread` is `true`, `NativeModules.call` and `lynx.getJSModule` calls will be marked as pure for the main-thread output. ### Patch Changes - refactor: remove `modifyWebpackChain` since Rsbuild 2.0 dropped webpack support ([#2397](#2397)) - Updated dependencies \[[`9193711`](9193711)]: - @lynx-js/template-webpack-plugin@0.10.7 - @lynx-js/css-extract-webpack-plugin@0.7.0 - @lynx-js/react-webpack-plugin@0.8.0 - @lynx-js/react-alias-rsbuild-plugin@0.14.0 - @lynx-js/use-sync-external-store@1.5.0 - @lynx-js/react-refresh-webpack-plugin@0.3.5 ## @lynx-js/web-core@0.20.0 ### Minor Changes - **This is a breaking change** ([#2322](#2322)) ## Architectural Upgrade: `web-core-wasm` replaces `web-core` This release marks a major architectural upgrade for the web platform. The experimental, WASM-powered engine formerly known as `web-core-wasm` has been fully stabilized and merged into the main branch, completely replacing the previous pure JS/TS based `web-core` implementation. This consolidation massively improves execution performance and aligns the API boundaries of the Web platform directly with other native Lynx implementations. ### 🎉 Added Features - **Core API Enhancements**: Successfully exposed and supported `__QuerySelector` and `__InvokeUIMethod` methods. - **Security & CSP Compliance**: Added a `nonce` attribute to the iframe's `srcdoc` script execution, strengthening Content Security Policy (CSP) compliance. - **`<lynx-view>` Parameter Enhancements**: - Added the `browser-config` attribute and property to `<lynx-view>`. Development environments can now supply a `BrowserConfig` object (e.g., configuring `pixelRatio`, `pixelWidth`, `pixelHeight`) allowing the `systemInfo` payload to be dynamically configured at the instance level. ### 🔄 Changed Features - **Legacy JSON Backwards Compatibility**: Delivered comprehensive fixes and optimizations to deeply support legacy JSON output templates: - Added support for lazy loading execution mode (`lazy usage`). - Implemented the correct decoding and handling of `@keyframe` animation rules. - Rectified rule scoping matching including scoped CSS, root selectors, and type selectors. - **Ecosystem Migration**: Updated testing and ecosystem applications (such as `web-explorer` and `shell-project`) to migrate away from obsolete fragmented dependencies. The new WASM architecture seamlessly integrates Element APIs and CSS directly inside the core client module, requiring a much simpler initialization footprint. **Before (Legacy `web-core` + `web-elements`):** ```typescript // Required multiple imports to assemble the environment import "@lynx-js/web-core/client"; import type { LynxViewElement as LynxView } from "@lynx-js/web-core"; // Had to manually import separate elements and their CSS import "@lynx-js/web-elements/index.css"; import "@lynx-js/web-elements/all"; const lynxView = document.createElement("lynx-view") as LynxView; // ... ``` **After (New `web-core` unified architecture):** ```typescript // The new engine natively registers Web Components and injects fundamental CSS import "@lynx-js/web-core/client"; import type { LynxViewElement as LynxView } from "@lynx-js/web-core/client"; const lynxView = document.createElement("lynx-view") as LynxView; // ... ``` _(Applications can now drop `@lynx-js/web-elements` entirely from their `package.json` dependencies)._ - **Dependency & Boot Sequence Improvements**: Re-architected module loading pathways. Promoted `wasm-feature-detect` directly to a core dependency, and hardened the web worker count initialization assertions. - **Initialization Optimizations**: Converted `SERVER_IN_SHADOW_CSS` initialization bounds to use compilation-time constant expressions for better optimization. ### 🗑️ Deleted Features & Structural Deprecations - **`<lynx-view>` Parameter Removals**: - Removed the `thread-strategy` property and attribute. Historically, this permitted consumers to toggle between `'multi-thread'` and `'all-on-ui'` modes depending on how they wanted the background logic to be executed. The WASM-driven architecture enforces a consolidated concurrency model, deprecating this `<lynx-view>` attribute entirely. - Removed the `overrideLynxTagToHTMLTagMap` property/attribute. HTML tag overriding mechanism has been deprecated in the new engine. - Removed the `customTemplateLoader` property handler from `<lynx-view>`. - Removed the `inject-head-links` property and attribute (`injectHeadLinks`), which previously was used to automatically inject `<link rel="stylesheet">` tags from the document head into the `lynx-view` shadow root. - **Fragmented Packages Removal**: The new cohesive WASM architecture native to `@lynx-js/web-core` handles cross-thread communication, worker boundaries, and rendering loops uniformly. Consequently, multiple obsolete packages have been completely removed from the workspace: - `@lynx-js/web-mainthread-apis` - `@lynx-js/web-worker-runtime` - `@lynx-js/web-core-server` - `@lynx-js/web-core-wasm-e2e` (transitioned into standard test suites) - Added support for `rpx` unit ([#2377](#2377)) **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"></view> ``` it will be transformed to ```html <view style="height:calc(1 * var(--rpx-unit))"></view> ``` Therefore you could use any `<length>` value to replace the unit, for example: ```html <lynx-view style="--rpx-unit:1px"></lynx-view> ``` By default, the --rpx-unit value is `1cqw` - Added support for transform `vw` and `vh` unit ([#2377](#2377)) Add `transform-vw` and `transform-vh` attributes and properties on `<lynx-view>`. For the following code ```html <view style="height:1vw"></view> ``` 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))"></view> ``` Therefore you could use any `<length>` value to replace the unit, for example: ```html <lynx-view style="--vw-unit:1px"></lynx-view> ``` ### Patch Changes - feat(web-core): add `is_bubble` parameter to `common_event_handler` to properly handle non-bubbling events like `window.Event('click', { bubbles: false })`. ([#2399](#2399)) - chore: update readme ([#2380](#2380)) - fix: the output format should be module ([#2388](#2388)) - opt: use opt-level 3 to compile wasm ([#2371](#2371)) - fix(web-core): avoid partial bundle loading and double fetching when fetchBundle is called concurrently for the same url. ([#2386](#2386)) - fix(web-core): fallback to the original export chunk when `processEvalResult` is absent during `queryComponent` execution ([#2399](#2399)) - fix: tokenizing inline style values correctly to support rpx and ppx unit conversion ([#2381](#2381)) This fixes an issue where the `transform_inline_style_key_value_vec` API bypassed the CSS tokenizer, preventing dimension units like `rpx` or `ppx` from being successfully transformed into `calc` strings when specified via inline styles. - feat: add mts lynx.querySelectorAll API ([#2382](#2382)) - fix: mts in lazy component ([#2375](#2375)) - fix: enableJSDataProcessor not work ([#2372](#2372)) - feat: add `ppx` unit support for CSS, transforming to `calc(... * var(--ppx-unit))` directly. ([#2381](#2381)) - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.20.0 ## @lynx-js/externals-loading-webpack-plugin@0.1.0 ### Minor Changes - **BREAKING CHANGE**: ([#2370](#2370)) Simplify the API for external bundle builds by `externalsPresets` and `externalsPresetDefinitions`. ## @lynx-js/devtool-connector@0.1.1 ### Patch Changes - fix: align GlobalKeys with Android DevToolSettings keys and filter global switch responses ([#2392](#2392)) ## @lynx-js/devtool-mcp-server@0.5.1 ### Patch Changes - Updated dependencies \[[`95fff27`](95fff27)]: - @lynx-js/devtool-connector@0.1.1 ## @lynx-js/react@0.117.1 ### Patch Changes - Update preact version to simplify `setProperty` implementation ([#2367](#2367)) ## @lynx-js/react-umd@0.117.1 ### Patch Changes - Add a new `entry` export to `@lynx-js/react-umd` for reuse by wrapper libraries of `@lynx-js/react`. ([#2370](#2370)) ## create-rspeedy@0.14.0 ### Patch Changes - Add optional Lynx DevTool skill. ([#2421](#2421)) - move Vitest integration to create-rstack extraTools and merge the Vitest templates into a single incremental overlay ([#2408](#2408)) ## @lynx-js/kitten-lynx-test-infra@0.1.2 ### Patch Changes - Updated dependencies \[[`95fff27`](95fff27)]: - @lynx-js/devtool-connector@0.1.1 ## @lynx-js/template-webpack-plugin@0.10.7 ### Patch Changes - use path.posix.format instead of path.format to ensure consistent path separators across platforms ([#2359](#2359)) - Updated dependencies \[[`75960cd`](75960cd), [`518c310`](518c310), [`863469e`](863469e), [`dc18c5c`](dc18c5c), [`7d242f3`](7d242f3), [`62bebcf`](62bebcf), [`75960cd`](75960cd), [`182f568`](182f568), [`1aa051d`](1aa051d), [`6b46f7e`](6b46f7e), [`fcda36a`](fcda36a), [`182f568`](182f568), [`138f727`](138f727), [`138f727`](138f727)]: - @lynx-js/web-core@0.20.0 ## @lynx-js/react-alias-rsbuild-plugin@0.14.0 ## upgrade-rspeedy@0.14.0 ## @lynx-js/web-rsbuild-server-middleware@0.20.0 ## @lynx-js/web-worker-rpc@0.20.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Checklist