Some calls have no value of their own. The compiler turns them into CSS at the
place where style() uses them. This error occurs when such a call is stored in
a variable or passed to another function instead.
Reported
const card = style.ref("card");
const container = card.asContainer("inline-size");SW10004: asContainer(...) must be consumed at its supported input position within style(); it cannot be materialized independently
Fixed
const card = style.ref("card");
const props = style(card, card.asContainer("inline-size"));How to fix
Write the call directly where style() uses it:
| Call | Where to write it |
|---|---|
card.asContainer(), card.asAnchor(), card.positionAnchor(), style.anchorScope() |
An argument of style() |
An animation such as fade("duration-300"), and transition.for(key) |
An argument of style() |
card(), card("hover"), .in(), and card.at() |
A computed key, or a utility template |
You can still store and pass the definitions themselves, such as the result of
style.ref() or style.keyframes(), and the result of style().