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

piratetaco · 2024-09-13T20:19:58Z

For Contributors

sideEffects has many rich options besides true and false, and these were erroneously locked to true for css modules in v14.2.0.

I have verified this fixes out of order css from libraries in the repro linked in the issue below.

Regression was introduced in this PR, but it should not be limited to false, either.

This fix should likely be applied to loaders for global styles, too. But I haven't confirmed those yet. Many valid patterns other than true for limited-fashion sideEffects like sideEffects: ['**/*.css']

This is desperately needed to be backported to v14 as well.

Fixing a bug

Related Inconsistent CSS resolution order #64921 (unsure if fully fixes)

ijjk · 2024-09-13T20:20:21Z

Allow CI Workflow Run

approve CI run for commit: 894eedd

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

samcx · 2024-09-13T21:58:58Z

@piratetaco Thank you for submitting a PR!

Is it possible to also add a test case for this?

piratetaco · 2024-09-16T14:58:56Z

@piratetaco Thank you for submitting a PR!

Is it possible to also add a test case for this?

yeah of course, though I'm not quite sure where this functionality is tested today. If you could point me to where in the tree, I'd be happy to work through it!

samcx · 2024-09-18T21:42:24Z

@piratetaco The e2e/app-dir/css-order is probably a good directory!

ijjk · 2024-09-19T21:44:08Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
buildDuration	19.2s	20.1s	⚠️ +836ms
buildDurationCached	9.7s	8.4s	N/A
nodeModulesSize	359 MB	358 MB	N/A
nextStartRea..uration (ms)	459ms	458ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
4394.HASH.js gzip	169 B	168 B	N/A
5731-HASH.js gzip	42.8 kB	42.5 kB	N/A
847-HASH.js gzip	5.25 kB	5.25 kB	N/A
fdaa3b51-HASH.js gzip	52.8 kB	52.6 kB	N/A
framework-HASH.js gzip	57.4 kB	57.4 kB	N/A
main-app-HASH.js gzip	225 B	225 B	✓
main-HASH.js gzip	32.6 kB	32.6 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	225 B	225 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
polyfills-HASH.js gzip	39.4 kB	31 kB	N/A
Overall change	0 B	0 B	✓

Client Pages

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
_app-HASH.js gzip	194 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	509 B	510 B	N/A
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	266 B	265 B	N/A
head-HASH.js gzip	365 B	360 B	N/A
hooks-HASH.js gzip	389 B	391 B	N/A
image-HASH.js gzip	4.4 kB	4.4 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.82 kB	2.81 kB	N/A
routerDirect..HASH.js gzip	328 B	327 B	N/A
script-HASH.js gzip	392 B	396 B	N/A
withRouter-HASH.js gzip	324 B	324 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	890 B	890 B	✓

Client Build Manifests

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
_buildManifest.js gzip	745 B	749 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
index.html gzip	524 B	522 B	N/A
link.html gzip	539 B	535 B	N/A
withRouter.html gzip	520 B	518 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	179 kB	180 kB	⚠️ +537 B
Overall change	179 kB	180 kB	⚠️ +537 B

Middleware size

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
middleware-b..fest.js gzip	667 B	672 B	N/A
middleware-r..fest.js gzip	156 B	156 B	✓
middleware.js gzip	29.8 kB	29.8 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	1 kB	1 kB	✓

Next Runtimes

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
973-experime...dev.js gzip	322 B	322 B	✓
973.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	318 kB	317 kB	N/A
app-page-exp..prod.js gzip	126 kB	125 kB	N/A
app-page-tur..prod.js gzip	139 kB	139 kB	N/A
app-page-tur..prod.js gzip	134 kB	134 kB	N/A
app-page.run...dev.js gzip	308 kB	308 kB	N/A
app-page.run..prod.js gzip	121 kB	121 kB	N/A
app-route-ex...dev.js gzip	32.1 kB	31.2 kB	N/A
app-route-ex..prod.js gzip	21.7 kB	21.1 kB	N/A
app-route-tu..prod.js gzip	21.7 kB	21.1 kB	N/A
app-route-tu..prod.js gzip	21.5 kB	20.9 kB	N/A
app-route.ru...dev.js gzip	33.7 kB	32.9 kB	N/A
app-route.ru..prod.js gzip	21.5 kB	20.9 kB	N/A
pages-api-tu..prod.js gzip	9.62 kB	9.62 kB	✓
pages-api.ru...dev.js gzip	11.5 kB	11.5 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 kB	✓
pages-turbo...prod.js gzip	20.8 kB	20.8 kB	✓
pages.runtim...dev.js gzip	26.4 kB	26.4 kB	✓
pages.runtim..prod.js gzip	20.8 kB	20.8 kB	✓
server.runti..prod.js gzip	57.9 kB	57.7 kB	N/A
Overall change	99.3 kB	99.3 kB	✓

build cache

	vercel/next.js canary	piratetaco/next.js fix/css-modules-in-packages	Change
0.pack gzip	1.65 MB	1.65 MB	N/A
index.pack gzip	132 kB	131 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 5506: /***/ (
+    /***/ 191: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(3203);
+          return __webpack_require__(3846);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6912: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3396: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(4057)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3163)
+        __webpack_require__(85)
       );
-      const _getimgprops = __webpack_require__(525);
-      const _imageconfig = __webpack_require__(3973);
-      const _imageconfigcontextsharedruntime = __webpack_require__(59);
-      const _warnonce = __webpack_require__(3546);
-      const _routercontextsharedruntime = __webpack_require__(7933);
+      const _getimgprops = __webpack_require__(8926);
+      const _imageconfig = __webpack_require__(2844);
+      const _imageconfigcontextsharedruntime = __webpack_require__(3603);
+      const _warnonce = __webpack_require__(6702);
+      const _routercontextsharedruntime = __webpack_require__(4628);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1551)
+        __webpack_require__(6882)
       );
-      const _usemergedref = __webpack_require__(3472);
+      const _usemergedref = __webpack_require__(273);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 3472: /***/ (module, exports, __webpack_require__) => {
+    /***/ 273: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 525: /***/ (
+    /***/ 8926: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3546);
-      const _imageblursvg = __webpack_require__(9566);
-      const _imageconfig = __webpack_require__(3973);
+      const _warnonce = __webpack_require__(6702);
+      const _imageblursvg = __webpack_require__(4305);
+      const _imageconfig = __webpack_require__(2844);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 9566: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4305: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -885,7 +885,7 @@
       /***/
     },
 
-    /***/ 7099: /***/ (
+    /***/ 6730: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -912,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(9608);
-      const _getimgprops = __webpack_require__(525);
-      const _imagecomponent = __webpack_require__(6912);
+      const _getimgprops = __webpack_require__(8926);
+      const _imagecomponent = __webpack_require__(3396);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1551)
+        __webpack_require__(6882)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -947,7 +947,7 @@
       /***/
     },
 
-    /***/ 1551: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6882: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -982,7 +982,7 @@
       /***/
     },
 
-    /***/ 3203: /***/ (
+    /***/ 3846: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -999,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(9068);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-94e652d5-20240912_re_znt3zgjh37lulhfy3loxpvgybi/node_modules/next/image.js
-      var next_image = __webpack_require__(2516);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-94e652d5-20240912_re_qwfzaq3kqc33tronlef5jk5qey/node_modules/next/image.js
+      var next_image = __webpack_require__(6631);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1030,12 +1030,12 @@
       /***/
     },
 
-    /***/ 2516: /***/ (
+    /***/ 6631: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(7099);
+      module.exports = __webpack_require__(6730);
 
       /***/
     },
@@ -1045,7 +1045,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(5506)
+      __webpack_exec__(191)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 5731-HASH.js

Diff too large to display

Diff for fdaa3b51-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for polyfills-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: e7fa76b

ijjk · 2024-09-19T22:03:19Z

Failing test suites

Commit: e7fa76b

TURBOPACK=1 pnpm test-start test/e2e/app-dir/css-order/css-order.test.ts (turbopack)

css-order turbo > should load correct styles on vendor-side-effects-array
css-order turbo > should load correct styles on vendor-side-effects-false

Expand output

● css-order turbo › should load correct styles on vendor-side-effects-array

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(254, 0, 0)"
Received: "rgb(0, 0, 255)"

  372 |             .waitForElementByCss(pageInfo.selector)
  373 |             .getComputedCss('color')
> 374 |         ).toBe(pageInfo.color)
      |           ^
  375 |         await browser.close()
  376 |       })
  377 |     }

  at Object.toBe (e2e/app-dir/css-order/css-order.test.ts:374:11)

● css-order turbo › should load correct styles on vendor-side-effects-false

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(252, 0, 0)"
Received: "rgb(0, 0, 255)"

  372 |             .waitForElementByCss(pageInfo.selector)
  373 |             .getComputedCss('color')
> 374 |         ).toBe(pageInfo.color)
      |           ^
  375 |         await browser.close()
  376 |       })
  377 |     }

  at Object.toBe (e2e/app-dir/css-order/css-order.test.ts:374:11)

Read more about building and testing Next.js in contributing.md.

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

894eedd

ijjk added the type: next label Sep 13, 2024

samcx added the CI approved Approve running CI for fork label Sep 18, 2024

test case expand pt 1

7cb095b

ijjk added the tests label Sep 19, 2024

format

95dd1ec

piratetaco added 5 commits September 19, 2024 17:05

make div anchor to click

49f71f9

sp

0cdeda7

children

8f1a105

fit existing one test per page format

0cd9bc6

dont group these distinct instances

e7fa76b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

piratetaco commented Sep 13, 2024 •

edited

Loading

ijjk commented Sep 13, 2024 •

edited by sokra

Loading

samcx commented Sep 13, 2024

piratetaco commented Sep 16, 2024

samcx commented Sep 18, 2024

ijjk commented Sep 19, 2024 •

edited

Loading

ijjk commented Sep 19, 2024 •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

piratetaco commented Sep 13, 2024 • edited Loading

For Contributors

Fixing a bug

ijjk commented Sep 13, 2024 • edited by sokra Loading

samcx commented Sep 13, 2024

piratetaco commented Sep 16, 2024

samcx commented Sep 18, 2024

ijjk commented Sep 19, 2024 • edited Loading

Stats from current PR

ijjk commented Sep 19, 2024 • edited Loading

Failing test suites

piratetaco commented Sep 13, 2024 •

edited

Loading

ijjk commented Sep 13, 2024 •

edited by sokra

Loading

ijjk commented Sep 19, 2024 •

edited

Loading

ijjk commented Sep 19, 2024 •

edited

Loading