Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix CSS Module HMR #12177

Merged
merged 4 commits into from
Apr 25, 2020
Merged

Fix CSS Module HMR #12177

merged 4 commits into from
Apr 25, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Apr 24, 2020

This re-enables the tests for CSS Module HMR support now that it should be working.

@Timer Timer added this to the 9.3.6 milestone Apr 24, 2020
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk
Copy link
Member

ijjk commented Apr 24, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
buildDuration 13.4s 13.2s -215ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +10.4 kB
Page Load Tests Overall increase ✓
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.319 2.288 -0.03
/ avg req/sec 1078.16 1092.79 ⚠️ +14.63
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.322 1.286 -0.04
/error-in-render avg req/sec 1890.75 1943.74 ⚠️ +52.99
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
main-HASH.js gzip 6.25 kB 6.25 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..45d6.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 Timer/next.js hotfix/css-module-hmr 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.87 kB 6.87 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr Change
index.html gzip 929 B 929 B ✓
link.html gzip 939 B 939 B ✓
withRouter.html gzip 925 B 925 B ✓
Overall change 2.79 kB 2.79 kB ✓
Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
buildDuration 13.8s 14.1s ⚠️ +326ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +10.4 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
main-HASH.js gzip 6.25 kB 6.25 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..45d6.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 Timer/next.js hotfix/css-module-hmr 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.87 kB 6.87 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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
Copy link
Member

ijjk commented Apr 24, 2020

Failing test suites

test/integration/scss-modules/test/index.test.js

  • Can hot reload CSS Module without losing state > should update CSS color without remounting
Expand output

● Can hot reload CSS Module without losing state › should update CSS color without remounting 

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Can hot reload CSS Module without losing state should update CSS color without remounting <input> 2`

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

  224 |         `window.getComputedStyle(document.querySelector('#verify-red')).color`
  225 |       )
> 226 |       expect(refreshedColor).toMatchInlineSnapshot(`"rgb(128, 0, 128)"`)
      |                              ^
  227 | 
  228 |       // ensure text remained
  229 |       expect(await browser.elementById('text-input').getValue()).toBe(

  at Object.<anonymous> (integration/scss-modules/test/index.test.js:226:30)

@ijjk
Copy link
Member

ijjk commented Apr 24, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
buildDuration 13.5s 13.4s -52ms
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +10.4 kB
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.154 2.286 ⚠️ +0.13
/ avg req/sec 1160.55 1093.71 -66.84
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.257 1.435 ⚠️ +0.18
/error-in-render avg req/sec 1988.68 1742.31 -246.37
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
main-HASH.js gzip 6.25 kB 6.25 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..45d6.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 Timer/next.js hotfix/css-module-hmr 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.87 kB 6.87 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr Change
index.html gzip 929 B 929 B ✓
link.html gzip 939 B 939 B ✓
withRouter.html gzip 925 B 925 B ✓
Overall change 2.79 kB 2.79 kB ✓
Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
buildDuration 14.5s 12.8s -1.8s
nodeModulesSize 55.2 MB 55.2 MB ⚠️ +10.4 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/css-module-hmr Change
main-HASH.js gzip 6.25 kB 6.25 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..45d6.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 Timer/next.js hotfix/css-module-hmr 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.87 kB 6.87 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 Timer/next.js hotfix/css-module-hmr 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 ✓

@timneutkens timneutkens merged commit fcc6d7d into vercel:canary Apr 25, 2020
@Timer Timer deleted the hotfix/css-module-hmr branch April 25, 2020 17:48
This was referenced May 1, 2020
Closed
Closed
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@Timer @rokinsky
Fix CSS Module HMR (vercel#12177)
c9e5117
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.3.6
Development

Successfully merging this pull request may close these issues.
3 participants
@Timer @ijjk @timneutkens