HMR re-rendering causes duplicate styles to inject

[JarrodMFlesch]

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Wed Nov 09 2022 10:54:33 GMT-0800 (Pacific Standard Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.19
  pnpm: 7.13.6
Relevant packages:
  next: 13.0.3-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Version 1.45.116 Chromium: 107.0.5304.91 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

yarn dev

Describe the Bug

SCSS modules cause style duplication with HMR and brings computer to a halt after a while, especially after your component tree grows.

Expected Behavior

When a server component re-renders it should not inject duplicate styles for every component in its tree.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://stackblitz.com/edit/vercel-next-js-eadywh?file=app%2Fpage.tsx,app%2Flayout.tsx,app%2Findex.module.scss,components%2Findex.module.scss,components%2FChild.tsx

To Reproduce

Edit any file, without saving immediately, open your elements tab and watch the styles grow. You can also look into the head of the document and see the stylesheets being appended there.

[cibulka]

This does happen for .module.css files as well (not just .scss).

Edit: Made a quick test if this is not caused by some redirect error in middleware (which I use, due to the lack of i18n support in Next.js 13). It's not, styles are being wrongly injected to the header even with the middleware disabled.

[cibulka]

Also it seems that the same issues apply to the CSS files generated by @next/font package. In Developer tools I see the following injected to header about 10 times:

<link rel="preload" as="style" href="http://localhost:3000/_next/static/css/node_modules_next_font_google_target_css_path_src_helpers_getFontClassName_ts_import_Source_S-3e50df.css?1668069406765">

I use it as described in the beta docs - hopefully I understood it correctly.

helpers/getFontClassNames.ts:

import { Source_Code_Pro, Source_Sans_3 } from '@next/font/google';

const sans = Source_Sans_3({
  style: ['normal', 'italic'],
});

export const classNameSans = sans.className;

components/Component.tsx:

import { classNameSans } from 'helpers/getFontClassNames'

const <Component className={classNameSans} />;

[cibulka]

[EDIT]: Global CSS gets duplicated as well. Maybe it's just not as often, so it gets a bit more usable.

And lastly, for anyone who's looking for a workaround: it seems one can use good old global CSS without problems. So you can change your CSS modules to global imports.

So you can replace this:

import styles from 'styles/component.module.css'

<Component className={styles.localClassName} />

with this:

import 'styles/component.css'

<Component className="globalClassName" />

Workaround for Google fonts that I'm using at the moment is just to import the font in the global CSS file as we all did in 2010s. :)

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital@1&family=Spline+Sans+Mono:wght@400;700&display=swap');

.font-sans { font-family: Noto Sans Display, sans }
.font-mono { font-family: Spline Sans Mono, monospace }

Hopefully this will be fixed soon.

[Hardel-DW]

I have the problem with simple css, scss and tailwind files. When there is a hot-reload all styles are duplicated without exception.

With NextJS 13.0.3

[cibulka]

There is also a problem with the order of injection that happens only when deployed.

That means that npm run dev and npm start does one type of CSS order, the production deployed to Vercel does another.

That pretty much means a broken site about which you learn only after you deploy it. :(

I'll try to post a link to the test repo sometime next week.

[JarrodMFlesch]

@cibulka, I have also run into this, we just built and launched the new Payload CMS website, and have noticed a few things like that here and there. Not entirely sure how to repro that with a concrete example.

[TommySorensen]

FYI: This issue is also in latest v13.0.3

[isaac1400]

FYI: This issue is also in latest v13.0.3

I am playing around with the 13.0.3 and this bug still happens

[transitive-bullshit]

Also repros with v13.0.4 via https://github.com/transitive-bullshit/next-movie

Specifically, this makes next dev really hard to work with because you can't just toggle styles in devtools since there are so many duplicates.

[johanbaath]

Also repros with v13.0.4 via https://github.com/transitive-bullshit/next-movie

Specifically, this makes next dev really hard to work with because you can't just toggle styles in devtools since there are so many duplicates.

Same issue in 13.0.4 for me. It slows down Chrome DevTools a lot when duplicating all of the Tailwind styles, and I need to manually refresh the page.

[DomVournias]

Thinking of reverting to 12 :/, any possible solutions in this issue?

[rentalhost]

@ijjk Can you help here?

[JarrodMFlesch]

I'm not sure we need to tag maintainers, they are probably aware of this issue. I assume it is not a simple fix or else they would have shipped it.

Can't forget this is beta!

[choutkamartin]

@JarrodMFlesch Does is happen only with the new app folder or not? Thank you

Just checked, only in the experimental app folder.

[balazsorban44]

Hi, based on the original reproduction this has been fixed in the latest canary, please give it a try and let us know! If you experience a similar issue, please open a new issue with a reproduction. Thanks!

[rentalhost]

@balazsorban44 I have updated to 13.0.7-canary.0 and the problem still exists.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.