Recipe base has higher priority than variants #466
-
Is this expected? E.g. given const reset = style({
background: "transparent",
});
export const buttonRecipe = recipe({
base: [reset, sprinkles({ paddingX: "4" })],
variants: {
kind: {
primary: sprinkles({ color: "white", background: "primary60" }),
secondary: sprinkles({ color: "black", background: "neutral50" }),
},
},
}); The resulting component has I would've expected the variants to have higher precedence. |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 7 replies
-
This is because your sprinkles have a lower specificity than the newly-created reset style. The easiest fix is to avoid Sprinkles here entirely, but that's obviously not ideal. Personally, I'd recommend moving the transparent background into its own |
Beta Was this translation helpful? Give feedback.
-
I just ran into a similar problem where I have a import { style } from '@vanilla-extract/css';
export const reset = style(
{
padding: 0,
margin: 0,
border: 0,
boxSizing: 'border-box', // Ensure that padding is included in width
minWidth: 0, // ensure the Box can shrink below its minimum content size when used as a flex item
verticalAlign: 'baseline',
WebkitTapHighlightColor: 'transparent',
},
); and then I'm using it with sprinkles like this Essentially I'm doing very similar to https://github.com/seek-oss/braid-design-system/blob/dbdeed0e2c992921505fa49994db94d1af333ce1/lib/css/atoms/atoms.ts but it doesn't seem to work as expected. |
Beta Was this translation helpful? Give feedback.
-
This just bit me too. Since it's outside of the control of the library itself, perhaps a lint rule could help for these edge cases? I'm not sure of a way to enforce this in a way that every bundler would respect. |
Beta Was this translation helpful? Give feedback.
-
or maybe introduce a new API like |
Beta Was this translation helpful? Give feedback.
-
I am very confused about how to set the backgroundColor when disabled, because if I set it this way, the disabled state won't take effect, since it seems that the status in the recipe has a higher priority.Even if disabled is included as a variant in the recipe, it still seems that the status has slightly higher priority. I am quite confused about how the priority is determined in this context. CSS: export const disabled = style({
backgroundColor: '#CCCCCC',
cursor: 'not-allowed',
});
const statusVars = {
normal: {
backgroundColor: '#87CEFA',
},
success: {
backgroundColor: '#90EE90',
},
warning: {
backgroundColor: '#F0E68C',
},
error: {
backgroundColor: '#C10000',
},
};
export const button = recipe({
base: buttonBaseStyle,
variants: {
size: sizeVars,
type: typeVars,
status: statusVars,
},
}); TSX
|
Beta Was this translation helpful? Give feedback.
This is because your sprinkles have a lower specificity than the newly-created reset style.
The easiest fix is to avoid Sprinkles here entirely, but that's obviously not ideal. Personally, I'd recommend moving the transparent background into its own
kind
variant so that you avoid applying conflicting styles.