Generated CSS order depends on file system order

[morbidick]

Describe the bug

When creating nested React Components with the parent overriding child styles via an additional class the css rules are ignored because they are further up in the generated css file so have less priority.

If its not against the basic paradigms of vanilla-extract an idea for a solution would be if the order would depend on the import order or one could add a order hint to the style rule.

Reproduction

https://codesandbox.io/s/friendly-cdn-o4dgub?file=/src/Elem1.tsx

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 259.46 MB / 31.24 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.19.1 - /usr/bin/node
    Yarn: 1.22.4 - ~/.npm-global/bin/yarn
    npm: 6.14.16 - /usr/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Chromium: 102.0.5005.61
    Firefox: 100.0.2
  npmPackages:
    @vanilla-extract/babel-plugin: ^1.1.6 => 1.1.4 
    @vanilla-extract/css: ^1.7.0 => 1.6.8 
    @vanilla-extract/css-utils: ^0.1.2 => 0.1.2 
    @vanilla-extract/sprinkles: ^1.4.1 => 1.4.1 
    @vanilla-extract/webpack-plugin: ^2.1.10 => 2.1.6 
    webpack: 5 => 5.70.0

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.

[pakholeung37]

I encounter the same situation.

[pakholeung37]

I encounter the same situation.

I found out CSS module has the same behavior. https://codesandbox.io/s/nostalgic-snowflake-mfr9rj?file=/src/Elem2.jsx, there must be some approach to avoid this.

[mattcompiles]

Vanilla-extract doesn't have any control over the order in which your CSS is bundled, that is upto your bundler to decide. However, basically all bundlers will try to order your CSS in the order in which you imported it.

In this case, you're importing the styles for Elem2 after you've imported the styles for Elem1 which causes the styles to be ordered that way. If you swap the Elem2 import position with the Elem1.css import then you'll likely get what you're after.

e.g.

import { Elem2 } from "./Elem2";
import { Elem1Style } from "./Elem1.css";

I would suggest this is a very fragile way to write CSS though. Ideally, architect your CSS so it's not so exposed to ordering issues. For example, expose a vanilla-extract theme via your component for style overrides from the component.