Can't properly control css layers order loading

[Denys-Vandebron]

We have a setup of Remix & Vite & VanillaExtract and we use the css feature layers.

So we define all layers in one .css.ts file in a right order as it's recommended by VanillaExtract, and I would expect that if one of the exported layers is imported somewhere in .css, all other layers will also be initialized.

But it seems that it's not really the case because Remix features bundling and loading critical css first, where it includes all the styling for elements explicitly defined in Layout component (https://remix.run/docs/en/main/file-conventions/root#layout-export), and then we have a separate bundle for children.

So the part of this initial root-*** bundle looks like this:

.Layout_main__155pc4a1 {
    ...some styling
}

@layer Layers_component__1prhhnr0;@layer Layers_component__1prhhnr0 {
    .Breadcrumbs_lastBreadcrumb__fnsob50 {
        ...someStyling
    }
}

And the next .css file has all the layers, but that's too late because one of the layers is already defined above, so the order is incorrect.

I am wondering about the correct solution here, because the best I could achieve is just including all the layers in a right order in one of the criticalCSS (in the Error component), like this:

export const errorContainer = style({
  '@layer': {
    [resetLayer]: {},
    [libraryLayer]: {},
    [sprinklesLayer]: {},
    [appComponents]: {},
    [overrides]: {},
  },

  ... other styles
});

But it does not seem to be a robust long-term solution. Any suggestions?
I tried https://remix.run/docs/en/main/guides/css-files#css-url-imports, but didn't succeed because the imported name cannot be really resolved before bundling. Or is there a way to make it work?

Also I am not sure if it's guaranteed the the Error component is actually the first one loaded into this critical bundle. It seems to be the case for us now, but will it work in future?

I would appreciate any help!