twind/style should support a css property that allows to use other props to create custom css

[sastan]

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}))`
  })
})

[joseDaKing]

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.