twind
twind copied to clipboard
twind/style should support a css property that allows to use other props to create custom css
import { styled } from "@twind/react"
interface IAutoGridProps {
amount: number;
minWidth: number;
maxWidth: number;
}
const AutoGrid = styled('div', {
// New property that accepts a function which is passed all props
css: ({ amount, minWidth, maxWidth }: IAutoGridProps) => ({
gridTemplateColumns: `repeat(${amount}, minmax(${minWidth}, ${maxWidth}))`
})
})
I think the css method should take a second parameter and it is type would be the variants. I think there are some scenarios where it is needed.
import { styled } from "@twind/react"
interface IAutoGridProps {
amount: number;
minWidth: number;
maxWidth: number;
}
const AutoGrid = styled('div', {
variants: {
a: {
1: "",
2: ""
},
b: {
3: "",
2: ""
}
}
// New property that accepts a function which is passed all props
// The type of the second argument would be { a: 1 | 2, b: 3 | 2 }
css: ({ amount, minWidth, maxWidth }: IAutoGridProps, { a, b }) => ({
gridTemplateColumns: `repeat(${amount}, minmax(${minWidth}, ${maxWidth}))`
})
})
And also all properties for the css method should have variants for them.