[NEXTJS] css style rules duplication across page/layout/loading

[zecka]

Describe the bug

Any way to avoid style duplication across generated css for page layout or loading page ?

If i use same component in both a client component inside a page and inside the layout his style will be generated inside page.css and layout.css

In above example (reproduction repository):

• inside <ClientComponent> i have <Demo /> component (client component have notation 'use client')
• inside /app/page.tsx i have <ClientComponent /> component
• inside /app/layout.tsx i have <Demo /> component

If i remove 'use client'; from <ClientComponent> the css style of demo will not be duplicate on page.css

I use vanilla extract in a component library using atomic design. So it's like having a lot of duplicated css rules...

Is there a way to force vanilla extract to bundle one css file instead of multiple css chunk ?

Note that i got exactly the same issue using css module.

Heres is other thread that seems to be related

• Duplication of CSS rules vercel/next.js#42082
• [NEXT-1308] Css is imported multiple times and out of order in /app dir vercel/next.js#51030
• Using a certain client component in Next13's root layout duplicates all the .module.scss styles vercel/next.js#44156
• CSS modules duplicated when used with next/dynamic vercel/next.js#25456
• https://www.reddit.com/r/nextjs/comments/17lonpq/component_styles_duplicating_in_both_layoutcss/
• https://stackoverflow.com/questions/77023130/css-files-seems-imported-twice-with-next-js

Not sure if this thread should be inside issue or discussion...

Reproduction

https://github.com/zeckaissue/next-css-duplicated/tree/vanilla-extract

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 18.50 GB / 24.76 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
    pnpm: 8.6.2 - /usr/local/bin/pnpm
  npmPackages:
    @vanilla-extract/css: ^1.14.0 => 1.14.0 
    @vanilla-extract/next-plugin: ^2.3.2 => 2.3.2

Used Package Manager

yarn

Logs

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[zecka]

v 14.1.1-canary.43 seems to fix this issue
Pull request: vercel/next.js#61198

Let's wait for version 14.1.1 of next to close this issue definitively.

[zecka]

Tested again on v. 14.1.2 but isse still there 😢

[maiconsanson]

I'm using 14.1.3 and it seems fixed for me (production only, dev still duplicating).