@lynx-js/web-mainthread-apis 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @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](https://github.com/lynx-family/lynx-stack/pull/537))
+
+### Patch Changes
+
+- refactor: isolate SystemInfo ([#628](https://github.com/lynx-family/lynx-stack/pull/628))
+
+  Never assign `SystemInfo` on worker's self object.
+
+- feat: support thread strategy `all-on-ui` ([#625](https://github.com/lynx-family/lynx-stack/pull/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](https://github.com/lynx-family/lynx-stack/pull/607))
+
+  Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`
+
+- refactor: move mainthread impl into mainthread-api packages ([#622](https://github.com/lynx-family/lynx-stack/pull/622))
+
+- fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](https://github.com/lynx-family/lynx-stack/pull/608))
+
+  like `.parent > :not([hidden]) ~ :not([hidden])`
+
+  you will need to upgrade your `react-rsbuild-plugin` to fix this issue
+
+- Updated dependencies [[`4ee0465`](https://github.com/lynx-family/lynx-stack/commit/4ee0465f6e5846a0d038b49d2a7c95e87c9e5c77), [`5a3d9af`](https://github.com/lynx-family/lynx-stack/commit/5a3d9afe52ba639987db124ca35580261e0718b5), [`5269cab`](https://github.com/lynx-family/lynx-stack/commit/5269cabef7609159bdd0dd14a03c5da667907424)]:
+  - @lynx-js/web-constants@0.13.0
+
+## 0.12.0
+
+### Patch Changes
+
+- feat: fully support MTS ([#569](https://github.com/lynx-family/lynx-stack/pull/569))
+
+  Now use support the following usage
+
+  - mainthread event
+  - mainthread ref
+  - runOnMainThread/runOnBackground
+  - ref.current.xx
+
+- feat: support mts event with target methods ([#564](https://github.com/lynx-family/lynx-stack/pull/564))
+
+  After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler
+
+- fix: crash on removing a id attribute ([#582](https://github.com/lynx-family/lynx-stack/pull/582))
+
+- Updated dependencies [[`f1ca29b`](https://github.com/lynx-family/lynx-stack/commit/f1ca29bd766377dd46583f15e1e75bca447699cd), [`7edf478`](https://github.com/lynx-family/lynx-stack/commit/7edf478410cb57eeedc18aac6f5d3950b16c7fa8)]:
+  - @lynx-js/web-constants@0.12.0
+  - @lynx-js/web-style-transformer@0.3.0
+
 ## 0.11.0
 
 ### Patch Changes

package/dist/MainThreadLynx.d.ts

@@ -1,11 +1,9 @@
-import { type MainThreadConfig, MainThreadRuntime } from './MainThreadRuntime.js';
-export declare function createMainThreadLynx(config: MainThreadConfig, lepusRuntime: MainThreadRuntime): {
-    getJSContext(): EventTarget;
+import { type MainThreadConfig } from './MainThreadRuntime.js';
+export declare function createMainThreadLynx(config: MainThreadConfig): {
+    getJSContext(): import("@lynx-js/web-constants").LynxContextEventTarget;
     requestAnimationFrame(cb: FrameRequestCallback): number;
     cancelAnimationFrame(handler: number): void;
     __globalProps: unknown;
-    requireModule(path: string): unknown;
-    requireModuleAsync(path: string, callback: (error: Error | null, exports?: unknown) => void): void;
     getCustomSectionSync(key: string): import("@lynx-js/web-constants").Cloneable;
     markPipelineTiming: (pipelineId: string, timingKey: string) => void;
 };

package/dist/MainThreadLynx.js

@@ -1,9 +1,11 @@
-import { MainThreadRuntime, } from './MainThreadRuntime.js';
-export function createMainThreadLynx(config, lepusRuntime) {
+// 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 {} from './MainThreadRuntime.js';
+export function createMainThreadLynx(config) {
     return {
         getJSContext() {
-            // TODO: implement this
-            return new EventTarget();
+            return config.jsContext;
         },
         requestAnimationFrame(cb) {
             return requestAnimationFrame(cb);
@@ -12,33 +14,6 @@ export function createMainThreadLynx(config, lepusRuntime) {
             return cancelAnimationFrame(handler);
         },
         __globalProps: config.globalProps,
-        requireModule(path) {
-            // @ts-expect-error
-            if (self.WorkerGlobalScope) {
-                const lepusChunkUrl = config.lepusCode[`${path}`];
-                if (lepusChunkUrl)
-                    path = lepusChunkUrl;
-                // @ts-expect-error
-                importScripts(path);
-                const entry = globalThis.module.exports;
-                return entry?.(lepusRuntime);
-            }
-            else {
-                throw new Error('importing scripts synchronously is only available for the multi-thread running mode');
-            }
-        },
-        requireModuleAsync(path, callback) {
-            const lepusChunkUrl = config.lepusCode[`${path}`];
-            if (lepusChunkUrl)
-                path = lepusChunkUrl;
-            import(
-            /* webpackIgnore: true */
-            path).catch(callback).then(() => {
-                const entry = globalThis.module.exports;
-                const ret = entry?.(lepusRuntime);
-                callback(null, ret);
-            });
-        },
         getCustomSectionSync(key) {
             return config.customSections[key]?.content;
         },

package/dist/MainThreadRuntime.d.ts

@@ -1,4 +1,4 @@
-import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type postExposureEndpoint } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type postExposureEndpoint, type LynxContextEventTarget, type LynxJSModule, systemInfo } from '@lynx-js/web-constants';
 import { type MainThreadLynx } from './MainThreadLynx.js';
 import type { LynxRuntimeInfo } from './elementAPI/ElementThreadElement.js';
 export interface MainThreadRuntimeCallbacks {
@@ -17,10 +17,11 @@ export interface MainThreadConfig {
     callbacks: MainThreadRuntimeCallbacks;
     styleInfo: StyleInfo;
     customSections: LynxTemplate['customSections'];
-    lepusCode: LynxTemplate['lepusCode'];
+    lepusCode: Record<string, LynxJSModule>;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
     docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>;
+    jsContext: LynxContextEventTarget;
 }
 export declare const elementToRuntimeInfoMap: unique symbol;
 export declare const getElementByUniqueId: unique symbol;
@@ -69,6 +70,7 @@ export declare class MainThreadRuntime {
      */
     __lynxGlobalBindingValues: Record<string, any>;
     get globalThis(): this;
+    SystemInfo: typeof systemInfo;
     lynx: MainThreadLynx;
     __globalProps: unknown;
     processData?: ProcessDataCallback;

package/dist/MainThreadRuntime.js

@@ -1,7 +1,7 @@
 // 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 { lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { lynxUniqueIdAttribute, systemInfo, } from '@lynx-js/web-constants';
 import { globalMuteableVars } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './MainThreadLynx.js';
 import { initializeElementCreatingFunction } from './elementAPI/elementCreating/elementCreatingFunctions.js';
@@ -49,7 +49,7 @@ export class MainThreadRuntime {
     constructor(config) {
         this.config = config;
         this.__globalProps = config.globalProps;
-        this.lynx = createMainThreadLynx(config, this);
+        this.lynx = createMainThreadLynx(config);
         /**
          * now create the style content
          * 1. flatten the styleInfo
@@ -63,7 +63,6 @@ export class MainThreadRuntime {
         const 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, this.config.pageConfig);
         this._rootDom = this.config.docu;
@@ -74,6 +73,10 @@ export class MainThreadRuntime {
         Object.assign(this, createAttributeAndPropertyFunctions(this), domTreeApis, createEventFunctions(this), createStyleFunctions(this, cssInJsInfo), initializeElementCreatingFunction(this));
         this._ReportError = this.config.callbacks._ReportError;
         this.__OnLifecycleEvent = this.config.callbacks.__OnLifecycleEvent;
+        this.SystemInfo = {
+            ...systemInfo,
+            pixelRatio: config.browserConfig.pixelRatio,
+        };
         /**
          * Start the exposure service
          */
@@ -128,6 +131,7 @@ export class MainThreadRuntime {
     get globalThis() {
         return this;
     }
+    SystemInfo;
     lynx;
     __globalProps;
     processData;
@@ -135,18 +139,20 @@ export class MainThreadRuntime {
     _ReportError;
     __OnLifecycleEvent;
     __LoadLepusChunk = (path) => {
-        try {
-            this.lynx.requireModule(path);
+        const lepusModule = this.config.lepusCode[`${path}`];
+        if (lepusModule) {
+            const entry = lepusModule.exports;
+            entry?.(this);
             return true;
         }
-        catch {
+        else {
+            return false;
         }
-        return false;
     };
     __FlushElementTree = (_subTree, options) => {
         const timingFlags = this._timingFlags;
         this._timingFlags = [];
-        if (this._page && !this._page.parentElement) {
+        if (this._page && !this._page.parentNode) {
             this._rootDom.append(this._page);
         }
         this.config.callbacks.flushElementTree(options, timingFlags);

package/dist/crossThreadHandlers/registerCallLepusMethodHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Rpc } from '@lynx-js/web-constants';
+import type { MainThreadRuntime } from '../MainThreadRuntime.js';
+export declare function registerCallLepusMethodHandler(rpc: Rpc, runtime: MainThreadRuntime): void;

package/dist/crossThreadHandlers/registerCallLepusMethodHandler.js

@@ -0,0 +1,10 @@
+// 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 { callLepusMethodEndpoint } from '@lynx-js/web-constants';
+export function registerCallLepusMethodHandler(rpc, runtime) {
+    rpc.registerHandler(callLepusMethodEndpoint, (methodName, data) => {
+        (runtime[methodName])(data);
+    });
+}
+//# sourceMappingURL=registerCallLepusMethodHandler.js.map

package/dist/crossThreadHandlers/registerGetCustomSectionHandler.d.ts

@@ -0,0 +1,2 @@
+import { type LynxTemplate, type Rpc } from '@lynx-js/web-constants';
+export declare function registerGetCustomSectionHandler(rpc: Rpc, customSections: LynxTemplate['customSections']): void;

package/dist/crossThreadHandlers/registerGetCustomSectionHandler.js

@@ -0,0 +1,10 @@
+// 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 { getCustomSectionsEndpoint, } from '@lynx-js/web-constants';
+export function registerGetCustomSectionHandler(rpc, customSections) {
+    rpc.registerHandler(getCustomSectionsEndpoint, (key) => {
+        return customSections[key]?.content;
+    });
+}
+//# sourceMappingURL=registerGetCustomSectionHandler.js.map

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.d.ts

@@ -21,7 +21,7 @@ export declare function createAttributeAndPropertyFunctions(runtime: MainThreadR
     __GetTag: (element: HTMLElement) => string;
     __SetConfig: (element: HTMLElement, config: Record<string, any>) => void;
     __SetDataset: (element: HTMLElement, dataset: Record<string, any>) => void;
-    __SetID: (element: HTMLElement, id: string) => void;
+    __SetID: (element: HTMLElement, id: string | null) => void;
     __UpdateComponentID: (element: HTMLElement, componentID: string) => void;
     __UpdateListCallbacks: (element: HTMLElement, componentAtIndex: ComponentAtIndexCallback, enqueueComponent: EnqueueComponentCallback) => void;
     __GetConfig: (element: HTMLElement) => Record<string, import("@lynx-js/web-constants").Cloneable>;

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js

@@ -57,7 +57,12 @@ export function createAttributeAndPropertyFunctions(runtime) {
         }
     }
     function __SetID(element, id) {
-        element.id = id;
+        if (typeof id === 'string') {
+            element.id = id;
+        }
+        else {
+            element.removeAttribute('id');
+        }
     }
     function __UpdateComponentID(element, componentID) {
         element.setAttribute(componentIdAttribute, componentID);

package/dist/elementAPI/event/eventFunctions.js

@@ -18,8 +18,8 @@ export function createEventFunctions(runtime) {
                 ?.handler
             : runtimeInfo.eventHandlerMap[lynxEventName]?.bind
                 ?.handler;
+        const crossThreadEvent = createCrossThreadEvent(runtime, event, lynxEventName);
         if (typeof hname === 'string') {
-            const crossThreadEvent = createCrossThreadEvent(runtime, event, lynxEventName);
             const parentComponentUniqueId = runtimeInfo.parentComponentUniqueId;
             const parentComponent = runtime[getElementByUniqueId](Number(parentComponentUniqueId));
             const componentId = parentComponent?.getAttribute(lynxTagAttribute) !== 'page'
@@ -34,7 +34,13 @@ export function createEventFunctions(runtime) {
             return true;
         }
         else if (hname) {
-            runtime.runWorklet?.(hname.value, []);
+            crossThreadEvent.target.elementRefptr =
+                event.target;
+            if (crossThreadEvent.currentTarget) {
+                crossThreadEvent.currentTarget
+                    .elementRefptr = event.currentTarget;
+            }
+            runtime.runWorklet?.(hname.value, [crossThreadEvent]);
         }
         return false;
     };

package/dist/elementAPI/style/styleFunctions.js

@@ -30,14 +30,20 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
         return (element.className ?? '').split(' ').filter(e => e);
     }
     function __AddInlineStyle(element, key, value) {
-        const lynxStyleInfo = queryCSSProperty(Number(key));
+        let dashName;
+        if (typeof key === 'number') {
+            dashName = queryCSSProperty(key).dashName;
+        }
+        else {
+            dashName = key;
+        }
         const valueStr = typeof value === 'number' ? value.toString() : value;
         if (!valueStr) { // null or undefined
-            element.style.removeProperty(lynxStyleInfo.dashName);
+            element.style.removeProperty(dashName);
         }
         else {
             const { transformedStyle } = transfromParsedStyles([[
-                    lynxStyleInfo.dashName,
+                    dashName,
                     valueStr,
                 ]]);
             for (const [property, value] of transformedStyle) {

package/dist/index.d.ts

@@ -1 +1,2 @@
+export { loadMainThread } from './loadMainThread.js';
 export * from './MainThreadRuntime.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 // 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.
+export { loadMainThread } from './loadMainThread.js';
 export * from './MainThreadRuntime.js';
 //# sourceMappingURL=index.js.map

package/dist/loadMainThread.d.ts

@@ -0,0 +1,5 @@
+import { type Rpc, type MainThreadStartConfigs, type RpcCallType, type reportErrorEndpoint } from '@lynx-js/web-constants';
+import { MainThreadRuntime } from './MainThreadRuntime.js';
+export declare function loadMainThread(backgroundThreadRpc: Rpc, docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>, commitDocument: () => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, reportError: RpcCallType<typeof reportErrorEndpoint>): {
+    startMainThread: (config: MainThreadStartConfigs) => Promise<MainThreadRuntime>;
+};

package/dist/loadMainThread.js

@@ -0,0 +1,120 @@
+// 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 { BackgroundThreadStartEndpoint, publishEventEndpoint, publicComponentEventEndpoint, postExposureEndpoint, switchExposureServiceEndpoint, postTimingFlagsEndpoint, dispatchCoreContextOnBackgroundEndpoint, dispatchJSContextOnMainThreadEndpoint, LynxCrossThreadContext, } from '@lynx-js/web-constants';
+import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCallLepusMethodHandler.js';
+import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerGetCustomSectionHandler.js';
+import { MainThreadRuntime, switchExposureService, } from './MainThreadRuntime.js';
+const moduleCache = {};
+export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTimingInternal, reportError) {
+    const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
+    const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
+    const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
+    const publicComponentEvent = backgroundThreadRpc.createCall(publicComponentEventEndpoint);
+    const postExposure = backgroundThreadRpc.createCall(postExposureEndpoint);
+    markTimingInternal('lepus_execute_start');
+    async function startMainThread(config) {
+        let isFp = true;
+        const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, } = config;
+        const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
+        markTimingInternal('decode_start');
+        const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
+            const cachedModule = moduleCache[name];
+            if (cachedModule) {
+                return [name, cachedModule];
+            }
+            else {
+                Object.assign(globalThis, { module: {} });
+                await import(/* webpackIgnore: true */ url);
+                const module = globalThis.module;
+                Object.assign(globalThis, { module: {} });
+                moduleCache[name] = module;
+                return [name, module];
+            }
+        }));
+        const lepusCodeLoaded = Object.fromEntries(lepusCodeEntries);
+        const entry = lepusCodeLoaded['root'].exports;
+        const jsContext = new LynxCrossThreadContext({
+            rpc: backgroundThreadRpc,
+            receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
+            sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
+        });
+        const runtime = new MainThreadRuntime({
+            jsContext,
+            tagMap,
+            browserConfig,
+            customSections,
+            globalProps,
+            pageConfig,
+            styleInfo,
+            lepusCode: lepusCodeLoaded,
+            docu,
+            callbacks: {
+                mainChunkReady: () => {
+                    markTimingInternal('data_processor_start');
+                    const initData = runtime.processData
+                        ? runtime.processData(config.initData)
+                        : config.initData;
+                    markTimingInternal('data_processor_end');
+                    registerCallLepusMethodHandler(backgroundThreadRpc, runtime);
+                    registerGetCustomSectionHandler(backgroundThreadRpc, customSections);
+                    backgroundThreadRpc.registerHandler(switchExposureServiceEndpoint, runtime[switchExposureService]);
+                    backgroundStart({
+                        initData,
+                        globalProps,
+                        template,
+                        cardType: cardType ?? 'react',
+                        customSections: Object.fromEntries(Object.entries(customSections).filter(([, value]) => value.type !== 'lazy').map(([k, v]) => [k, v.content])),
+                        nativeModulesMap,
+                        napiModulesMap,
+                        browserConfig,
+                    });
+                    runtime.renderPage(initData);
+                    runtime.__FlushElementTree(undefined, {});
+                },
+                flushElementTree: async (options, timingFlags) => {
+                    const pipelineId = options?.pipelineOptions?.pipelineID;
+                    markTimingInternal('dispatch_start', pipelineId);
+                    if (isFp) {
+                        isFp = false;
+                        jsContext.dispatchEvent({
+                            type: '__OnNativeAppReady',
+                            data: undefined,
+                        });
+                    }
+                    markTimingInternal('layout_start', pipelineId);
+                    markTimingInternal('ui_operation_flush_start', pipelineId);
+                    await commitDocument();
+                    markTimingInternal('ui_operation_flush_end', pipelineId);
+                    markTimingInternal('layout_end', pipelineId);
+                    markTimingInternal('dispatch_end', pipelineId);
+                    requestAnimationFrame(() => {
+                        postTimingFlags(timingFlags, pipelineId);
+                    });
+                },
+                _ReportError: reportError,
+                __OnLifecycleEvent: (data) => {
+                    jsContext.dispatchEvent({
+                        type: '__OnLifecycleEvent',
+                        data,
+                    });
+                },
+                /**
+                 * Note :
+                 * The parameter of lynx.performance.markTiming is (pipelineId:string, timingFlag:string)=>void
+                 * But our markTimingInternal is (timingFlag:string, pipelineId?:string, timeStamp?:number) => void
+                 */
+                markTiming: (a, b) => markTimingInternal(b, a),
+                publishEvent,
+                publicComponentEvent,
+                postExposure,
+            },
+        }).globalThis;
+        markTimingInternal('decode_end');
+        entry(runtime);
+        jsContext.__start(); // start the jsContext after the runtime is created
+        return runtime;
+    }
+    return { startMainThread };
+}
+//# sourceMappingURL=loadMainThread.js.map

package/dist/utils/processStyleInfo.js

@@ -34,11 +34,9 @@ export function transformToWebCss(styleInfo) {
             rule.decl = transformedStyle;
             if (childStyle.length > 0) {
                 cssInfos.rules.push({
-                    sel: selectors.map(selector => [
-                        selector[0].concat(['>', '*']),
-                        selector[1],
-                        selector[2],
-                    ]),
+                    sel: selectors.map(selector => selector.toSpliced(-2, 1, 
+                    /* replace the last combinator and insert at the end */
+                    ['>'], ['*'], [], [], [])),
                     decl: childStyle,
                 });
             }
@@ -50,7 +48,7 @@ export function transformToWebCss(styleInfo) {
  */
 export function genCssContent(styleInfo, pageConfig) {
     function getExtraSelectors(cssId) {
-        let prepend = '', suffix = '';
+        let suffix = '';
         if (!pageConfig.enableRemoveCSSScope) {
             if (cssId !== undefined) {
                 suffix += `[${cssIdAttribute}="${cssId}"]`;
@@ -63,21 +61,16 @@ export function genCssContent(styleInfo, pageConfig) {
         else {
             suffix += `[${lynxTagAttribute}]`;
         }
-        return { prepend, suffix };
+        return suffix;
     }
     const finalCssContent = [];
     for (const [cssId, cssInfos] of Object.entries(styleInfo)) {
-        const { prepend, suffix } = getExtraSelectors(cssId);
+        const suffix = getExtraSelectors(cssId);
         const declarationContent = cssInfos.rules.map((rule) => {
-            const { sel: selectors, decl: declarations } = rule;
-            const selectorString = selectors.map(([plainSelectors, pseudoClassSelectors, pseudoElementSelectors]) => {
-                return [
-                    prepend,
-                    plainSelectors.join(''),
-                    suffix,
-                    pseudoClassSelectors.join(''),
-                    pseudoElementSelectors.join(''),
-                ].join('');
+            const { sel: selectorList, decl: declarations } = rule;
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+            const selectorString = selectorList.map((selectors) => {
+                return selectors.toSpliced(-4, 0, [suffix]).join('');
             }).join(',');
             const declarationString = declarations.map(([k, v]) => `${k}:${v};`).join('');
             return `${selectorString}{${declarationString}}`;
@@ -94,10 +87,13 @@ export function genCssInJsInfo(styleInfo) {
         const oneCssInJsInfo = {};
         cssInfos.rules = cssInfos.rules.filter(oneCssInfo => {
             oneCssInfo.sel = oneCssInfo.sel.filter(selectorList => {
-                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors] = selectorList;
-                if (classSelectors.length === 1 && classSelectors[0][0] === '.'
+                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator,] = selectorList;
+                if (
+                // only one class selector
+                classSelectors.length === 1 && classSelectors[0][0] === '.'
                     && pseudoClassSelectors.length === 0
-                    && pseudoElementSelectors.length === 0) {
+                    && pseudoElementSelectors.length === 0
+                    && combinator.length === 0) {
                     const selectorName = classSelectors[0].substring(1);
                     const currentDeclarations = oneCssInJsInfo[selectorName];
                     if (currentDeclarations) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   "dependencies": {
     "css-tree": "^3.1.0",
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.11.0",
-    "@lynx-js/web-style-transformer": "0.2.3"
+    "@lynx-js/web-constants": "0.13.0",
+    "@lynx-js/web-style-transformer": "0.3.0"
   }
 }