next.js icon indicating copy to clipboard operation
next.js copied to clipboard

CSS is not removed from browser when removed in css file with HMR

Open alexanderalmstrom opened this issue 2 years ago • 0 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
Binaries:
  Node: 18.10.0
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.2
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 107.0.5304.87

How are you deploying your application? (if relevant)

No response

Describe the Bug

When adding css in for example the global.css file the styles is applied as expected with HMR. But when removing the css the styles is still present in the browser. This only happens in next dev and when styles is injected with HMR. The page needs to be refreshed for the css to be removed.

Expected Behavior

The css should be removed from the browser then it's removed from the css file.

Link to reproduction

https://github.com/alexanderalmstrom/next13-tailwind

To Reproduce

  1. Add some css to app/global.css for example setting a background or text color on html or body.
  2. Remove the css from global.css.

alexanderalmstrom avatar Oct 30 '22 23:10 alexanderalmstrom