fix(build): fix css modules out of order issue from libraries

vercel · Sep 13, 2024 · 894eedd · 894eedd
1 parent ae7a6ff
commit 894eedd
Showing 1 changed file with 17 additions and 19 deletions.
diff --git a/packages/next/src/build/webpack/config/blocks/css/index.ts b/packages/next/src/build/webpack/config/blocks/css/index.ts
@@ -254,18 +254,21 @@ export const css = curry(async function css(
   const shouldIncludeExternalCSSImports =
     !!ctx.experimental.craCompat || !!ctx.transpilePackages
 
-  // CSS modules & SASS modules support. They are allowed to be imported in anywhere.
+  /**
+   * CSS modules & SASS modules support.
+   * They are allowed to be imported in anywhere.
+   * CSS Modules must NOT be restricted by package.json `sideEffects`.
+   * Allows for unused stylesheets to be excluded from production builds.
+   */
   fns.push(
-    // CSS Modules should never have side effects. This setting will
-    // allow unused CSS to be removed from the production build.
-    // We ensure this by disallowing `:global()` CSS at the top-level
-    // via the `pure` mode in `css-loader`.
+    /**
+     * CSS Modules
+     */
     loader({
       oneOf: [
         // For app dir, we need to match the specific app layer.
         ctx.hasAppDir
           ? markRemovable({
-              sideEffects: true,
               test: regexCssModules,
               issuerLayer: APP_LAYER_RULE,
               use: [
@@ -285,7 +288,6 @@ export const css = curry(async function css(
             })
           : null,
         markRemovable({
-          sideEffects: true,
           test: regexCssModules,
           issuerLayer: PAGES_LAYER_RULE,
           use: getCssModuleLoader(
@@ -295,17 +297,14 @@ export const css = curry(async function css(
         }),
       ].filter(nonNullable),
     }),
-    // Opt-in support for Sass (using .scss or .sass extensions).
-    // Sass Modules should never have side effects. This setting will
-    // allow unused Sass to be removed from the production build.
-    // We ensure this by disallowing `:global()` Sass at the top-level
-    // via the `pure` mode in `css-loader`.
+    /**
+     * Sass Modules (.scss or .sass)
+     */
     loader({
       oneOf: [
         // For app dir, we need to match the specific app layer.
         ctx.hasAppDir
           ? markRemovable({
-              sideEffects: true,
               test: regexSassModules,
               issuerLayer: APP_LAYER_RULE,
               use: [
@@ -326,7 +325,6 @@ export const css = curry(async function css(
             })
           : null,
         markRemovable({
-          sideEffects: true,
           test: regexSassModules,
           issuerLayer: PAGES_LAYER_RULE,
           use: getCssModuleLoader(
@@ -405,11 +403,11 @@ export const css = curry(async function css(
     const allowedPagesGlobalCSSIssuer = ctx.hasAppDir
       ? undefined
       : shouldIncludeExternalCSSImports
-        ? undefined
-        : {
-            and: [ctx.rootDirectory],
-            not: [/node_modules/],
-          }
+      ? undefined
+      : {
+          and: [ctx.rootDirectory],
+          not: [/node_modules/],
+        }
 
     fns.push(
       loader({