Support additional use cases

[jlarmstrongiv]

Thank you for making this fork and upstreaming your changes 🎉

There’s a couple use cases I think would be wonderful to have:

• cva array syntax
• windstitch / stylemapper syntax
• tw syntax

I think you already support the tw syntax via tailwindTaggedTemplates. That’s already a really good escape hatch 😄 unfortunately, I couldn’t try it since I couldn’t get the fork to work locally

The cva array syntax could be an additional option named something like tailwindArrayTemplates and looks like:

import { cva } from "class-variance-authority";

const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      // **or**
      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      class: "uppercase",
      // **or** if you're a React.js user, `className` may feel more consistent:
      // className: "uppercase"
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

The windstitch syntax with w.componentname doesn’t seem to be supported with tailwindCustomFunctions, and I was unable to get your fork with tailwindFunctionCalls working locally. I think the same option name could be used, or another one like tailwindMethodCalls could be added. The syntax 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',
  },
});

[nderscore]

Thanks for your feedback and sorry for the late reply - somehow I wasn't subscribed to notifications for my own repo 😛

CVA array syntax

I'm not entirely sure, but I think this might require some updates to some of the deeper internals of the plugin. I don't know how easily I can decouple the sorting parts from the part that splits out or parses the classname string. Can't make any promises, but I will investigate it further.

String syntax should still work though:

const button = cva("font-semibold border rounded", {
  variants: {
    intent: {
      primary: "bg-blue-500 text-white border-transparenthover:bg-blue-600",
  // ...

tw tagged template syntax

I think you already support the tw syntax via tailwindTaggedTemplates. That’s already a really good escape hatch 😄 unfortunately, I couldn’t try it since I couldn’t get the fork to work locally

So far I've only implemented that feature in my PR to the upstream package - not here in the fork itself. I was optimistically hoping to be able to decommission this package in favor of moving these features upstream instead, so I hadn't prioritized it.

It's pretty easy to add though. I need to pull in the latest changes from the upstream package anyway, so I can add this feature when I do (should hopefully be soon)

windstitch / stylemapper syntax

Targeting method names makes sense to me, but I wonder whether or not it would be necessary to allow targeting based on the parent name too.

I'm not sure what the configuration should look like if, for example, we wanted to restrict it to methods named button but only when the parent is named w?

Maybe just the method name is enough though 🤔

[nderscore]

Tagged template support is released in v0.2.1 (prettier setting tailwindCustomTaggedTemplates)