fix: distinguish between cssID and componentCSSID in element dat…#2495
Merged
PupilTong merged 2 commits intolynx-family:mainfrom Apr 22, 2026
Merged
fix: distinguish between cssID and componentCSSID in element dat…#2495PupilTong merged 2 commits intolynx-family:mainfrom
PupilTong merged 2 commits intolynx-family:mainfrom
Conversation
…a and APIs to support correct style inheritance
🦋 Changeset detectedLatest commit: 4e61803 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 |
PupilTong
changed the title
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughFixes component CSS ID handling: component-level CSS ID is now stored on elements and derived from the parent component for SSR and main-thread creation; TypeScript APIs and WASM bindings updated and tests added. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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/tests/element-apis.spec.ts (1)
1742-1775:⚠️ Potential issue | 🟡 MinorTest has no assertions.
create element wont infer css id if parent css id is 0 in SSRbuilds the tree and callswasmCtx.generate_html(viewUid)but never asserts anything on the result, so it silently passes regardless of behavior. Add an assertion mirroring the client-side counterpart (e.g., that the rendered HTML does not containl-css-id=).Proposed fix
const viewUid = api.__GetElementUniqueID(view); const html = wasmCtx.generate_html(viewUid); + expect(html).not.toContain('l-css-id='); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web-platform/web-core/tests/element-apis.spec.ts` around lines 1742 - 1775, The test "create element wont infer css id if parent css id is 0 in SSR" builds a tree and calls wasmCtx.generate_html(viewUid) but has no assertion; add an assertion that the generated HTML (result of wasmCtx.generate_html(viewUid)) does NOT contain the css id attribute (e.g., ensure the string 'l-css-id=' is absent). Update the test using the existing variables (createServerElementAPI, wasmCtx, viewUid) to capture the html and assert html.includes('l-css-id=') is false (or use your test framework's negative assertion helper).
🤖 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/types/IElementPAPI.ts`:
- Around line 179-184: The __UpdateComponentInfo flow updates cssID by calling
__SetCSSId which currently only sets element_data.css_id; you need to also
update the element's component_css_id when the element is a component so future
children inherit the new value. Locate the __SetCSSId / set_css_id
implementation and add logic to detect component elements (the same condition
used elsewhere for components) and assign the new css id to component_css_id as
well as element_data.css_id; ensure the update occurs atomically with the
existing assignment to avoid divergence between element_data.css_id and
component_css_id.
---
Outside diff comments:
In `@packages/web-platform/web-core/tests/element-apis.spec.ts`:
- Around line 1742-1775: The test "create element wont infer css id if parent
css id is 0 in SSR" builds a tree and calls wasmCtx.generate_html(viewUid) but
has no assertion; add an assertion that the generated HTML (result of
wasmCtx.generate_html(viewUid)) does NOT contain the css id attribute (e.g.,
ensure the string 'l-css-id=' is absent). Update the test using the existing
variables (createServerElementAPI, wasmCtx, viewUid) to capture the html and
assert html.includes('l-css-id=') is false (or use your test framework's
negative assertion helper).
🪄 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: 9914ee5e-8e71-46d0-9980-5f15343c21f6
📒 Files selected for processing (8)
.changeset/fix-component-cssid.mdpackages/web-platform/web-core/src/main_thread/client/main_thread_context.rspackages/web-platform/web-core/src/main_thread/element_data.rspackages/web-platform/web-core/src/main_thread/server/main_thread_server_context.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.tspackages/web-platform/web-core/ts/types/IElementPAPI.ts
Merging this PR will degrade performance by 16.15%
Performance Changes
Comparing 
Footnotes
|
React Example#7462 Bundle Size — 224.41KiB (0%).4e61803(current) vs 02be891 main#7453(baseline) Bundle metrics
|
| Current #7462 |
Baseline #7453 |
|
|---|---|---|
 Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
179 |
179 |
| Duplicate Modules |
69 |
69 |
| Duplicate Code |
44.5% |
44.5% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #7462 |
Baseline #7453 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
78.65KiB |
78.65KiB |
Bundle analysis report Branch PupilTong:p/hw/patch-component-c... Project dashboard
Generated by RelativeCI Documentation Report issue
React External#580 Bundle Size — 583.27KiB (0%).4e61803(current) vs 02be891 main#571(baseline) Bundle metrics
|
| Current #580 |
Baseline #571 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
17 |
17 |
| Duplicate Modules |
5 |
5 |
| Duplicate Code |
8.59% |
8.59% |
| Packages |
0 |
0 |
| Duplicate Packages |
0 |
0 |
Bundle analysis report Branch PupilTong:p/hw/patch-component-c... Project dashboard
Generated by RelativeCI Documentation Report issue
React MTF Example#595 Bundle Size — 195.57KiB (0%).4e61803(current) vs 02be891 main#586(baseline) Bundle metrics
|
| Current #595 |
Baseline #586 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
173 |
173 |
| Duplicate Modules |
66 |
66 |
| Duplicate Code |
43.99% |
43.99% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #595 |
Baseline #586 |
|
|---|---|---|
| IMG |
111.23KiB |
111.23KiB |
| Other |
84.34KiB |
84.34KiB |
Bundle analysis report Branch PupilTong:p/hw/patch-component-c... Project dashboard
Generated by RelativeCI Documentation Report issue
Web Explorer#9036 Bundle Size — 898.69KiB (+0.06%).4e61803(current) vs 02be891 main#9028(baseline) Bundle metrics
|
| Current #9036 |
Baseline #9028 |
|
|---|---|---|
 Initial JS |
44.46KiB(-0.01%) |
44.47KiB |
| Initial CSS |
2.22KiB |
2.22KiB |
 Cache Invalidation |
34.61% |
0% |
| Chunks |
9 |
9 |
| Assets |
11 |
11 |
| Modules |
230(+0.44%) |
229 |
| Duplicate Modules |
11 |
11 |
| Duplicate Code |
27.21%(-0.04%) |
27.22% |
| Packages |
10 |
10 |
| Duplicate Packages |
0 |
0 |
Bundle size by type 2 changes 
2 regressions
| Current #9036 |
Baseline #9028 |
|
|---|---|---|
| JS |
494.46KiB (+0.03%) |
494.3KiB |
| Other |
402.02KiB (+0.1%) |
401.63KiB |
| CSS |
2.22KiB |
2.22KiB |
Bundle analysis report Branch PupilTong:p/hw/patch-component-c... Project dashboard
Generated by RelativeCI Documentation Report issue
Sherry-hue
approved these changes
Apr 22, 2026
colinaaa
pushed a commit
that referenced
this pull request
Apr 26, 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/react@0.120.0 ### Minor Changes - Bump `@lynx-js/internal-preact` from `10.28.4-dfff9aa` to `10.29.1-20260424024911-12b794f` ([diff](lynx-family/internal-preact@10.28.4-dfff9aa...10.29.1-20260424024911-12b794f)). ([#2512](#2512)) Fixes wrong DOM order when a keyed child moves to a different `$N` slot across a re-render. Cross-slot moves now land at the correct slot position instead of being appended past stable siblings. - Refactor preact to support multi-slots children and reduce the number and depth of snapshot. ([#1764](#1764)) ### Patch Changes - Fix stale callback-local references when transforming JSX inside `children={array.map(...)}` prop expressions. ([#2524](#2524)) - Fix ref callbacks not being cleaned up or re-applied correctly when the ref at the same element slot changes across rerenders that happen before hydration (e.g. a `useEffect` triggering `setState` during the initial background render). ([#2500](#2500)) - fix: reduce redundant updates for main-thread handlers and gestures ([#2188](#2188)) - Updates are faster when the main-thread event handler or gesture object is stable across rerenders (fewer unnecessary native updates). - Spread props rerenders that don't semantically change the handler/gesture no longer trigger redundant updates. - Removing a gesture from spread props reliably clears the gesture state on the target element. - Fix hydration edge cases by tolerating serialized snapshot nodes with missing `values` ([#2481](#2481)) - Keep ReactLynx Testing Library imports aligned with the contained snapshot runtime paths. ([#2498](#2498)) ## @lynx-js/template-webpack-plugin@0.11.0 ### Minor Changes - Add CSS source map support and source-mapped template encode diagnostics. ([#2483](#2483)) ### Patch Changes - fix: genStyleInfo should also preserve CSS variable fallback values when encoding web-core stylesheets so declarations like `var(--token, rgba(...))` are emitted with their fallback intact. ([#2502](#2502)) - Updated dependencies \[[`e179680`](e179680), [`8352530`](8352530), [`30f0277`](30f0277), [`887b8aa`](887b8aa), [`1d4abfc`](1d4abfc), [`25e196b`](25e196b), [`fb7bc84`](fb7bc84), [`9e149c4`](9e149c4), [`30f0277`](30f0277), [`9e149c4`](9e149c4)]: - @lynx-js/css-serializer@0.1.6 - @lynx-js/web-core@0.20.3 ## @lynx-js/i18next-translation-dedupe@0.0.1 ### Patch Changes - Introduce `@lynx-js/i18next-translation-dedupe` package to avoid bundling i18next translations twice in Lynx apps. ([#2482](#2482)) The package reads translations extracted by `rsbuild-plugin-i18next-extractor`, skips the extractor's default rendered asset, and writes the translations into the Lynx bundle custom section: ```json { "customSections": { "i18next-translations": { "content": { "en-US": { "hello": "Hello" }, "zh-CN": { "hello": "你好" } } } } } ``` ## @lynx-js/docs-mcp-server@0.2.2 ### Patch Changes - Fix Windows startup error. ([#2474](#2474)) ## @lynx-js/react-umd@0.120.0 ### Patch Changes - Support compile main-thread script to bytecode in external bundle ([#2459](#2459)) ## @lynx-js/rspeedy@0.14.3 ### Patch Changes - add a `sourceMap.css` option to emit CSS sourcemaps. ([#2442](#2442)) By default, `sourceMap.css` is false. You can set it to true to emit CSS sourcemaps. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ output: { sourceMap: { css: true, }, }, }); ``` - bump rsdoctor to 1.5.6 ([#2410](#2410)) - Enable CSS source maps by default in Rspeedy output config. ([#2483](#2483)) - Prefer physical routable IPv4 addresses over tunnel and link-local interfaces when resolving the dev host IP for generated preview and bundle URLs. ([#2409](#2409)) - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.20.3 ## @lynx-js/lynx-bundle-rslib-config@0.3.2 ### Patch Changes - Support compile main-thread script to bytecode in external bundle ([#2459](#2459)) - Updated dependencies \[[`e179680`](e179680)]: - @lynx-js/css-serializer@0.1.6 ## @lynx-js/react-rsbuild-plugin@0.16.1 ### Patch Changes - Respect `dev.hmr: false` when installing React Refresh integrations so disabled HMR no longer injects the refresh loader or plugin. ([#2487](#2487)) - Fix stale callback-local references when transforming JSX inside `children={array.map(...)}` prop expressions. ([#2524](#2524)) - Supports @lynx-js/react 0.120.0 ([#1764](#1764)) - Updated dependencies \[[`e179680`](e179680), [`13655ac`](13655ac), [`f15494b`](f15494b), [`e179680`](e179680), [`e179680`](e179680)]: - @lynx-js/template-webpack-plugin@0.11.0 - @lynx-js/css-extract-webpack-plugin@0.7.1 - @lynx-js/react-webpack-plugin@0.9.2 - @lynx-js/react-alias-rsbuild-plugin@0.16.1 - @lynx-js/use-sync-external-store@1.5.0 - @lynx-js/react-refresh-webpack-plugin@0.3.5 ## @lynx-js/css-serializer@0.1.6 ### Patch Changes - Add CSS source map support and source-mapped template encode diagnostics. ([#2483](#2483)) ## @lynx-js/web-core@0.20.3 ### Patch Changes - fix: `__AddClass` triggers style updates when `enableCSSSelector` is `false` ([#2515](#2515)) `__AddClass` was missing the expected call to `update_css_og_style` when CSS selectors are disabled (`enableCSSSelector: false`). With this fix, dynamically adding a class correctly delegates style population from the template AST into the DOM, mirroring the behavior of `__SetClasses`. Added behavioral unit test and end-to-end playwright validations using dynamically generated JSON AST `styleInfo` mocks. - fix(web-core): skip setting lynxEntryNameAttribute for **Card** and use constants for server element APIs ([#2510](#2510)) - Fix componentCSSID behavior for SSR and main thread by calculating element css_id from parent component correctly. ([#2495](#2495)) - fix: avoid panic in dispatch_event_by_path when element data cannot be retrieved ([#2508](#2508)) - fix: filter out -1 uniqueId in commonEventHandler ([#2493](#2493)) - feat: add x-markdown support ([#2412](#2412)) Add opt-in support for the `x-markdown` element on Lynx Web, including Markdown rendering together with its related styling, interaction, animation, truncation, range rendering, and effect capabilities exposed through the component API. Update the `web-core`, `web-core-wasm`, and `web-mainthread-apis` runtime paths to use the shared property-or-attribute setter from `web-constants`, so custom elements such as `x-markdown` can receive structured property values correctly instead of being forced through string-only attribute updates. ```javascript import "@lynx-js/web-elements/XMarkdown"; ``` - fix: transformVH not work with cqw unit as the base length ([#2469](#2469)) - fix: add cardType resolution for legacy json lynx bundle ([#2510](#2510)) - fix: the default value of rpx is supposed to be 1/750 cqw ([#2469](#2469)) - Updated dependencies \[[`e179680`](e179680), [`647334c`](647334c), [`fb7bc84`](fb7bc84), [`9454dc4`](9454dc4), [`bdec498`](bdec498), [`b0247f9`](b0247f9), [`eec539a`](eec539a)]: - @lynx-js/css-serializer@0.1.6 - @lynx-js/web-elements@0.12.1 - @lynx-js/web-worker-rpc@0.20.3 ## @lynx-js/web-elements@0.12.1 ### Patch Changes - fix: XMarkdown slot created should not have prefix ([#2520](#2520)) - feat: add x-markdown support ([#2412](#2412)) Add opt-in support for the `x-markdown` element on Lynx Web, including Markdown rendering together with its related styling, interaction, animation, truncation, range rendering, and effect capabilities exposed through the component API. Update the `web-core`, `web-core-wasm`, and `web-mainthread-apis` runtime paths to use the shared property-or-attribute setter from `web-constants`, so custom elements such as `x-markdown` can receive structured property values correctly instead of being forced through string-only attribute updates. ```javascript import "@lynx-js/web-elements/XMarkdown"; ``` - fix: x-markdown inline view injection no longer queries light DOM children when the content attribute changes. Consumers must now pre-set `slot="{id}"` on the child element they want to project into `inlineview://{id}`. ([#2516](#2516)) - fix: list cannot drag-scroll inside x-foldview-slot-ng ([#2507](#2507)) Cause: `touchstart` used `elementsFromPoint(pageX, pageY)` (expects `clientX/clientY`), so hit-testing can miss the real inner scroller (e.g. `x-list` shadow `#content`) when the document is scrolled. Fix: use `elementsFromPoint(clientX, clientY)` + `event.composedPath()` for Shadow DOM, and keep `previousPageX` updated during `touchmove`. - fix: line-height of markdown-style should be added `px` ([#2509](#2509)) - fix: list `bindscrolltolower` may not trigger because the lower threshold ([#2484](#2484)) sentinel had no effective size or offset, causing the bottom `IntersectionObserver` to miss the list boundary ## @lynx-js/web-explorer@0.0.17 ### Patch Changes - bump rsdoctor to 1.5.6 ([#2410](#2410)) ## @lynx-js/css-extract-webpack-plugin@0.7.1 ### Patch Changes - Fix CSS source map line offsets when wrapping extracted CSS with cssId metadata. ([#2514](#2514)) - Support `@lynx-js/template-webpack-plugin` v0.11.0. ([#2483](#2483)) ## @lynx-js/react-webpack-plugin@0.9.2 ### Patch Changes - Support `@lynx-js/template-webpack-plugin` v0.11.0. ([#2483](#2483)) ## create-rspeedy@0.14.3 ## @lynx-js/react-alias-rsbuild-plugin@0.16.1 ## upgrade-rspeedy@0.14.3 ## @lynx-js/web-rsbuild-server-middleware@0.20.3 ## @lynx-js/web-worker-rpc@0.20.3 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.
…a and APIs to support correct style inheritance
Summary by CodeRabbit
Bug Fixes
Tests
Checklist