Cascade layers?

[sami616]

Just wondering if any thought about how the lib might support the new and exciting cascade layers feature coming to css in the not too distant future? What the api might look like, if it will even support it at all?

[mattcompiles]

We're definitely keen to support cascade layers in the VE API. I think it massively helps with managing rule order precedence issues when bundling CSS which has been an on-going issue in this space. We've had a few quick chats about it internally but nothing really to report on API wise just yet.

If anyone has any API suggestions I'd love to see what people think. 😄

[mattcompiles]

Some early thoughts on possible API design

Option 1

• Requires passing the reference to all style calls
• Makes it easy to pass to libraries e.g. sprinkles
• Have to try fit it into all the core style API signatures, a little tricky due to debugId
• Might be easy to forget to pass the layer as it's kinda hidden at the end

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

const resetLayer = layer();

const reset = style({}, resetLayer)

Option 2

• All style APIs need to be reimplmented via the layer interface
• Not ideal for passing to libraries e.g. sprinkles
• Probably more clear that you're creating a style on a layer

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

const resetLayer = layer();

const reset = resetLayer.style({})

[viridia]

I would really like to see support for layers. One of the problems with frameworks like this is composition at the component level - that is, it's really easy to compose styles at the css level, but when you try to build generic components that also accept 'className' attributes, it becomes a guessing game to see which className will take precedence. CSS layers solves this.

The way I would normally use layers is that the component library uses its own layers, and the application uses a higher-precedence layer or the default layer - so that any app style overrides take precedence over the defaults. In my own widget library, I have separate layers for the base styles, another layer for variations, and a third layer for dynamic states.

API-wise, the approach I was thinking of is similar to the one currently used for selectors and vars:

export const buttonCss = style({
  layers: {
    ui: {
      backgroundColor: theme.color.blue,
      borderWidth: 1,
    },

    states: {
      selectors: {
        backgroundColor: theme.color.red,
      }
    }
  }
});

globalLayerOrder(['ui', 'variants', 'states', 'app']);

[askoufis]

Support for layers should be coming soon, there's an open PR for it.