Better DX for multi-element component styling with layers

[tomahl]

Hello,

When authoring components with multiple elements across different cascade layers, I find the repetition tedious:

export const root = style({ '@layer': { [base]: { ... } } });
export const child = style({ '@layer': { [base]: { ... } } });
export const childHover = style({ '@layer': { [states]: { ':hover': { ... } } } });

Each element requires its own @layer declaration. In native CSS, you'd write the layer once and group all rules inside it—much more intuitive for component organization.

What I'd love to see in Vanilla Extract:

export const myStyles = createStyles({
	'@layer': {
		[base]: {
			root: {
				backgroundColor: 'red',
			},

			child: {
				backgroundColor: 'green',
			},
		},

		[mods]: {
			child: {
				backgroundColor: 'blue',
			},
		},
	},
});

This would return an object with class names ({ root, child }) but let you organize everything in a single @layer declaration per layer—mirroring native CSS structure.

1. Has this come up before? Is there a reason style() is kept single-element focused?
2. Would an API like this (createStyles) be considered for VE, or is the intent to keep composition simpler?
3. Are there architectural reasons this would be difficult to implement?

Do others feel this pain point, or is it just me?

[larrifax]

I for one, would love the ability to assign an entire recipe() to a layer instead of having to repeat myself like so:

export const text = recipe({
  base: {
    "@layer": {
      [layer.base]: {
        color: "red",
      },
    },
  },

  variants: {
    first: {
      a: {
        "@layer": {
          [layer.base]: {
            textAlign: "center",
          },
        },
      },
      b: {
        "@layer": {
          [layer.base]: {
            textAlign: "end",
          },
        },
      },
    },
    second: {
      c: {
        "@layer": {
          [layer.base]: {
            fontStyle: "italic",
          },
        },
      },
    },
  },
})

However, I suspect we'd get into trouble producing "the correct output" if the e.g. one of the variants reuses a class from somewhere else, like so:

    second: {
      c: [
        typography.overline,
        {
            fontStyle: "italic",
        },
      ],
    },