@lynx-js/template-webpack-plugin-canary 0.6.9-canary-20250411-bbcdba12 → 0.6.10-canary-20250423-f3afaf6c

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # @lynx-js/template-webpack-plugin
 
-## 0.6.9-canary-20250411152153-bbcdba12421f96b99460dd4c102ce40fa88d70ae
+## 0.6.10-canary-20250423105122-f3afaf6c7919d3fe60ac2dfcd8af77178436f785
+
+### Patch Changes
+
+- Fix CSS import order when `enableCSSSelector` is false. ([#609](https://github.com/lynx-family/lynx-stack/pull/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";
+  ```
+
+## 0.6.9
 
 ### Patch Changes
 

package/lib/LynxAsyncChunksRuntimeModule.d.ts

@@ -1,4 +1,4 @@
 import type { RuntimeModule } from 'webpack';
-type LynxAsyncChunksRuntimeModule = new (getChunkName: (chunkName: string | undefined) => string) => RuntimeModule;
+type LynxAsyncChunksRuntimeModule = new (getChunkName: (chunkName: string | null | undefined) => string) => RuntimeModule;
 export declare function createLynxAsyncChunksRuntimeModule(webpack: typeof import('webpack')): LynxAsyncChunksRuntimeModule;
 export {};

package/lib/LynxTemplatePlugin.d.ts

@@ -320,7 +320,7 @@ export declare class LynxTemplatePlugin {
      * )));
      * ```
      */
-    static convertCSSChunksToMap(cssChunks: string[], plugins: CSS.Plugin[]): {
+    static convertCSSChunksToMap(cssChunks: string[], plugins: CSS.Plugin[], enableCSSSelector: boolean): {
         cssMap: Record<string, CSS.LynxStyleNode[]>;
         cssSource: Record<string, string>;
     };

package/lib/LynxTemplatePlugin.js

@@ -111,8 +111,8 @@ export class LynxTemplatePlugin {
      * )));
      * ```
      */
-    static convertCSSChunksToMap(cssChunks, plugins) {
-        return cssChunksToMap(cssChunks, plugins);
+    static convertCSSChunksToMap(cssChunks, plugins, enableCSSSelector) {
+        return cssChunksToMap(cssChunks, plugins, enableCSSSelector);
     }
     /**
      * The entry point of a webpack plugin.
@@ -274,7 +274,7 @@ class LynxTemplatePluginImpl {
         const css = cssChunksToMap(assetsInfoByGroups.css
             .map(chunk => compilation.getAsset(chunk.name))
             .filter((v) => !!v)
-            .map(asset => asset.source.source().toString()), cssPlugins);
+            .map(asset => asset.source.source().toString()), cssPlugins, enableCSSSelector);
         const encodeRawData = {
             compilerOptions: {
                 enableFiberArch: true,

package/lib/css/cssChunksToMap.d.ts

@@ -1,5 +1,5 @@
 import type * as CSS from '@lynx-js/css-serializer';
-export declare function cssChunksToMap(cssChunks: string[], plugins: CSS.Plugin[]): {
+export declare function cssChunksToMap(cssChunks: string[], plugins: CSS.Plugin[], enableCSSSelector: boolean): {
     cssMap: Record<string, CSS.LynxStyleNode[]>;
     cssSource: Record<string, string>;
     contentMap: Map<number, string[]>;

package/lib/css/cssChunksToMap.js

@@ -1,9 +1,9 @@
 import { cssToAst } from './ast.js';
 import { debundleCSS } from './debundle.js';
-export function cssChunksToMap(cssChunks, plugins) {
+export function cssChunksToMap(cssChunks, plugins, enableCSSSelector) {
     const cssMap = cssChunks
         .reduce((cssMap, css) => {
-        debundleCSS(css, cssMap);
+        debundleCSS(css, cssMap, enableCSSSelector);
         return cssMap;
     }, new Map());
     return {

package/lib/css/debundle.d.ts

@@ -1 +1 @@
-export declare function debundleCSS(code: string, css: Map<number, string[]>): void;
+export declare function debundleCSS(code: string, css: Map<number, string[]>, enableCSSSelector: boolean): void;

package/lib/css/debundle.js

@@ -6,7 +6,7 @@ import * as cssTree from 'css-tree';
 // It should always has `cssId: 0`.
 const COMMON_CSS = '/common.css';
 const COMMON_CSS_ID = 0;
-export function debundleCSS(code, css) {
+export function debundleCSS(code, css, enableCSSSelector) {
     const ast = cssTree.parse(code);
     const fileKeyToCSSContent = new Map();
     const cssIdToFileKeys = new Map();
@@ -71,7 +71,13 @@ export function debundleCSS(code, css) {
     // TODO: remove /cssId/0.css if not exists in the cssMap
     // For each scoped CSSStyleSheet, we should import the real CSSStyleSheet.
     // So that the styles can be resolved with the scoped cssId.
-    cssIdToFileKeys.forEach((fileKeys, cssId) => {
+    cssIdToFileKeys.forEach((rawFileKeys, cssId) => {
+        let fileKeys = Array.from(rawFileKeys);
+        if (enableCSSSelector === false) {
+            // When enableCSSSelector is false, style rule priority is inversely related to @import order,
+            // requiring reversed imports to maintain correct priority.
+            fileKeys = fileKeys.reverse();
+        }
         emplaceCSSStyleSheet(css, cssId, Array.from(fileKeys).map(fileKey => `@import "${fileKeyToCSSId.get(fileKey)}";`).join('\n'));
     });
 }

package/lib/css/encode.js

@@ -11,7 +11,7 @@ encode = (options) => {
         buffer,
     });
 }) {
-    const css = cssChunksToMap(cssChunks, plugins);
+    const css = cssChunksToMap(cssChunks, plugins, enableCSSSelector);
     const encodeOptions = {
         compilerOptions: {
             // Do not remove this, it will crash :)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/template-webpack-plugin-canary",
-  "version": "0.6.9-canary-20250411-bbcdba12",
+  "version": "0.6.10-canary-20250423-f3afaf6c",
   "description": "Simplifies creation of Lynx template files to serve your webpack bundles",
   "keywords": [
     "webpack",
@@ -43,9 +43,9 @@
     "@microsoft/api-extractor": "7.52.3",
     "@types/css-tree": "^2.3.10",
     "@types/object.groupby": "^1.0.4",
-    "webpack": "^5.98.0",
-    "@lynx-js/test-tools": "0.0.0",
-    "@lynx-js/vitest-setup": "0.0.0"
+    "webpack": "^5.99.5",
+    "@lynx-js/vitest-setup": "0.0.0",
+    "@lynx-js/test-tools": "0.0.0"
   },
   "engines": {
     "node": ">=18"