[NEXT-1324] Non-Deterministic CSS File Contents

[ian-hutchinson]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.11
      pnpm: N/A
    Relevant packages:
      next: 13.4.5-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/ian-hutchinson/css-repro

To Reproduce

Run npm run dev and check out the routes mentioned in the description.

You can see that sometimes they are rendered with red text, sometimes with their overridden colour. You can also inspect the page CSS to see the difference in the generated files - sometimes the overridden styles are included in the CSS first, sometimes they're last.

Describe the Bug

The contents of the repro repo has three routes:

[id]
console
console/[dynamic]

Each of the routes render the same thing, a shared component - Foo - which has some of its own styles, but also allows classNames to be passed as props for additional styles to be added.

If the styles are applied correctly, the Foo text will be overridden with yellow, green and blue text on the [id], console, and console/[dynamic] routes respectively. If they are not overridden, the style applied at the shared component level, which is red text, wins out.

If you run the dev server, you will see different behaviours. Sometimes the overridden styles are applied, sometimes they are not.

The crux of this seems to be the page CSS that is generated. Sometimes the override styles are generated at the top of those css files, followed by the component styles. In those cases, the component style will win out since the css specificity is the same and it is listed last in the file.

On other occasions, the component style is at the top of the generated page CSS, with the override styles following. In this case, everything looks good.

I've not been able figure out exactly why it is sometimes generating these files in different orders.

Expected Behavior

CSS styles should be consistent. I would expect my page CSS styles to take precedence over the components that my pages are composed of.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1324

[eugeneoshepkov]

I have exactly the same issue when navigating between the routes in /app directory: page CSS gets loaded twice, leading to different CSS order

[shuding]

This is likely to be the same as #51030, where we already have some discussions there and you might be interested.

[timneutkens]

Let's consolidate these two issues. Closing in favor of #51030 👍

[github-actions]

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