Add Additional Test Case for CSS Order in Dev #12007

sparkertime · 2020-04-18T17:31:45Z

This is a failing test that demonstrates the problem in issue #12004 . Patching the issue is beyond my ability but I hope this provides a head start to the maintainers.

ijjk · 2020-04-18T17:37:46Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	10.8s	10.9s	⚠️ +8ms
nodeModulesSize	55.5 MB	55.5 MB	✓

Page Load Tests Overall decrease ⚠️

	zeit/next.js canary	sparkertime/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.764	1.801	⚠️ +0.04
/ avg req/sec	1416.85	1387.78	-29.07
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	0.876	0.993	⚠️ +0.12
/error-in-render avg req/sec	2854.81	2518.3	-336.51

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..5e5e.js gzip	10.3 kB	10.3 kB	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.HASH.js gzip	39 kB	39 kB	✓
Overall change	56.7 kB	56.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.79 kB	4.79 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.85 kB	6.85 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.2 kB	26.2 kB	✓
Overall change	26.2 kB	26.2 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.23 kB	1.23 kB	✓
_error.js gzip	3.12 kB	3.12 kB	✓
hooks.js gzip	663 B	663 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	280 B	280 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.85 kB	7.85 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	598 B	598 B	✓
_error.module.js gzip	2.09 kB	2.09 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	279 B	279 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	sparkertime/next.js canary	Change
index.html gzip	927 B	927 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	11.4s	11.6s	⚠️ +206ms
nodeModulesSize	55.5 MB	55.5 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..5e5e.js gzip	10.3 kB	10.3 kB	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.HASH.js gzip	39 kB	39 kB	✓
Overall change	56.7 kB	56.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.79 kB	4.79 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.85 kB	6.85 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.2 kB	26.2 kB	✓
Overall change	26.2 kB	26.2 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.23 kB	1.23 kB	✓
_error.js gzip	3.12 kB	3.12 kB	✓
hooks.js gzip	663 B	663 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	280 B	280 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.85 kB	7.85 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	598 B	598 B	✓
_error.module.js gzip	2.09 kB	2.09 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	279 B	279 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	sparkertime/next.js canary	Change
_error.js	558 kB	558 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	558 kB	558 kB	✓
link.js	594 kB	594 kB	✓
routerDirect.js	587 kB	587 kB	✓
withRouter.js	587 kB	587 kB	✓
Overall change	2.89 MB	2.89 MB	✓

ijjk · 2020-04-18T17:52:50Z

Failing test suites

test/integration/css/test/index.test.js

CSS Support > Ordering with Global CSS and Modules (dev) > should have the correct color (css ordering) during hot reloads

Expand output

● CSS Support › Ordering with Global CSS and Modules (dev) › should have the correct color (css ordering) during hot reloads

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `CSS Support Ordering with Global CSS and Modules (dev) should have the correct color (css ordering) during hot reloads 2`

Snapshot: "rgb(0, 0, 255)"
Received: "rgb(255, 0, 0)"

  848 |             `window.getComputedStyle(document.querySelector('#blueText')).color`
  849 |           )
> 850 |           expect(refreshedColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
      |                                  ^
  851 |         } finally {
  852 |           cssFile.restore()
  853 |         }

  at Object.<anonymous> (integration/css/test/index.test.js:850:34)

sparkertime · 2020-04-21T12:52:46Z

@ijjk @Timer I pushed a commit which fixes the issue, but I could use refactoring help before that hits a release. While I tried to extract a common function instead of copy/pasting the implementation, I struggled with errors around which variables were declared and had values in the browser during hot reloads.

ijjk · 2020-04-21T12:57:09Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	11.6s	12.5s	⚠️ +884ms
nodeModulesSize	55.6 MB	55.6 MB	⚠️ +1.3 kB

Page Load Tests Overall decrease ⚠️

	zeit/next.js canary	sparkertime/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.943	2.024	⚠️ +0.08
/ avg req/sec	1286.84	1234.98	-51.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.028	1.077	⚠️ +0.05
/error-in-render avg req/sec	2432.01	2320.41	-111.6

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..5e5e.js gzip	10.3 kB	10.3 kB	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.HASH.js gzip	39 kB	39 kB	✓
Overall change	56.7 kB	56.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.79 kB	4.79 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.85 kB	6.85 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.2 kB	26.2 kB	✓
Overall change	26.2 kB	26.2 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.23 kB	1.23 kB	✓
_error.js gzip	3.12 kB	3.12 kB	✓
hooks.js gzip	663 B	663 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	280 B	280 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.85 kB	7.85 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	598 B	598 B	✓
_error.module.js gzip	2.09 kB	2.09 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	279 B	279 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	sparkertime/next.js canary	Change
index.html gzip	929 B	929 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	926 B	926 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General Overall increase ⚠️

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	12.6s	12.5s	-18ms
nodeModulesSize	55.6 MB	55.6 MB	⚠️ +1.3 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..5e5e.js gzip	10.3 kB	10.3 kB	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.HASH.js gzip	39 kB	39 kB	✓
Overall change	56.7 kB	56.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.79 kB	4.79 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.85 kB	6.85 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.2 kB	26.2 kB	✓
Overall change	26.2 kB	26.2 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.23 kB	1.23 kB	✓
_error.js gzip	3.12 kB	3.12 kB	✓
hooks.js gzip	663 B	663 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	280 B	280 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.85 kB	7.85 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	598 B	598 B	✓
_error.module.js gzip	2.09 kB	2.09 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	279 B	279 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	sparkertime/next.js canary	Change
_error.js	558 kB	558 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	558 kB	558 kB	✓
link.js	595 kB	595 kB	✓
routerDirect.js	587 kB	587 kB	✓
withRouter.js	587 kB	587 kB	✓
Overall change	2.89 MB	2.89 MB	✓

ijjk · 2020-04-21T13:07:31Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	12.3s	12.1s	-253ms
nodeModulesSize	55.6 MB	55.6 MB	⚠️ +1.3 kB

Page Load Tests Overall increase ✓

	zeit/next.js canary	sparkertime/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.017	2.043	⚠️ +0.03
/ avg req/sec	1239.34	1223.82	-15.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.111	1.047	-0.06
/error-in-render avg req/sec	2251.02	2387.32	⚠️ +136.3

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..5e5e.js gzip	10.3 kB	10.3 kB	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.HASH.js gzip	39 kB	39 kB	✓
Overall change	56.7 kB	56.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.79 kB	4.79 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.85 kB	6.85 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.2 kB	26.2 kB	✓
Overall change	26.2 kB	26.2 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.23 kB	1.23 kB	✓
_error.js gzip	3.12 kB	3.12 kB	✓
hooks.js gzip	663 B	663 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	280 B	280 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.85 kB	7.85 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	598 B	598 B	✓
_error.module.js gzip	2.09 kB	2.09 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	279 B	279 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	sparkertime/next.js canary	Change
index.html gzip	929 B	929 B	✓
link.html gzip	937 B	937 B	✓
withRouter.html gzip	926 B	926 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General Overall increase ⚠️

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	12.7s	12.7s	⚠️ +58ms
nodeModulesSize	55.6 MB	55.6 MB	⚠️ +1.3 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..5e5e.js gzip	10.3 kB	10.3 kB	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.a1..NSE.txt gzip	220 B	220 B	✓
framework.HASH.js gzip	39 kB	39 kB	✓
Overall change	56.7 kB	56.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.79 kB	4.79 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.85 kB	6.85 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.2 kB	26.2 kB	✓
Overall change	26.2 kB	26.2 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.23 kB	1.23 kB	✓
_error.js gzip	3.12 kB	3.12 kB	✓
hooks.js gzip	663 B	663 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	280 B	280 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.85 kB	7.85 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	598 B	598 B	✓
_error.module.js gzip	2.09 kB	2.09 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	279 B	279 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	sparkertime/next.js canary	Change
_error.js	558 kB	558 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	558 kB	558 kB	✓
link.js	595 kB	595 kB	✓
routerDirect.js	587 kB	587 kB	✓
withRouter.js	587 kB	587 kB	✓
Overall change	2.89 MB	2.89 MB	✓

Failing test to demonstrate issue #12004

8c95bb0

sparkertime requested review from ijjk, lfades, Timer and timneutkens as code owners April 18, 2020 17:31

Timer modified the milestones: 9.3.6, 9.3.x Apr 18, 2020

Timer modified the milestones: 9.3.x, 9.3.6 Apr 19, 2020

Separate position for global vs client scripts. Fixes #12004

37a8cc4

sparkertime changed the title ~~Failing test to demonstrate issue #12004~~ Explicitly load Global CSS styles before Client CSS modules. Fixes #12004 Apr 21, 2020

Merge branch 'canary' into canary

dd28ca8

Revert client.ts

64db2ad

Timer changed the title ~~Explicitly load Global CSS styles before Client CSS modules. Fixes #12004~~ Add additional test case Apr 22, 2020

Timer changed the title ~~Add additional test case~~ Add Additional Test Case for CSS Order in Dev Apr 22, 2020

Timer and others added 2 commits April 21, 2020 23:56

Revert global.ts

c27762b

Merge branch 'canary' into canary

351583c

ijjk approved these changes Apr 22, 2020

View reviewed changes

Timer approved these changes Apr 22, 2020

View reviewed changes

Timer added the ready to land label Apr 22, 2020

Timer merged commit 906da4c into vercel:canary Apr 22, 2020

This was referenced May 1, 2020

[Snyk] Upgrade next from 9.3.5 to 9.3.6 anephenix/ui#7

Closed

[Snyk] Upgrade next from 9.3.5 to 9.3.6 nrako/nrako.com#72

Closed

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Additional Test Case for CSS Order in Dev #12007

Add Additional Test Case for CSS Order in Dev #12007

sparkertime commented Apr 18, 2020

ijjk commented Apr 18, 2020

ijjk commented Apr 18, 2020

sparkertime commented Apr 21, 2020 •

edited

ijjk commented Apr 21, 2020

ijjk commented Apr 21, 2020

Add Additional Test Case for CSS Order in Dev #12007

Add Additional Test Case for CSS Order in Dev #12007

Conversation

sparkertime commented Apr 18, 2020

ijjk commented Apr 18, 2020

Stats from current PR

ijjk commented Apr 18, 2020

Failing test suites

sparkertime commented Apr 21, 2020 • edited

ijjk commented Apr 21, 2020

Stats from current PR

ijjk commented Apr 21, 2020

Stats from current PR

sparkertime commented Apr 21, 2020 •

edited