fix: distinguish between cssID and componentCSSID in element dat… by PupilTong · Pull Request #2495 · lynx-family/lynx-stack

PupilTong · 2026-04-21T11:24:56Z

…a and APIs to support correct style inheritance

Summary by CodeRabbit

Bug Fixes
- Fixed component CSS ID handling for SSR and main-thread rendering so child elements inherit the correct component-level CSS ID from their parent component, ensuring consistent styling/IDs across contexts.
Tests
- Added tests that verify component CSS IDs propagate to child elements and that component updates reflect the expected CSS ID behavior.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

…a and APIs to support correct style inheritance

changeset-bot · 2026-04-21T11:25:00Z

🦋 Changeset detected

Latest commit: 4e61803

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@lynx-js/web-core	Patch
upgrade-rspeedy	Patch
@lynx-js/web-rsbuild-server-middleware	Patch
@lynx-js/template-webpack-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch
create-rspeedy	Patch
@lynx-js/web-worker-rpc	Patch
@lynx-js/react-alias-rsbuild-plugin	Patch
@lynx-js/rspeedy	Patch

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

coderabbitai · 2026-04-21T11:25:16Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7d53f601-6034-4e98-ac67-c922f924541b

📥 Commits

Reviewing files that changed from the base of the PR and between 79443d3 and 4e61803.

📒 Files selected for processing (8)

packages/web-platform/web-core/binary/client/client.d.ts
packages/web-platform/web-core/binary/client/client_bg.wasm.d.ts
packages/web-platform/web-core/binary/client_legacy/client.d.ts
packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts
packages/web-platform/web-core/binary/server/server.d.ts
packages/web-platform/web-core/src/main_thread/client/element_apis/component_apis.rs
packages/web-platform/web-core/tests/element-apis.spec.ts
packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts

🚧 Files skipped from review as they are similar to previous changes (2)

packages/web-platform/web-core/tests/element-apis.spec.ts
packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts

📝 Walkthrough

Walkthrough

Fixes 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

Cohort / File(s)	Summary
Changeset & Types `\.changeset/fix-component-cssid.md`, `packages/web-platform/web-core/ts/types/IElementPAPI.ts`	Added patch changeset; renamed positional `cssID` → `componentCSSID` for CreateComponent/CreatePage types and added optional `cssID` to UpdateComponentInfo params.
Element data struct `packages/web-platform/web-core/src/main_thread/element_data.rs`	Added `component_css_id: i32` to `LynxElementData` and updated constructors to accept/thread the field.
Main-thread client (Rust & WASM types) `packages/web-platform/web-core/src/main_thread/client/main_thread_context.rs`, `packages/web-platform/web-core/src/main_thread/client/element_apis/component_apis.rs`, `packages/web-platform/web-core/binary/client/.d.ts`, `packages/web-platform/web-core/binary/client_legacy/.d.ts`, `packages/web-platform/web-core/binary/client_bg.wasm.d.ts`, `packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts`	Renamed `create_element_common` parameter to `component_css_id`; removed `get_css_id_by_unique_id`; added `update_component_css_id` API; updated WASM/TS declaration exports accordingly.
Main-thread server (Rust & d.ts) `packages/web-platform/web-core/src/main_thread/server/main_thread_server_context.rs`, `packages/web-platform/web-core/binary/server/server.d.ts`	Renamed `css_id_opt` → `component_css_id_opt`, derive child element CSS ID from parent component's `component_css_id`, pass component_css_id into element data; added unit test `test_component_css_id`.
TypeScript client/server call sites `packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts`, `packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts`	Renamed runtime parameter variables to `componentCSSID` for `__CreateComponent`/`__CreatePage` and forward to wasm context; changed `__UpdateComponentInfo` to call `update_component_css_id`.
Tests `packages/web-platform/web-core/tests/element-apis.spec.ts`	Added tests verifying that a component's `cssId`/`componentCSSID` cascades to child elements and that `__UpdateComponentInfo` updates component CSS ID and attributes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor: with WeakRef in element APIs and WASM bindings to improve m… #2439: Overlaps changes to MainThreadWasmContext::create_element_common and related WASM/TS bindings.
feat: improve web-core-wasm #2148: Modifies component/CSS-ID pathways and LynxElementData handling similar to this PR.

Suggested reviewers

Sherry-hue
colinaaa

Poem

🐰 I hopped through code to mend a thread,
Component IDs now find their head.
From parent root to child so spry,
SSR and client sing in reply.
Little element, now wear your tie 🎀

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: distinguishing between cssID and componentCSSID in element data, which is the core fix applied throughout the codebase.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-04-21T11:28:04Z

Codecov Report

❌ Patch coverage is 67.74194% with 20 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../main_thread/client/element_apis/component_apis.rs	0.00%	12 Missing ⚠️
...core/src/main_thread/client/main_thread_context.rs	0.00%	8 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

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 | 🟡 Minor

Test has no assertions.

create element wont infer css id if parent css id is 0 in SSR builds the tree and calls wasmCtx.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 contain l-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

📥 Commits

Reviewing files that changed from the base of the PR and between 02be891 and 79443d3.

📒 Files selected for processing (8)

.changeset/fix-component-cssid.md
packages/web-platform/web-core/src/main_thread/client/main_thread_context.rs
packages/web-platform/web-core/src/main_thread/element_data.rs
packages/web-platform/web-core/src/main_thread/server/main_thread_server_context.rs
packages/web-platform/web-core/tests/element-apis.spec.ts
packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts
packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts
packages/web-platform/web-core/ts/types/IElementPAPI.ts

codspeed-hq · 2026-04-21T11:48:02Z

Merging this PR will degrade performance by 16.15%

⚡ 2 improved benchmarks
❌ 1 regressed benchmark
✅ 78 untouched benchmarks
⏩ 26 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`002-hello-reactLynx-destroyBackground`	894.7 µs	669.8 µs	+33.57%
❌	`008-many-use-state-destroyBackground`	8 ms	9.5 ms	-16.15%
⚡	`basic-performance-text-200`	21 ms	12 ms	+73.96%

_{Comparing PupilTong:p/hw/patch-component-css-id (4e61803) with main (02be891)}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-04-21T11:50:30Z

React Example

#7462 Bundle Size — 224.41KiB (0%).

4e61803(current) vs 02be891 main#7453(baseline)

Bundle metrics no changes

	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}

relativeci · 2026-04-21T11:50:31Z

React External

#580 Bundle Size — 583.27KiB (0%).

4e61803(current) vs 02be891 main#571(baseline)

Bundle metrics no changes

	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 size by type no changes

	Current #580	Baseline #571
Other	`583.27KiB`	`583.27KiB`

Bundle analysis report Branch PupilTong:p/hw/patch-component-c... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-21T11:53:52Z

React MTF Example

#595 Bundle Size — 195.57KiB (0%).

4e61803(current) vs 02be891 main#586(baseline)

Bundle metrics no changes

	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}

relativeci · 2026-04-21T12:19:05Z

Web Explorer

#9036 Bundle Size — 898.69KiB (+0.06%).

4e61803(current) vs 02be891 main#9028(baseline)

Bundle metrics

4 changes

1 improvement

	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}

refactor: distinguish between cssID and componentCSSID in element dat…

79443d3

…a and APIs to support correct style inheritance

PupilTong requested a review from Sherry-hue as a code owner April 21, 2026 11:24

PupilTong changed the title ~~refactor: distinguish between cssID and componentCSSID in element dat…~~ fix: distinguish between cssID and componentCSSID in element dat… Apr 21, 2026

PupilTong self-assigned this Apr 21, 2026

coderabbitai Bot added the platform:Web label Apr 21, 2026

coderabbitai Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread packages/web-platform/web-core/ts/types/IElementPAPI.ts

+ update

4e61803

Sherry-hue approved these changes Apr 22, 2026

View reviewed changes

PupilTong merged commit 887b8aa into lynx-family:main Apr 22, 2026
48 of 49 checks passed

github-actions Bot mentioned this pull request Apr 22, 2026

chore: Release 2026-04-24 14:53:52 #2477

Open

Conversation

PupilTong commented Apr 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed-hq Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 16.15%

Performance Changes

Footnotes

Uh oh!

relativeci Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#7462 Bundle Size — 224.41KiB (0%).

Uh oh!

relativeci Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#580 Bundle Size — 583.27KiB (0%).

Uh oh!

relativeci Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#595 Bundle Size — 195.57KiB (0%).

Uh oh!

relativeci Bot commented Apr 21, 2026

Web Explorer

#9036 Bundle Size — 898.69KiB (+0.06%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PupilTong commented Apr 21, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Apr 21, 2026 •

edited

Loading

coderabbitai Bot commented Apr 21, 2026 •

edited

Loading

codecov Bot commented Apr 21, 2026 •

edited

Loading

codspeed-hq Bot commented Apr 21, 2026 •

edited

Loading

relativeci Bot commented Apr 21, 2026 •

edited

Loading

relativeci Bot commented Apr 21, 2026 •

edited

Loading

relativeci Bot commented Apr 21, 2026 •

edited

Loading