@lynx-js/web-mainthread-apis 0.13.3 → 0.13.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.13.4
+
+### Patch Changes
+
+- fix: style loss issue caused by incorrect handling of styleInfo-imports when enableCSSSelector and enableRemoveCSSScope are turned off. ([#931](https://github.com/lynx-family/lynx-stack/pull/931))
+
+- Updated dependencies [[`569618d`](https://github.com/lynx-family/lynx-stack/commit/569618d8e2665f5c9e1672f7ee5900ec2a5179a2), [`f9f88d6`](https://github.com/lynx-family/lynx-stack/commit/f9f88d6fb9c42d3370a6622d9d799d671ffcf1a7)]:
+  - @lynx-js/web-constants@0.13.4
+
 ## 0.13.3
 
 ### Patch Changes

package/dist/MainThreadRuntime.js

@@ -61,7 +61,7 @@ export class MainThreadRuntime {
          * 4. create the style element
          * 5. append the style element to the root dom
          */
-        flattenStyleInfo(this.config.styleInfo);
+        flattenStyleInfo(this.config.styleInfo, this.config.pageConfig.enableCSSSelector);
         transformToWebCss(this.config.styleInfo);
         const cssInJsInfo = this.config.pageConfig.enableCSSSelector
             ? {}

package/dist/elementAPI/style/styleFunctions.js

@@ -5,7 +5,7 @@ import { cssIdAttribute } from '@lynx-js/web-constants';
 import hyphenateStyleName from 'hyphenate-style-name';
 import { queryCSSProperty } from './cssPropertyMap.js';
 import { decodeCssInJs } from '../../utils/decodeCssInJs.js';
-import { transformInlineStyleString, transfromParsedStyles, } from './transformInlineStyle.js';
+import { transformInlineStyleString, transformParsedStyles, } from './transformInlineStyle.js';
 import { elementToRuntimeInfoMap, updateCSSInJsStyle, } from '../../MainThreadRuntime.js';
 export function createStyleFunctions(runtime, cssInJsInfo) {
     function __AddClass(element, className) {
@@ -46,7 +46,7 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
             element.style.removeProperty(dashName);
         }
         else {
-            const { transformedStyle } = transfromParsedStyles([[
+            const { transformedStyle } = transformParsedStyles([[
                     dashName,
                     valueStr,
                 ]]);
@@ -60,7 +60,7 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
             return;
         const { transformedStyle } = typeof value === 'string'
             ? transformInlineStyleString(value)
-            : transfromParsedStyles(Object.entries(value).map(([k, value]) => [
+            : transformParsedStyles(Object.entries(value).map(([k, value]) => [
                 hyphenateStyleName(k),
                 value,
             ]));

package/dist/elementAPI/style/transformInlineStyle.d.ts

@@ -2,7 +2,7 @@ export declare function transformInlineStyleString(str: string): {
     childStyle: [string, string][];
     transformedStyle: [string, string][];
 };
-export declare function transfromParsedStyles(hyphenatedStyleObject: [property: string, value: string][]): {
+export declare function transformParsedStyles(hyphenatedStyleObject: [property: string, value: string][]): {
     childStyle: [string, string][];
     transformedStyle: [string, string][];
 };

package/dist/elementAPI/style/transformInlineStyle.js

@@ -5,7 +5,7 @@
 import * as tokenizer from 'css-tree/tokenizer';
 import { transformLynxStyles } from '@lynx-js/web-style-transformer';
 function parseStyleStringToObject(str) {
-    const hypenNameStyles = [];
+    const hyphenNameStyles = [];
     let beforeColonToken = true;
     let propertyStart = 0;
     let propertyEnd = 0;
@@ -14,12 +14,12 @@ function parseStyleStringToObject(str) {
     tokenizer.tokenize(str + ';', (type, start, end) => {
         if (type === tokenizer.Semicolon || tokenizer.EOF) {
             valueEnd = start;
-            const trimedProperty = str.substring(propertyStart, propertyEnd).trim();
-            const trimedValue = str.substring(valueStart, valueEnd).trim();
-            if (!beforeColonToken && trimedValue && trimedProperty) {
-                hypenNameStyles.push([
-                    trimedProperty,
-                    trimedValue,
+            const trimmedProperty = str.substring(propertyStart, propertyEnd).trim();
+            const trimmedValue = str.substring(valueStart, valueEnd).trim();
+            if (!beforeColonToken && trimmedValue && trimmedProperty) {
+                hyphenNameStyles.push([
+                    trimmedProperty,
+                    trimmedValue,
                 ]);
             }
             beforeColonToken = true;
@@ -31,12 +31,12 @@ function parseStyleStringToObject(str) {
             propertyEnd = start;
         }
     });
-    return hypenNameStyles;
+    return hyphenNameStyles;
 }
 export function transformInlineStyleString(str) {
-    return transfromParsedStyles(parseStyleStringToObject(str));
+    return transformParsedStyles(parseStyleStringToObject(str));
 }
-export function transfromParsedStyles(hyphenatedStyleObject) {
+export function transformParsedStyles(hyphenatedStyleObject) {
     return transformLynxStyles(hyphenatedStyleObject);
 }
 //# sourceMappingURL=transformInlineStyle.js.map

package/dist/utils/processStyleInfo.d.ts

@@ -1,5 +1,5 @@
 import { type StyleInfo, type CssInJsInfo, type PageConfig } from '@lynx-js/web-constants';
-export declare function flattenStyleInfo(styleInfo: StyleInfo): void;
+export declare function flattenStyleInfo(styleInfo: StyleInfo, enableCSSSelector: boolean): void;
 /**
  * apply the lynx css -> web css transformation
  */

package/dist/utils/processStyleInfo.js

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import { cssIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
 import { transformLynxStyles } from '@lynx-js/web-style-transformer';
-export function flattenStyleInfo(styleInfo) {
+export function flattenStyleInfo(styleInfo, enableCSSSelector) {
     function flattenOneStyleInfo(cssId) {
         const oneInfo = styleInfo[cssId];
         const imports = oneInfo?.imports;
@@ -12,7 +12,12 @@ export function flattenStyleInfo(styleInfo) {
                 const flatInfo = flattenOneStyleInfo(im);
                 if (flatInfo) {
                     oneInfo.content.push(...flatInfo.content);
-                    oneInfo.rules.push(...flatInfo.rules);
+                    // oneInfo.rules.push(...flatInfo.rules);
+                    oneInfo.rules.push(...(enableCSSSelector
+                        ? flatInfo.rules
+                        // when enableCSSSelector is false, need to make a shallow copy of rules.sel
+                        // otherwise updating `oneCssInfo.sel` in `genCssInJsInfo()` will affect other imported cssInfo
+                        : flatInfo.rules.map(i => ({ ...i }))));
                 }
             }
             oneInfo.imports = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "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.13.3",
+    "@lynx-js/web-constants": "0.13.4",
     "@lynx-js/web-style-transformer": "0.3.0"
   }
 }