PupilTong · pull · Apr 23, 2025 · Apr 23, 2025
diff --git a/.changeset/open-taxis-hear.md b/.changeset/open-taxis-hear.md
@@ -0,0 +1,19 @@
+---
+"@lynx-js/template-webpack-plugin": patch
+---
+
+Fix CSS import order when `enableCSSSelector` is false.
+
+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";
+```
diff --git a/packages/webpack/css-extract-webpack-plugin/src/CssExtractRspackPlugin.ts b/packages/webpack/css-extract-webpack-plugin/src/CssExtractRspackPlugin.ts
@@ -251,6 +251,7 @@ ${RuntimeGlobals.require}.cssHotUpdateList = ${
               const { cssMap } = LynxTemplatePlugin.convertCSSChunksToMap(
                 [content],
                 options.cssPlugins,
+                options.enableCSSSelector,
               );
               const cssDeps = Object.entries(cssMap).reduce<
                 Record<string, string[]>

diff --git a/packages/webpack/template-webpack-plugin/etc/template-webpack-plugin.api.md b/packages/webpack/template-webpack-plugin/etc/template-webpack-plugin.api.md
@@ -41,7 +41,7 @@ declare namespace CSS {
 // Warning: (ae-missing-release-tag) "cssChunksToMap" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-function cssChunksToMap(cssChunks: string[], plugins: CSS_2.Plugin[]): {
+function cssChunksToMap(cssChunks: string[], plugins: CSS_2.Plugin[], enableCSSSelector: boolean): {
     cssMap: Record<string, CSS_2.LynxStyleNode[]>;
     cssSource: Record<string, string>;
     contentMap: Map<number, string[]>;
@@ -84,7 +84,7 @@ export interface LynxEncodePluginOptions {
 export class LynxTemplatePlugin {
     constructor(options?: LynxTemplatePluginOptions | undefined);
     apply(compiler: Compiler): void;
-    static convertCSSChunksToMap(cssChunks: string[], plugins: CSS_2.Plugin[]): {
+    static convertCSSChunksToMap(cssChunks: string[], plugins: CSS_2.Plugin[], enableCSSSelector: boolean): {
         cssMap: Record<string, CSS_2.LynxStyleNode[]>;
         cssSource: Record<string, string>;
     };

diff --git a/packages/webpack/template-webpack-plugin/src/LynxTemplatePlugin.ts b/packages/webpack/template-webpack-plugin/src/LynxTemplatePlugin.ts
@@ -435,11 +435,12 @@ export class LynxTemplatePlugin {
   static convertCSSChunksToMap(
     cssChunks: string[],
     plugins: CSS.Plugin[],
+    enableCSSSelector: boolean,
   ): {
     cssMap: Record<string, CSS.LynxStyleNode[]>;
     cssSource: Record<string, string>;
   } {
-    return cssChunksToMap(cssChunks, plugins);
+    return cssChunksToMap(cssChunks, plugins, enableCSSSelector);
   }
 
   /**
@@ -761,6 +762,7 @@ class LynxTemplatePluginImpl {
         .filter((v): v is Asset => !!v)
         .map(asset => asset.source.source().toString()),
       cssPlugins,
+      enableCSSSelector,
     );
     const encodeRawData: EncodeRawData = {
       compilerOptions: {

diff --git a/packages/webpack/template-webpack-plugin/src/css/cssChunksToMap.ts b/packages/webpack/template-webpack-plugin/src/css/cssChunksToMap.ts
@@ -6,14 +6,18 @@ import type * as CSS from '@lynx-js/css-serializer';
 import { cssToAst } from './ast.js';
 import { debundleCSS } from './debundle.js';
 
-export function cssChunksToMap(cssChunks: string[], plugins: CSS.Plugin[]): {
+export function cssChunksToMap(
+  cssChunks: string[],
+  plugins: CSS.Plugin[],
+  enableCSSSelector: boolean,
+): {
   cssMap: Record<string, CSS.LynxStyleNode[]>;
   cssSource: Record<string, string>;
   contentMap: Map<number, string[]>;
 } {
   const cssMap = cssChunks
     .reduce<Map<number, string[]>>((cssMap, css) => {
-      debundleCSS(css, cssMap);
+      debundleCSS(css, cssMap, enableCSSSelector);
       return cssMap;
     }, new Map());
 

diff --git a/packages/webpack/template-webpack-plugin/src/css/debundle.ts b/packages/webpack/template-webpack-plugin/src/css/debundle.ts
@@ -9,7 +9,11 @@ import * as cssTree from 'css-tree';
 const COMMON_CSS = '/common.css';
 const COMMON_CSS_ID = 0;
 
-export function debundleCSS(code: string, css: Map<number, string[]>): void {
+export function debundleCSS(
+  code: string,
+  css: Map<number, string[]>,
+  enableCSSSelector: boolean,
+): void {
   const ast = cssTree.parse(code);
 
   const fileKeyToCSSContent = new Map<string, string>();
@@ -91,7 +95,13 @@ export function debundleCSS(code: string, css: Map<number, string[]>): void {
 
   // 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,

diff --git a/packages/webpack/template-webpack-plugin/src/css/encode.ts b/packages/webpack/template-webpack-plugin/src/css/encode.ts
@@ -52,7 +52,7 @@ export async function encodeCSS(
     });
   },
 ): Promise<Buffer> {
-  const css = cssChunksToMap(cssChunks, plugins);
+  const css = cssChunksToMap(cssChunks, plugins, enableCSSSelector);
 
   const encodeOptions = {
     compilerOptions: {