invalid-style-composition

This rule reports a base style that contains inline styles or custom properties. When you pass a stored style() result to another call, only its classes carry over. The custom property in the base is lost.

Base styles can come from any framework entrypoint. The receiving call returns its own framework’s class and style props.

Reported

declare const value: string;
const base = style("rounded-md", { "--x": value });
style(base, "p-4");invalid-style-composition: a style base contributes only its class; its inline style is ignored

Fixed

declare const value: string;
const base = style("rounded-md");
style(base, "p-4", { "--x": value });

How to fix

• Keep the utilities in the base, and set the custom property in the call that receives the base, as in the example.
• If several elements need the same value, set the custom property on a common ancestor. Custom properties are inherited.

See Base styles.

Rule settings