fix(web): `:root` not work on web platform by PupilTong · Pull Request #607 · lynx-family/lynx-stack

PupilTong · 2025-04-22T12:24:58Z

Note: To solve this issue, you need to upgrade your react-rsbuild-plugin

Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`

changeset-bot · 2025-04-22T12:25:01Z

🦋 Changeset detected

Latest commit: da9be21

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

This PR includes changesets to release 8 packages

Name	Type
@lynx-js/web-mainthread-apis	Patch
@lynx-js/web-webpack-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch
@lynx-js/web-worker-runtime	Patch
@lynx-js/web-core	Patch
@lynx-js/web-constants	Patch
@lynx-js/web-worker-rpc	Patch
@lynx-js/react-alias-rsbuild-plugin	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

Copilot

Pull Request Overview

This PR addresses the issue where the web platform’s :root styling was not applied correctly by updating the attribute selector in the style generation logic and ensuring that tests reflect the corrected implementation.

Updated attribute selector from [lynx-card-id] to [lynx-tag="page"] in the style generator
Added a new test to validate the basic root selector behavior on the web platform
Removed an unused element creation in the main thread runtime, likely in preparation for the fix

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/webpack/web-webpack-plugin/src/style/genStyleInfo.ts	Updated style generation to use [lynx-tag="page"] for correct :root styling
packages/web-platform/web-tests/tests/react/basic-style-root-selector/index.jsx	Added new test UI component using for verifying root selector style
packages/web-platform/web-tests/tests/react.spec.ts	Introduced a test case for the basic-style-root-selector scenario
packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts	Removed an unnecessary element creation that might conflict with the styling fix
.changeset/light-facts-sniff.md	Provided an update changeset reflecting version bumps and the fix

Files not reviewed (1)

packages/web-platform/web-tests/tests/react/basic-style-root-selector/index.css: Language not supported

Comments suppressed due to low confidence (2)

packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts:121

Confirm that removing the _rootDom element creation does not inadvertently affect parts of the code that may rely on it for CSS or DOM manipulation.

this._rootDom = this.config.docu.createElement('div');

packages/webpack/web-webpack-plugin/src/style/genStyleInfo.ts:71

Verify that the update from [lynx-card-id] to [lynx-tag="page"] is consistently reflected across the codebase to ensure proper application of :root styles.

plainSelectors.push('[lynx-tag="page"]');

codecov · 2025-04-22T12:33:54Z

Bundle Report

Changes will decrease total bundle size by 56 bytes (-0.01%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@lynx-js/web-explorer-web-array-push	315.92kB	-56 bytes (-0.02%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: @lynx-js/web-explorer-web-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`static/js/async/151.js`	-56 bytes	84.91kB	-0.07%

codspeed-hq · 2025-04-22T12:35:38Z

CodSpeed Performance Report

Merging #607 will not alter performance

_{Comparing PupilTong:p/hw/fix-root-style (da9be21) with main (1a61be6)}

Summary

✅ 1 untouched benchmarks

codecov · 2025-04-22T12:40:59Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
1429	1	1428	74

View the top 1 failed test(s) by shortest run time

react.spec.ts reactlynx3 tests › basic › basic-style-root-selector

Stack Traces | 7.88s run time

react.spec.ts:215:5 basic-style-root-selector

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`

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.107.0 ### Minor Changes - Some of the timing keys are renamed to match the naming convention of the Lynx Engine. ([#438](#438)) - `update_set_state_trigger` -> `updateSetStateTrigger` - `update_diff_vdom_start` -> `updateDiffVdomStart` - `update_diff_vdom_end` -> `updateDiffVdomEnd` - `diff_vdom_start` -> `diffVdomStart` - `diff_vdom_end` -> `diffVdomEnd` - `pack_changes_start` -> `packChangesStart` - `pack_changes_end` -> `packChangesEnd` - `parse_changes_start` -> `parseChangesStart` - `parse_changes_end` -> `parseChangesEnd` - `patch_changes_start` -> `patchChangesStart` - `patch_changes_end` -> `patchChangesEnd` - `hydrate_parse_snapshot_start` -> `hydrateParseSnapshotStart` - `hydrate_parse_snapshot_end` -> `hydrateParseSnapshotEnd` - `mts_render_start` -> `mtsRenderStart` - `mts_render_end` -> `mtsRenderEnd` ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Refactor: Improved naming for list operation related types. Renamed `UpdateAction` interface to `ListOperations`. ([#592](#592)) - Support using `"jsx": "react-jsx"` along with `"jsxImportSource": "@lynx-js/react"` in `tsconfig.json`. ([#545](#545)) ```json { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@lynx-js/react" } } ``` This configuration enhances TypeScript definitions for standard JSX elements, providing type errors for unsupported elements like `<div>` or `<button>`. - fix: JSX elements with dynamic `key={expr}` now wrapped in `wrapper` element to prevent merging. ([#547](#547)) ## @lynx-js/web-elements@0.7.0 ### Minor Changes - fix: ([#629](#629)) - typo of `initial-scroll-offset` in scroll-view. - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`. ### Patch Changes - fix: x-image border-radius setting has no effect. ([#638](#638)) - perf: late evaluate document.font.ready ([#604](#604)) - perf: improve raw-text performance ([#601](#601)) - fix: the scroll-x field of scroll-view needs to be handled correctly. ([#635](#635)) Before this, scroll-x of '' would result in no scrolling along x-axis. - feat: x-list supports `need-visible-item-info`, now you can get visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event. ([#595](#595)) ## @lynx-js/web-mainthread-apis@0.13.0 ### Minor Changes - fix: mts lynx will no longer provide requireModule, requireModuleAsync methods, which is aligned with Native. ([#537](#537)) ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab)]: - @lynx-js/web-constants@0.13.0 ## @lynx-js/rspeedy@0.9.3 ### Patch Changes - Bump Rsbuild v1.3.11 with Rspack v1.3.6. ([#594](#594)) ## create-rspeedy@0.9.3 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`. ([#545](#545)) ## @lynx-js/qrcode-rsbuild-plugin@0.3.6 ### Patch Changes - Fix the issue where QR code fails to print after initial compilation errors are fixed. ([#610](#610)) ## @lynx-js/react-rsbuild-plugin@0.9.8 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`6a5fc80`](6a5fc80), [`06bb78a`](06bb78a), [`f3afaf6`](f3afaf6), [`bf9c685`](bf9c685), [`5269cab`](5269cab)]: - @lynx-js/react-webpack-plugin@0.6.12 - @lynx-js/web-webpack-plugin@0.6.6 - @lynx-js/template-webpack-plugin@0.6.10 - @lynx-js/react-alias-rsbuild-plugin@0.9.8 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/css-extract-webpack-plugin@0.5.3 ## @lynx-js/react-alias-rsbuild-plugin@0.9.8 ### Patch Changes - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package ## @lynx-js/test-environment@0.0.1 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) ## @lynx-js/offscreen-document@0.0.1 ### Patch Changes - feat: support parentNode ([#625](#625)) ## @lynx-js/web-constants@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-core@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-worker-runtime@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-explorer@0.0.6 ### Patch Changes - fix: allow lynxjs.org to access native modules ([#599](#599)) ## @lynx-js/web-worker-runtime@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/react-webpack-plugin@0.6.12 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) ## @lynx-js/template-webpack-plugin@0.6.10 ### Patch Changes - Fix CSS import order when `enableCSSSelector` is false. ([#609](#609)) When the `enableCSSSelector` option is set to false, style rule priority is inversely related to `@import` order(Lynx CSS engine has the incorrect behavior). Reversing the import order to maintain correct priority is required. For example: ```css @import "0.css"; @import "1.css"; ``` will convert to: ```css @import "1.css"; @import "0.css"; ``` ## @lynx-js/web-webpack-plugin@0.6.6 ### Patch Changes - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue ## upgrade-rspeedy@0.9.3 ## @lynx-js/web-worker-rpc@0.13.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix(web): :root not work on web platform

9a0bd13

Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`

PupilTong requested a review from Copilot April 22, 2025 12:24

PupilTong requested a review from colinaaa as a code owner April 22, 2025 12:24

Copilot AI reviewed Apr 22, 2025

View reviewed changes

PupilTong requested a review from Sherry-hue April 22, 2025 12:26

PupilTong self-assigned this Apr 22, 2025

PupilTong added the platform:Web label Apr 22, 2025

PupilTong added this to Lynx for Web Apr 22, 2025

PupilTong moved this to In Progress in Lynx for Web Apr 22, 2025

Sherry-hue previously approved these changes Apr 22, 2025

View reviewed changes

incorrect target element

da9be21

PupilTong dismissed Sherry-hue’s stale review via da9be21 April 22, 2025 14:26

colinaaa approved these changes Apr 23, 2025

View reviewed changes

PupilTong added this pull request to the merge queue Apr 23, 2025

Merged via the queue into lynx-family:main with commit 06bb78a Apr 23, 2025
25 of 26 checks passed

PupilTong deleted the p/hw/fix-root-style branch April 23, 2025 05:49

github-project-automation bot moved this from In Progress to Done in Lynx for Web Apr 23, 2025

github-actions bot mentioned this pull request Apr 23, 2025

chore: Release 2025-04-27 12:05:46 #597

Merged

colinaaa pushed a commit that referenced this pull request Apr 24, 2025

fix(web): :root not work on web platform (#607)

5e50ec4

Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`

colinaaa pushed a commit to colinaaa/lynx-stack that referenced this pull request Apr 24, 2025

fix(web): :root not work on web platform (lynx-family#607)

7de669f

Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): `:root` not work on web platform#607

fix(web): `:root` not work on web platform#607
PupilTong merged 2 commits intolynx-family:mainfrom
PupilTong:p/hw/fix-root-style

PupilTong commented Apr 22, 2025

Uh oh!

changeset-bot bot commented Apr 22, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

codecov bot commented Apr 22, 2025

Assets Changed:

Uh oh!

codspeed-hq bot commented Apr 22, 2025 •

edited

Loading

Uh oh!

codecov bot commented Apr 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

PupilTong commented Apr 22, 2025

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

codecov bot commented Apr 22, 2025

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codspeed-hq bot commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #607 will not alter performance

Summary

Uh oh!

codecov bot commented Apr 22, 2025

❌ 1 Tests Failed:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Apr 22, 2025 •

edited

Loading

codspeed-hq bot commented Apr 22, 2025 •

edited

Loading