Duplication of CSS rules #42082

whiteand · 2022-10-28T19:35:47Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #58-Ubuntu SMP Thu Oct 13 08:03:55 UTC 2022
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: 7.13.0
Relevant packages:
  next: 14.2.0-canary.21
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 106.0.5249.119

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Page has different styling depending on HOW we get to the page.

When we go to the page from other page - we get one style.
When we refresh page we have different color.

The only difference is "Does link to the /lazy page was rendered before rendering /to page or not"

When link to /lazy page is not rendered before. /to page has appropriate styles with red background.
When link to /lazy page is rendered before. /to page will have inappropriate styles.

Expected Behavior

/to page should have exact same styles regardless of how we go to this page

Link to reproduction

https://github.com/whiteand/next-js-css-order-bug

To Reproduce

Steps to reproduce:

Go to https://next-js-css-order-bug.vercel.app/from
Click on "Page without link to Lazy"
You will be redirected to the "/to" page
There you will see "Red background" text on the white background
Refresh page
You see the same page but background become Red.

I expect that regardless of the ways we go to the /to page background will be red.

The text was updated successfully, but these errors were encountered:

whiteand · 2022-11-04T11:46:02Z

In Next.js v13.0.2 still not fixed

whiteand · 2022-12-01T14:49:32Z

Still not fixed in next@13.0.6-canary.2

whiteand · 2023-01-06T20:08:52Z

Still not fixed in next@13.1.2-canary.1

whiteand · 2023-01-16T09:13:31Z

Still not fixed in next@13.1.3-canary.0

uaeio · 2023-01-18T13:58:52Z

Still not fixed in next@13.1.3-canary.4

uaeio · 2023-01-26T08:57:52Z

Still not fixed in next@13.1.6-canary.1

whiteand · 2023-01-31T15:48:15Z

still not fixed in next@13.1.7-canary.0

whiteand · 2023-02-13T08:40:21Z

still not fixed in next@13.1.7-canary.10

uaeio · 2023-03-02T23:37:42Z

Still not fixed in next@13.2.4-canary.0

uaeio · 2023-03-14T13:28:00Z

Still not fixed in next@13.2.5-canary.3

uaeio · 2023-03-22T15:59:05Z

Still not fixed in next@13.2.5-canary.12

whiteand · 2023-04-08T11:55:22Z

Still not fixed in next@13.3.1-canary.3

whiteand · 2023-04-13T14:51:13Z

Still not fixed in 13.3.1-canary.6

uaeio · 2023-07-21T06:26:41Z

Still not fixed in 13.4.11-canary.2

ananevandrei11 · 2023-08-07T16:13:37Z

Still not fixed 13.1.6

nodegin · 2023-09-08T21:37:16Z

This is breaking my tailwind rules, please fix it

whiteand · 2023-09-11T08:02:32Z

Still not working in: 13.4.20-canary.23

Rudi-Batubara · 2023-09-29T08:31:48Z

Still not fixed in: v13.5.3

whiteand · 2023-10-13T17:04:45Z

Still not fixed in next@13.5.5-canary.12

doug-stewart · 2023-11-01T22:43:42Z

Still experiencing it in 14.0.1.

whiteand · 2023-12-04T07:46:14Z

Still not fixed in 14.0.4-canary.37

doug-stewart · 2023-12-18T08:08:55Z

For anyone who comes to this but I can at least explain how I "solved" it in my projects.

My team uses Bulletproof React's file structure and as part of that all of our feature folders used to use index.ts files for easy importing and use of the feature. Well if something imported from that index it imported all components even if they weren't used.

I can't find any information about how to avoid this issue, what configuration changes would need to be made to avoid it. In the end we just stopped using index files and that solved it. Though I maintain tree shaking should have handled that.

romiem · 2023-12-22T15:29:01Z

I too can confirm that in my project, removing the index files (which were being used to consolidate imports of components) and using direct imports fixes the issue. These components are all client-side components (not sure if that is a factor or not). Also found this reddit thread in which another user had similar success using direct imports:

https://www.reddit.com/r/nextjs/comments/17lonpq/component_styles_duplicating_in_both_layoutcss/

That said, it is not a solution I like, due to the amount of boilerplate that gets added into my imports. In fact, I would rather live with the added payload these duplicated css rules add to my compiled output than change to direct imports.

Hoping that this gets resolved soon because this issue has dragged on for quite some time.

zecka · 2023-12-24T09:50:47Z

I also have the same issue on next 14.0.4 with css module. I encounter the same issue with vanilla-extract.

Here a reproduction link
github: https://github.com/zeckaissue/next-css-duplicated
codesandbox: https://codesandbox.io/p/github/zeckaissue/next-css-duplicated/main?workspaceId=08c0217d-10c7-486d-a55b-8417490cf07b

Issue appear when importing same component in layout and inside a client component in a page.
If I import the same component into page and layout, the style is not duplicated as long as we stay on RSC.

In my example <Demo> component is used in both layout RSC component and inside a client component on page.
<Demo2 /> component is use on layout RSC and page RSC. <Demo> css rules are duplicated across page.css and layout css. But <Demo2> css are only into layout.css

Heres is other thread that seems to be related

layout.tsx

import { Demo } from './components/demo'
import { Demo2 } from './components/demo2'
export default function RootLayout({ children}}) {
  return (
    <html lang="en">
      <body>
        <header><Demo /><Demo2 /></header>
        {children}
      </body>
    </html>
  )
}

page.tsx

import { ClientExample } from "./components/client-example";
import { Demo2 } from './components/demo2'
export default function Home() {
  return (
    <main >
      <div>
        <ClientExample /><Demo2 />
      </div>
    </main>
  )
}

client-example.tsx

'use client'
import { Demo } from "./demo"
export const ClientExample = () => {
    return <div>
        Demo inside client component:
        <Demo />
    </div>
}

demo.tsx

import democss from './demo.module.css'
export const Demo = () => {
    return <div className={democss.demo}>Demo</div>
}

demo2.tsx

import demo2css from './demo2.module.css'
export const Demo2 = () => {
    return <div className={demo2css.demo2}>Demo2</div>
}

zecka · 2023-12-24T10:52:59Z

Other observations

Not related to nextjs version

Seems not be related to next version, I have test on following version and got this issue everytimes: 14.0.5-canary.25, 14.0.4, 13.5.4, 13.1.2

Related to client component `use client`

This seems to be really related to Client Component. On next 13.1.2 the duplicated style appears in _app-client_src_app_components_demo_module_css.css.
In my reproduction try to add "use client" on Demo2 component. The css rules of Demo2 will be both on layout and page css, if remove "use client" css will only be add to layout css

From what I understand, nextjs generates one css file per page and per layout. If componentA is used on PageA and PageB, the css of componentA will end up on the css of pageA and the css of pageB.
In the case of a server component, if CompoentA is used on layout and on pageA, nextjs will remove the css of componentA from the css of pageA. Why isn't the same true for a client component?

Issue is visible on nextjs.org

nextjs.org seems to have the exact same issue in production. Check button style:
screenshot

Issue visible on vercel.com

screenshot

Same issue in other framework

This maybe not a real bug. Maybe it's an impossible challenge with code splitting. I have another project build with nuxt2 and scss (in vue component), And this project is also affect by duplicate css rules.

zecka · 2024-02-24T07:51:58Z

14.1.1-canary.43 seems to fix this issue on my demo repo. I will try with other project later and send feedback here:
https://github.com/vercel/next.js/releases/tag/v14.1.1-canary.43

PR that seems to made the fix: #61198

whiteand · 2024-03-14T06:51:15Z

@zecka it still does not work in my demo (next@14.2.0-canary.21)

Demo: https://next-js-css-order-bug.vercel.app/from
Code: https://github.com/whiteand/next-js-css-order-bug

uaeio · 2024-04-04T08:16:59Z

Still not fixed in next@14.2.0-canary.56

whiteand added the bug Issue was opened via the bug report template. label Oct 28, 2022

whiteand changed the title ~~Dublication~~ Dublication of CSS rules Oct 28, 2022

whiteand changed the title ~~Dublication of CSS rules~~ Duplication of CSS rules Oct 31, 2022

uaeio mentioned this issue Jan 6, 2023

Verify CSS import ordering #16630

Closed

uaeio mentioned this issue Jan 18, 2023

Fix CSS imports being tracked multiple times #44938

Merged

11 tasks

uaeio mentioned this issue Mar 22, 2023

CSS modules duplicated when used with next/dynamic #25456

Open

zecka mentioned this issue Jan 18, 2024

[NEXTJS] css style rules duplication across page/layout/loading vanilla-extract-css/vanilla-extract#1276

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duplication of CSS rules #42082

Duplication of CSS rules #42082

whiteand commented Oct 28, 2022 •

edited

whiteand commented Nov 4, 2022 •

edited

whiteand commented Dec 1, 2022

whiteand commented Jan 6, 2023

whiteand commented Jan 16, 2023

uaeio commented Jan 18, 2023

uaeio commented Jan 26, 2023

whiteand commented Jan 31, 2023

whiteand commented Feb 13, 2023

uaeio commented Mar 2, 2023

uaeio commented Mar 14, 2023

uaeio commented Mar 22, 2023

whiteand commented Apr 8, 2023

whiteand commented Apr 13, 2023

uaeio commented Jul 21, 2023

ananevandrei11 commented Aug 7, 2023

nodegin commented Sep 8, 2023

whiteand commented Sep 11, 2023

Rudi-Batubara commented Sep 29, 2023

whiteand commented Oct 13, 2023

doug-stewart commented Nov 1, 2023

whiteand commented Dec 4, 2023

doug-stewart commented Dec 18, 2023

romiem commented Dec 22, 2023 •

edited

zecka commented Dec 24, 2023 •

edited

zecka commented Dec 24, 2023 •

edited

zecka commented Feb 24, 2024

whiteand commented Mar 14, 2024

uaeio commented Apr 4, 2024

Duplication of CSS rules #42082

Duplication of CSS rules #42082

Comments

whiteand commented Oct 28, 2022 • edited

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

whiteand commented Nov 4, 2022 • edited

whiteand commented Dec 1, 2022

whiteand commented Jan 6, 2023

whiteand commented Jan 16, 2023

uaeio commented Jan 18, 2023

uaeio commented Jan 26, 2023

whiteand commented Jan 31, 2023

whiteand commented Feb 13, 2023

uaeio commented Mar 2, 2023

uaeio commented Mar 14, 2023

uaeio commented Mar 22, 2023

whiteand commented Apr 8, 2023

whiteand commented Apr 13, 2023

uaeio commented Jul 21, 2023

ananevandrei11 commented Aug 7, 2023

nodegin commented Sep 8, 2023

whiteand commented Sep 11, 2023

Rudi-Batubara commented Sep 29, 2023

whiteand commented Oct 13, 2023

doug-stewart commented Nov 1, 2023

whiteand commented Dec 4, 2023

doug-stewart commented Dec 18, 2023

romiem commented Dec 22, 2023 • edited

zecka commented Dec 24, 2023 • edited

layout.tsx

page.tsx

client-example.tsx

demo.tsx

demo2.tsx

zecka commented Dec 24, 2023 • edited

Other observations

Not related to nextjs version

Related to client component use client

Issue is visible on nextjs.org

Issue visible on vercel.com

Same issue in other framework

zecka commented Feb 24, 2024

whiteand commented Mar 14, 2024

uaeio commented Apr 4, 2024

whiteand commented Oct 28, 2022 •

edited

whiteand commented Nov 4, 2022 •

edited

romiem commented Dec 22, 2023 •

edited

zecka commented Dec 24, 2023 •

edited

zecka commented Dec 24, 2023 •

edited

Related to client component `use client`