Using @layer and defining a reset layer

[MatthijsBon]

I am trying to sort out how to get VE working with the new @layer functionality and applying a CSS reset.

Setup

I'm using yarn workspaces to plug my component-library into my app. Both use VE, and my app uses Remix, like so:

- apps/my-app
   - uses Remix + Vite, `vanillaExtractPlugin` 
- packages/component-library
   - uses Vanilla-Extract

Component-library

Now, I've put all my component-library styling in it's own layer like so:

import { layer } from '@vanilla-extract/css';

export const library = layer('component-library');

And used it like so:

// button.css.ts
export const button = style({
  '@layer': {
    [library]: {
       height: '1em',
       transform: 'scale(1.125)',
       transformOrigin: 'center',
    },
  },
});

App

In my App, I've defined two layers and import the libraryLayer, in Layers.css.ts:

import { layer } from '@vanilla-extract/css';
import { layerLibrary } from '@component-library';

export const reset = layer('reset');
globalLayer(layerLibrary);
export const app = layer('app');

And I've used the reset layer in my Reset.css.ts like so:

globalStyle('html, *, *::before, *::after', {
  '@layer': {
    [reset]: {
      boxSizing: 'border-box',
    },
  },
});

In my Remix App, I'm using these as follows:

// in root.tsx
import "./Layers.css";
import "./Reset.css";

Results

So I expect this order order of layers:

0. reset
1. component-library
2. app

Instead however, my component-library layer is actually the first one (probably because it's imported?) and then my reset overrides some of these styles.

Now I have also seen an example in which reset styles are added to each style call, however that example isn't using layers and I'm not sure if that's the right way to go.

I'd love your opinion or pointers on how to make this work!

[askoufis]

You're correct in that your component library's layer is ordered first because it's imported first. Layers are created as a side-effect of calling the layer function, which also means you don't need to define globalLayer(layerLibrary); it's redundant.

To fix your problem, you'll need to ensure your layers are imported in the correct order. Generally, when dealing import-order-sensitive CSS, such as reset styles and/or layers, I tend to try and organize the imports in the app entrypoint, e.g. App.tsx.

For this specific example, I also think it could be worth creating a separate entrypoint in your library that just exports the layer. For example:

// component-library/layer entrypoint
import { layer } from '@vanilla-extract/css';

export const libraryLayer = layer("library");

That way you can do something like this:

// App.tsx
// Creates reset layer and defines reset styles
import "./reset.css.ts";
// Creates a layer for your component library
import "component-library/layer";
// Creates a layer for your app
import "./appLayer.css.ts";

You could also just import component-library/layer inside your appLayer.css.ts file if you wanted to. Hope this helps!

[MatthijsBon]

Thanks! That explains a lot, much appreciated!