conflicting-provider-properties

This rule reports a container or anchor property that a ref method, such as asContainer(), and another utility both set on the same element. For example, asContainer("size") sets container-type: size, and @container sets it to inline-size. Only one value takes effect, and the code does not show which.

Reported

const card = style.ref("card");
style(card, card.asContainer("size"), "@container");conflicting-provider-properties: provider use overlaps `container-type` from another source; their order is not guaranteed

Fixed

const card = style.ref("card");
style(card, card.asContainer("size"));

How to fix

• Set the property in one place. With a ref, pass the container type to asContainer(), and remove the utility, as in the example.
• If you want the type from the utility, call asContainer() without a type.

Rule settings