Unstable `@layer` ordering

[Tenga]

Describe the bug

While attempting to use @layers with Vanilla Extract and next@13.4.4 (pages dir), ordering of initial @layers seems to be unstable, defeating the purpose of the cascade layers.

The code in the minimal repro was my initial attempt to add 3 layers, and assign them to my reset, component framework, and a third layer (dummy in the repro, so I could observe what's happening) as it made sense to me.

I have followed this logic

• Created layers.css.ts to define the layer ordering and exported them as suggested by the docs
• Imported the reset layer to the reset.css.ts and added it to the reset styles
• Imported the framework layer and added it to the styles for the framework components

While working under next dev, everything seemed fine, as there is a separate style tag containing the contents of layers.css.ts with proper ordering, and then separate style tags which contain contents of other css.ts files.

Running next build and next start, the layer order is broken, as the layers.css.ts and reset.css.ts seem to be combined in a single file resulting in the @layer reset being removed from the initial order. To me, it seems like it's being deduplicated in favor of the declaration in the reset.css.ts, resulting in out of order layers.

I've also tried and observed the following:

• Importing layers.css.ts explicitly in _app.tsx before the reset.css.ts
  • No effect
• Importing reset.css.ts in the page, instead of the _app.tsx.
  • Layers are "deduplicated" and ordered depending on the import order. Also unpractical.
• Using layer instead of globalLayer
  • No effect
• Created some dummy styles within layers.css.ts for each layer

  globalStyle("dummy", {
    "@layer": {
      [reset]: { left: 0 },
      [framework]: { left: 0 },
      [dummy]: { left: 0 },
    }
  });
  

  • Seems like a workaround as this preserves the layer order, even tho the the @layer <layer> declarations are "deduplicated"

Reproduction

https://github.com/Tenga/ve-layers-repro

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 711.61 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.90
    Firefox: 111.0.1
    Safari: 16.3
  npmPackages:
    @vanilla-extract/css: ^1.11.1 => 1.11.1
    @vanilla-extract/next-plugin: ^2.1.3 => 2.1.3

Used Package Manager

npm

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.

[askoufis]

I wonder if this next issue is the cause vercel/next.js#16630

[6mint]

Next 14.2 supposedly maintains css import order now.
You might want to check if the problem persists.

[askoufis]

Next 14.2 supposedly maintains css import order now. You might want to check if the problem persists.

This doesn't seem fixed as of Next 14.2.2 😢

[InumberX]

I encountered a similar issue in my project using Remix (React Router 7) and vanilla-extract.
I had defined CSS layers in the globalLayer, but in the production environment, the order wasn’t preserved.
To address this, I explicitly defined the hierarchy using the parent property.
I believe using the parent property allows you to maintain the layer hierarchy even in production.
I hope this helps in some way.

https://github.com/InumberX/sugidama/blob/develop/app/styles/variables/layers.css.ts

Before

After