Types aren't allowing nested styles
benoitdeziel opened this issue · comments
When trying to use nested selectors, I get a type error.
Example CSS:
const styles: CSSFunctionArgs<"prefix"> = {
backgroundColor: "tomato",
padding: "1rem",
"&:hover": {
backgroundColor: "crimson"
},
"&[role='button']": {
"&:hover": {
backgroundColor: "rebeccapurple"
}
}
};
Type error:
Type '{ backgroundColor: "tomato"; padding: "1rem"; "&:hover": { backgroundColor: "crimson"; }; "&[role='button']": { "&:hover": { backgroundColor: "rebeccapurple"; }; }; }' is not assignable to type 'CSSFunctionArgs<"prefix">'.
Type '{ backgroundColor: "tomato"; padding: "1rem"; "&:hover": { backgroundColor: "crimson"; }; "&[role='button']": { "&:hover": { backgroundColor: "rebeccapurple"; }; }; }' is not assignable to type 'CSSObject<"prefix", Theme>'.
Type '{ backgroundColor: "tomato"; padding: "1rem"; "&:hover": { backgroundColor: "crimson"; }; "&[role='button']": { "&:hover": { backgroundColor: "rebeccapurple"; }; }; }' is not assignable to type '{ [k: string]: string | number | InternalCss<"prefix", Theme> | undefined; }'.
Property '"&[role='button']"' is incompatible with index signature.
Type '{ "&:hover": { backgroundColor: "rebeccapurple"; }; }' is not assignable to type 'string | number | InternalCss<"prefix", Theme> | undefined'.
Type '{ "&:hover": { backgroundColor: "rebeccapurple"; }; }' has no properties in common with type 'InternalCss<"prefix", Theme>'.ts(2322)
The type error disappear if a property is added to the nested selector
const styles: CSSFunctionArgs<"prefix"> = {
backgroundColor: "tomato",
padding: "1rem",
"&:hover": {
backgroundColor: "crimson"
},
"&[role='button']": {
backgroundColor: "limegreen"
"&:hover": {
backgroundColor: "rebeccapurple"
}
}
};
And if a other property is nested, I still got a type error
const nestedStyles: CSSFunctionArgs<"prefix"> = {
backgroundColor: "tomato",
padding: "1rem",
"&[role='button']": {
backgroundColor: "limegreen",
"&:hover": {
backgroundColor: "slateblue",
"&::after": {
content: '"content"',
paddingInline: "1rem"
}
}
}
};
Type '{ backgroundColor: "slateblue"; "&::after": { content: string; paddingInline: string; }; }' is not assignable to type 'string | number | InternalCss<"prefix", Theme> | undefined'.
Object literal may only specify known properties, and '"&::after"' does not exist in type 'InternalCss<"prefix", Theme>'.ts(2322)
Here's a codesandbox with some tests
https://codesandbox.io/s/system-props-nested-css-9dxigb