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

.changeset/light-facts-sniff.md

@@ -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`

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

@@ -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,

packages/web-platform/web-tests/tests/react.spec.ts

@@ -212,6 +212,12 @@ test.describe('reactlynx3 tests', () => {
       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);

packages/web-platform/web-tests/tests/react/basic-style-root-selector/index.css

@@ -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;
+}

packages/web-platform/web-tests/tests/react/basic-style-root-selector/index.jsx

@@ -0,0 +1,19 @@
+// 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
+      id='target'
+      class='basic'
+      style={{ height: '100px', width: '100px' }}
+    />
+  );
+}
+root.render(
+  <page id='target'>
+    <App></App>
+  </page>,
+);

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

@@ -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') {