Introduce a @component similar to @utility to allow component layers to utilize variants and arbitrary variant.

[Bjodol]

Previous to v4, you could define plugins with addComponents which would allow you to say use components with variants and arbitrary variants. This would allow you to style markup differently based on viewport link sm:btn or create a styled form template similar to:

<form className="[&_input]:control [&_span]:control-error">{children}</form>

Using @layer component doesn't give you the same opportunity. I would suggest introducing a directive @component which worked in a similar manner to @utility generating variants on top of the components layer. There are cases where you would want a component to be predictably overridden by a utility, but the component itself also be allowed to utilize variants.

[wongjn]

You can do this with @layer components inside @utility at least:

@utility foo {
  @layer components {
    color: black;
  }
}

[Bjodol]

I was not aware this was possible
Will test it tomorrow. After several times reading the documentation I would suggest adding another example of what you are describimg. The current example with nesting and &::WebKit... doesn't really highlight this approach