fix(css-loader): correctly set importLoaders (#163)

gravity-ui · Oct 24, 2024 · e28e573 · e28e573
1 parent ee77f8d
commit e28e573
Showing 1 changed file with 44 additions and 36 deletions.
diff --git a/src/common/webpack/config.ts b/src/common/webpack/config.ts
@@ -367,24 +367,23 @@ function createWorkerRule(options: HelperOptions): webpack.RuleSetRule {
 }
 
 function createSassStylesRule(options: HelperOptions): webpack.RuleSetRule {
-    const loaders = getCssLoaders(options);
-
-    loaders.push({
-        loader: require.resolve('resolve-url-loader'),
-        options: {
-            sourceMap: !options.config.disableSourceMapGeneration,
+    const loaders = getCssLoaders(options, [
+        {
+            loader: require.resolve('resolve-url-loader'),
+            options: {
+                sourceMap: !options.config.disableSourceMapGeneration,
+            },
         },
-    });
-
-    loaders.push({
-        loader: require.resolve('sass-loader'),
-        options: {
-            sourceMap: true, // must be always true for work with resolve-url-loader
-            sassOptions: {
-                loadPaths: [paths.appClient],
+        {
+            loader: require.resolve('sass-loader'),
+            options: {
+                sourceMap: true, // must be always true for work with resolve-url-loader
+                sassOptions: {
+                    loadPaths: [paths.appClient],
+                },
             },
         },
-    });
+    ]);
 
     return {
         test: /\.scss$/,
@@ -402,25 +401,38 @@ function createStylesRule(options: HelperOptions): webpack.RuleSetRule {
     };
 }
 
-function getCssLoaders({isEnvDevelopment, isEnvProduction, config}: HelperOptions) {
+function getCssLoaders(
+    {isEnvDevelopment, isEnvProduction, config}: HelperOptions,
+    additionalRules?: webpack.RuleSetUseItem[],
+) {
     const loaders: webpack.RuleSetUseItem[] = [];
 
-    if (isEnvProduction) {
-        loaders.push(MiniCSSExtractPlugin.loader);
-    }
-
-    if (isEnvDevelopment) {
+    if (!config.transformCssWithLightningCss) {
         loaders.push({
-            loader: require.resolve('style-loader'),
+            loader: require.resolve('postcss-loader'),
+            options: {
+                sourceMap: !config.disableSourceMapGeneration,
+                postcssOptions: {
+                    config: false,
+                    plugins: [
+                        [require.resolve('postcss-preset-env'), {enableClientSidePolyfills: false}],
+                    ],
+                },
+            },
         });
     }
 
-    loaders.push({
+    if (Array.isArray(additionalRules) && additionalRules.length > 0) {
+        loaders.push(...additionalRules);
+    }
+
+    const importLoaders = loaders.length;
+    loaders.unshift({
         loader: require.resolve('css-loader'),
         options: {
             esModule: false,
             sourceMap: !config.disableSourceMapGeneration,
-            importLoaders: 2,
+            importLoaders,
             modules: {
                 auto: true,
                 localIdentName: '[name]__[local]--[hash:base64:5]',
@@ -429,20 +441,16 @@ function getCssLoaders({isEnvDevelopment, isEnvProduction, config}: HelperOption
         },
     });
 
-    if (!config.transformCssWithLightningCss) {
-        loaders.push({
-            loader: require.resolve('postcss-loader'),
-            options: {
-                sourceMap: !config.disableSourceMapGeneration,
-                postcssOptions: {
-                    config: false,
-                    plugins: [
-                        [require.resolve('postcss-preset-env'), {enableClientSidePolyfills: false}],
-                    ],
-                },
-            },
+    if (isEnvProduction) {
+        loaders.unshift(MiniCSSExtractPlugin.loader);
+    }
+
+    if (isEnvDevelopment) {
+        loaders.unshift({
+            loader: require.resolve('style-loader'),
         });
     }
+
     return loaders;
 }