Support the windstitch or similar syntax

[jlarmstrongiv]

The windstitch syntax for basic react components looks like:

import { w } from '@wind/react';

const Button = w.button('text-sm', {
  variants: {
    color: {
      red: 'text-red-500',
      blue: 'text-blue-500',
    },
    size: {
      small: 'text-sm',
      large: 'text-lg',
    },
  },
  defaultVariants: {
    size: 'small',
  },
});
type ButtonProps = W.infer<typeof Button>;

render(<Button color="blue">)

The windstitch proposals for responsive props looks like:

<Button color='md:green lg:red' />
<Button mdColor='green' lgColor='red' />
<Button color={{ xs: 'green', sm: 'green', lg: 'red' }} />

I really like cva—I just think there is an opportunity for a simpler, less verbose api 😄

[jlarmstrongiv]

Here are two examples of creating something akin to the styled.button api:

• https://blog.logrocket.com/build-your-own-styled-components-library/
• https://www.burhanuday.com/blog/2021/08/basic-styled-components

Handling the ref is also important:

• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/

Automatic conflict merging would be good too:

• https://cva.style/docs/installation#handling-style-conflicts

[joe-bell]

Appreciate you taking the time to write this up, but sorry, I don't plan to support this

See the project FAQs