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!

[radnan]

Just as an alternative- imo layer importing or rather declaring should not be a side effect and should be done manually and deliberately. Vanilla extract already supports this but the docs should be amended to make this more clear - at least for us folks who’re using it to create component libraries.

in our component library we bypassed the layer api entirely and used generateIdentifier and globalLayer instead. Then we manually produced our layer names and declared them in the intended order.

import { generateIdentifier, globalLayer } from "@vanilla-extract/css";

export const ui = "example";
// these 2 layers are public and should be exported inside `layerLibrary` object
export const theme = `${ui}.theme`;
export const base = `${ui}.base`;
// reset and components layers are internal/private and hence use hash ids
export const reset = `${ui}.${generateIdentifier()}`;
export const components = `${ui}.${generateIdentifier()}`;

globalLayer([ui, theme, base, reset, components].join(", "));

---

and for your use case one recommendation I’d make is to provide an already built global or base layer that consumers can use.

so in our case we have a top layer for our component library and then nested inside it we have our theme/reset/etc layers:

@layer example.theme, example.base, example.xyzabc;

so consumers can use the example.base layer to define things that are global to the app but should be overridable by the component library.

import { layerLibrary } from '@component-library';

globalStyle('html, *, *::before, *::after', {
  '@layer': {
    // layerLibrary.base = 'example.base'
    [layerLibrary.base]: {
      // …
    },
  },
});