I have implemented React.CSSProperties to generate css variables, allowing me to define styles like
let css: React.CSSProperties = {
position: "relative",
display: "inline-block",
background: "red"
}
My goal is to build a theme with css variables at the root level or nested within modifiers such as size (sm, md, lg) or variant (light, dark) or others, as shown below:
let theme: MyTheme = {
background: "red", // css
color: "white", // css
button: { // custom: component name Level1
background: "red", // css
color: "white", // css
light: { // custom: modifier variant Level2
background: "red", // css
color: "white", // css
hollow: { // custom: modifier Level3
borderColor: "red",
color: "red",
background: "transparent",
}
}
dark: {
background: "red",
color: "white",
hollow: {
borderColor: "black",
color: "black",
background: "transparent",
modfierLevel4: {
some: "css"
modfierLevel5: {
some: "css"
modfierLevel6: {
some: "css"
}
}
}
}
}
}
}
Essentially, I am looking for a recursive object type in typescript similar to the example below, but encountering circular reference issues:
type Modifiers = 'button' | 'dark' | 'light' | 'otherModifiers'
interface Theme extends React.CSSProperties {
[k in Modifiers]?: Theme;
}
I found a solution that is close to what I need:
type Theme = React.CSSProperties & { [keys in Modifiers]?: Theme }
However, I am facing an issue. If an invalid modifier name like "btn" instead of "button" is provided:
- An error is correctly thrown at level 1 (as expected)
- No error is thrown from level 2 and above (even though it should be)
How can I define types to handle this scenario?