Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PupilTong merged 2 commits into from
Apr 23, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a0bd13
fix(web): `:root` not work on web platform
PupilTong Apr 22, 2025
da9be21
incorrect target element
PupilTong Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/light-facts-sniff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@lynx-js/web-mainthread-apis": patch
"@lynx-js/web-webpack-plugin": patch
"@lynx-js/react-rsbuild-plugin": patch
---

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

Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`
1 change: 0 additions & 1 deletion packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export class MainThreadRuntime {
const cssInJsInfo: CssInJsInfo = this.config.pageConfig.enableCSSSelector
? {}
: genCssInJsInfo(this.config.styleInfo);
this._rootDom = this.config.docu.createElement('div');
const cardStyleElement = this.config.docu.createElement('style');
cardStyleElement.innerHTML = genCssContent(
this.config.styleInfo,
Expand Down
6 changes: 6 additions & 0 deletions packages/web-platform/web-tests/tests/react.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

const expectHasText = async (page: Page, text: string) => {
const hasText = (await page.getByText(text).count()) === 1;
await expect(hasText).toBe(true);

Check failure on line 37 in packages/web-platform/web-tests/tests/react.spec.ts

View workflow job for this annotation

GitHub Actions / playwright-linux / check

[webkit] › tests/react.spec.ts:116:5 › reactlynx3 tests › basic › basic-setstate-in-constructor 

  2) [webkit] › tests/react.spec.ts:116:5 › reactlynx3 tests › basic › basic-setstate-in-constructor 
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      35 | const expectHasText = async (page: Page, text: string) => {
      36 |   const hasText = (await page.getByText(text).count()) === 1;
    > 37 |   await expect(hasText).toBe(true);
         |                         ^
      38 | };
      39 |
      40 | const expectNoText = async (page: Page, text: string) => {
        at expectHasText (/home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:37:25)
        at /home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:119:7

Check failure on line 37 in packages/web-platform/web-tests/tests/react.spec.ts

View workflow job for this annotation

GitHub Actions / playwright-linux / check

[webkit] › tests/react.spec.ts:121:5 › reactlynx3 tests › basic › basic-setsate-with-cb 

  3) [webkit] › tests/react.spec.ts:121:5 › reactlynx3 tests › basic › basic-setsate-with-cb ───────
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      35 | const expectHasText = async (page: Page, text: string) => {
      36 |   const hasText = (await page.getByText(text).count()) === 1;
    > 37 |   await expect(hasText).toBe(true);
         |                         ^
      38 | };
      39 |
      40 | const expectNoText = async (page: Page, text: string) => {
        at expectHasText (/home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:37:25)
        at /home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:124:7
};

const expectNoText = async (page: Page, text: string) => {
Expand Down Expand Up @@ -212,6 +212,12 @@
await target.click();
await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
});
test('basic-style-root-selector', async ({ page }, { title }) => {
await goto(page, title);
await wait(100);
const target = page.locator('#target');
await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
});
test('basic-useeffect-hydrate', async ({ page }, { title }) => {
await goto(page, title);
await wait(100);
Expand Down Expand Up @@ -1082,7 +1088,7 @@
await wait(100);
const target = page.locator('#target');
await target.click();
await expect(await target.getAttribute('style')).toContain('green');

Check failure on line 1091 in packages/web-platform/web-tests/tests/react.spec.ts

View workflow job for this annotation

GitHub Actions / playwright-linux / check

[webkit] › tests/react.spec.ts:1086:5 › reactlynx3 tests › configs › config-mode-dev-with-all-in-one 

  4) [webkit] › tests/react.spec.ts:1086:5 › reactlynx3 tests › configs › config-mode-dev-with-all-in-one 
    Error: expect(received).toContain(expected) // indexOf

    Expected substring: "green"
    Received string:    "height: 100px; width: 100px; background: pink;"

      1089 |       const target = page.locator('#target');
      1090 |       await target.click();
    > 1091 |       await expect(await target.getAttribute('style')).toContain('green');
           |                                                        ^
      1092 |       await target.click();
      1093 |       await expect(await target.getAttribute('style')).toContain('pink');
      1094 |     });
        at /home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:1091:56
await target.click();
await expect(await target.getAttribute('style')).toContain('pink');
});
Expand Down Expand Up @@ -1331,7 +1337,7 @@
await wait(500);
const count = (await page.getByText('the count is:1').count())
+ (await await page.getByText('the count is:2').count());
expect(count).toBe(1);

Check failure on line 1340 in packages/web-platform/web-tests/tests/react.spec.ts

View workflow job for this annotation

GitHub Actions / playwright-linux / check

[webkit] › tests/react.spec.ts:1333:7 › reactlynx3 tests › elements › text › basic-element-text-set-native-props-text 

  5) [webkit] › tests/react.spec.ts:1333:7 › reactlynx3 tests › elements › text › basic-element-text-set-native-props-text 
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      1338 |           const count = (await page.getByText('the count is:1').count())
      1339 |             + (await await page.getByText('the count is:2').count());
    > 1340 |           expect(count).toBe(1);
           |                         ^
      1341 |         },
      1342 |       );
      1343 |
        at /home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:1340:25
},
);

Expand Down Expand Up @@ -1370,7 +1376,7 @@
await wait(300);
// --initialtextinitial
let count = await page.getByText('--').count();
expect(count).toBe(1);

Check failure on line 1379 in packages/web-platform/web-tests/tests/react.spec.ts

View workflow job for this annotation

GitHub Actions / playwright-linux / check

[webkit] › tests/react.spec.ts:1372:7 › reactlynx3 tests › elements › text › basic-element-text-set-native-props-with-setData 

  6) [webkit] › tests/react.spec.ts:1372:7 › reactlynx3 tests › elements › text › basic-element-text-set-native-props-with-setData 
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      1377 |           // --initialtextinitial
      1378 |           let count = await page.getByText('--').count();
    > 1379 |           expect(count).toBe(1);
           |                         ^
      1380 |           count = await page.getByText('initial').count();
      1381 |           expect(count).toBeGreaterThanOrEqual(1);
      1382 |           await page.locator('#target').click();
        at /home/runner/_work/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/react.spec.ts:1379:25
count = await page.getByText('initial').count();
expect(count).toBeGreaterThanOrEqual(1);
await page.locator('#target').click();
Expand Down
8 changes: 8 additions & 0 deletions packages/web-platform/web-tests/tests/react/basic-style-root-selector/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*
// Copyright 2023 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
*/
:root {
background-color: green;
}
18 changes: 18 additions & 0 deletions packages/web-platform/web-tests/tests/react/basic-style-root-selector/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Copyright 2023 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { root, useCallback, useState } from '@lynx-js/react';
import './index.css';
function App() {
return (
<view
class='basic'
style={{ height: '100px', width: '100px' }}
/>
);
}
root.render(
<page id='target'>
<App></App>
</page>,
);
4 changes: 2 additions & 2 deletions packages/webpack/web-webpack-plugin/src/style/genStyleInfo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@ export function genStyleInfo(
* [aa]:root {
* }
* ===>
* [aa][lynx-card-id] {
* [aa][lynx-tag="page"] {
* }
*/
plainSelectors.push('[lynx-card-id]');
plainSelectors.push('[lynx-tag="page"]');
} else if (selector.type === 'PseudoClassSelector') {
pseudoClassSelectors.push(CSS.csstree.generate(selector));
} else if (selector.type === 'PseudoElementSelector') {
Expand Down
Loading