TLDR; how can I use @layer with createTheme?

[olivierpascal]

TLDR; how can I use @layer with createTheme?

Hello, I am using vanilla extract and sprinkles, and I really appreciate both.

When we use sprinkles, we usually want that sprinkles styles have a higher priority than base styles. So we use CSS layers, which is well supported by style() and defineProperties().

Problems start when we use theme vars inside sprinkles. createTheme() does not support layer. So theme vars always have a higher priority than any layer.

What I would like is being able to provide a CSS layer to createTheme() so that the CSS class is created inside that layer.

Thanks!

[olivierpascal]

Hello 🥺

[askoufis]

Sorry for the delayed response. I think a special @layer key inside createTheme would be the way to go. This is consistent with how sprinkles are assigned to layers too.

I didn't realize this in my original response to your questio, but you can manually create a theme inside a layer using a combination of style, layer, createThemeContract and assignVars:

import {
  style,
  createThemeContract,
  assignVars,
  layer,
} from "@vanilla-extract/css";

export const vars = createThemeContract({
  colors: {
    primary: null,
    secondary: null,
  },
  space: {
    small: null,
    large: null,
  },
});

const themeLayer = layer("theme");

export const themeInLayer = style({
  "@layer": {
    [themeLayer]: {
      vars: assignVars(vars, {
        colors: {
          primary: "red",
          secondary: "blue",
        },
        space: {
          small: "10px",
          large: "20px",
        },
      }),
    },
  },
});

[olivierpascal]

Hello, thanks for the suggestion. But it add a lot of overhead because all vars has to be redefined.

I agree with a special @layer key inside createTheme.

Do you think it could be implemented i a next update of vanilla-extract-css?

[askoufis]

Sure, the theme needs to be assigned values separately from the contract being created. This isn't any different from how contracts and themes are usually created with createThemeContract and createTheme. themeInLayer is sort of a re-implementation of createTheme but using a layer.

I can take a look at adding layer support to createTheme. It shouldn't be too complicated to implement, however I don't want to make any promises around a release timeline.

[olivierpascal]

That would really be amazing...

[askoufis]

@olivierpascal @layer support in createTheme and createGlobalTheme has been released in @vanilla-extract/[email protected].