fix: ensure __AddClass triggers style updates when enableCSSSelector … by PupilTong · Pull Request #2515 · lynx-family/lynx-stack

PupilTong · 2026-04-23T09:01:36Z

…is disabled

Summary by CodeRabbit

Release Notes

Bug Fixes
- Fixed class-to-style application behavior when CSS selector support is disabled, ensuring proper style updates through the expected style population flow.
Tests
- Added end-to-end test coverage for class application scenarios with CSS selector support disabled.

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).

…is disabled

changeset-bot · 2026-04-23T09:01:49Z

🦋 Changeset detected

Latest commit: 65f6f3c

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-23T09:01:53Z

📝 Walkthrough

Walkthrough

Adds a conditional behavior fix to __AddClass that, when CSS selector support is disabled, delegates style updates to the DOM via update_css_og_style wasm calls. Includes a new E2E test resource and test case that validates class application behavior with disabled CSS selectors, plus corresponding changelog documentation.

Changes

Cohort / File(s)	Summary
Changeset Documentation `.changeset/fix-addclass-style.md`	Documents a patch-level fix for `@lynx-js/web-core` addressing `__AddClass` style update behavior when CSS selector support is disabled.
E2E Test Configuration `packages/web-platform/web-core-e2e/resources/web-core.disable-css-selector.json`	Introduces a new JSON resource file that defines test scenario configuration with `enableCSSSelector: false` and associated style/manifest setup for E2E validation.
E2E Test Implementation `packages/web-platform/web-core-e2e/tests/web-core.test.ts`	Adds new test case that validates `__AddClass` behavior when CSS selectors are disabled, verifying class presence and computed style values match expectations.
Client & Server Element API Updates `packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts`, `packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts`	Updates `__AddClass` implementation with conditional wrapper logic that calls `wasmContext.update_css_og_style()` when `enableCSSSelector` is false, ensuring style propagation aligns with `__SetClasses` behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

feat: enhance style management by adding updateCssOGStyle callback an… #1622: Directly relates through the addition of updateCssOGStyle callback and refactoring of style handling that exposes the same lynx-entry-name attribute mechanism used by this PR's __AddClass wrapper.
fix(web): fix reload lynx-view when false may cause css style lost #1982: Both address CSS style updates when enableCSSSelector is false, with complementary changes to style-processing and the updateCssOGStyle wasm callback pathway.
feat: improve web-core-wasm #2148: Relates through the addition and wiring of MainThreadWasmContext.update_css_og_style APIs and style-management infrastructure that this PR's conditional __AddClass invokes.

Suggested labels

platform:Web

Suggested reviewers

Sherry-hue

Poem

🐰 When CSS selectors sleep, classes still must flow,
Through wasm paths and DOM so the styles can glow,
Add a class, update style—condition by condition,
Tests affirm our vision, no browser collision! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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 accurately and specifically describes the main change: fixing __AddClass to trigger style updates when enableCSSSelector is disabled, which is the core behavioral fix across all modified files.
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-23T09:04:34Z

Codecov Report

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

Files with missing lines	Patch %	Lines
...web-core/ts/server/elementAPIs/createElementAPI.ts	50.00%	5 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

🧹 Nitpick comments (1)

packages/web-platform/web-core-e2e/tests/web-core.test.ts (1)
94-95: Remove debug-only console listeners and RESULT:: log.

page.on('console', ...) / page.on('pageerror', ...) and the console.log('RESULT::', result) look like leftover debugging aids from local iteration. They don't affect assertions but pollute CI output and aren't used by any later assertion (errors aren't collected/asserted). Consider dropping them or, if you want to assert no page errors, push into an array and expect(errors).toEqual([]) like the should not throw error... test at line 1052.
🧹 Suggested cleanup
-    page.on('console', msg => console.log('PAGE LOG:', msg.text()));
-    page.on('pageerror', err => console.log('PAGE ERROR:', err.message));
-
     await goto(page, 'web-core.disable-css-selector.json');
@@
-    console.log('RESULT::', result);
     expect(result.classes).toContain('my-class');
Also applies to: 133-133
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/web-platform/web-core-e2e/tests/web-core.test.ts` around lines 94 -
95, Remove the debug-only console listeners and the RESULT:: log: delete the
page.on('console', msg => ...) and page.on('pageerror', err => ...) handlers and
remove the console.log('RESULT::', result) statement; if you want to assert no
page errors instead, replace the page.on('pageerror', ...) handler with code
that pushes errors into an errors array (e.g., errors.push(err.message)) and add
an assertion like expect(errors).toEqual([]) similar to the existing "should not
throw error..." test, keeping the rest of the test flow unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/web-platform/web-core-e2e/tests/web-core.test.ts`:
- Around line 94-95: Remove the debug-only console listeners and the RESULT::
log: delete the page.on('console', msg => ...) and page.on('pageerror', err =>
...) handlers and remove the console.log('RESULT::', result) statement; if you
want to assert no page errors instead, replace the page.on('pageerror', ...)
handler with code that pushes errors into an errors array (e.g.,
errors.push(err.message)) and add an assertion like expect(errors).toEqual([])
similar to the existing "should not throw error..." test, keeping the rest of
the test flow unchanged.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c7d53e40-cc73-4730-a430-0f32717d8a5b

📥 Commits

Reviewing files that changed from the base of the PR and between 13655ac and 65f6f3c.

📒 Files selected for processing (5)

.changeset/fix-addclass-style.md
packages/web-platform/web-core-e2e/resources/web-core.disable-css-selector.json
packages/web-platform/web-core-e2e/tests/web-core.test.ts
packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts
packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts

codspeed-hq · 2026-04-23T09:23:35Z

Merging this PR will improve performance by 5.07%

⚡ 1 improved benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`transform 1000 view elements`	46.8 ms	44.5 ms	+5.07%

_{Comparing PupilTong:p/hw/fix-css-og-add-class (65f6f3c) with main (13655ac)}

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-23T09:27:46Z

React MTF Example

#696 Bundle Size — 196.39KiB (0%).

65f6f3c(current) vs 4643248 main#695(baseline)

Bundle metrics no changes

	Current #696	Baseline #695
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	`44.07%`	`44.07%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #696	Baseline #695
IMG	`111.23KiB`	`111.23KiB`
Other	`85.15KiB`	`85.15KiB`

Bundle analysis report Branch PupilTong:p/hw/fix-css-og-add-cl... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-23T09:27:48Z

React Example

#7564 Bundle Size — 225.23KiB (0%).

65f6f3c(current) vs 4643248 main#7563(baseline)

Bundle metrics no changes

	Current #7564	Baseline #7563
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.57%`	`44.57%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #7564	Baseline #7563
IMG	`145.76KiB`	`145.76KiB`
Other	`79.47KiB`	`79.47KiB`

Bundle analysis report Branch PupilTong:p/hw/fix-css-og-add-cl... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-23T09:27:50Z

React External

#682 Bundle Size — 679.93KiB (0%).

65f6f3c(current) vs 4643248 main#681(baseline)

Bundle metrics no changes

	Current #682	Baseline #681
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 #682	Baseline #681
Other	`679.93KiB`	`679.93KiB`

Bundle analysis report Branch PupilTong:p/hw/fix-css-og-add-cl... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-23T09:28:12Z

Web Explorer

#9136 Bundle Size — 900.2KiB (+0.01%).

65f6f3c(current) vs 4643248 main#9135(baseline)

Bundle metrics

3 changes

	Current #9136	Baseline #9135
Initial JS	`44.46KiB`	`44.46KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`8.1%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`230`(`+0.44%`)	`229`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.28%`(`-0.04%`)	`27.29%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 regression

	Current #9136	Baseline #9135
JS	`496.06KiB` (`+0.02%`)	`495.97KiB`
Other	`401.92KiB`	`401.92KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch PupilTong:p/hw/fix-css-og-add-cl... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

fix: ensure __AddClass triggers style updates when enableCSSSelector …

65f6f3c

…is disabled

PupilTong self-assigned this Apr 23, 2026

PupilTong requested a review from Sherry-hue as a code owner April 23, 2026 09:01

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

coderabbitai Bot reviewed Apr 23, 2026

View reviewed changes

Sherry-hue approved these changes Apr 23, 2026

View reviewed changes

PupilTong merged commit 8352530 into lynx-family:main Apr 23, 2026
103 of 111 checks passed

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

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

Open

Conversation

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

Uh oh!

Summary by CodeRabbit

Release Notes

Checklist

Uh oh!

changeset-bot Bot commented Apr 23, 2026

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Apr 23, 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 labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Apr 23, 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!

codspeed-hq Bot commented Apr 23, 2026

Merging this PR will improve performance by 5.07%

Performance Changes

Footnotes

Uh oh!

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

Uh oh!

React MTF Example

#696 Bundle Size — 196.39KiB (0%).

Uh oh!

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

Uh oh!

React Example

#7564 Bundle Size — 225.23KiB (0%).

Uh oh!

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

Uh oh!

React External

#682 Bundle Size — 679.93KiB (0%).

Uh oh!

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

Uh oh!

Web Explorer

#9136 Bundle Size — 900.2KiB (+0.01%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PupilTong commented Apr 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 23, 2026 •

edited

Loading

codecov Bot commented Apr 23, 2026 •

edited

Loading

relativeci Bot commented Apr 23, 2026 •

edited

Loading

relativeci Bot commented Apr 23, 2026 •

edited

Loading

relativeci Bot commented Apr 23, 2026 •

edited

Loading

relativeci Bot commented Apr 23, 2026 •

edited

Loading