feat: callees regex support

[pipech]

We need some sort of regex support for callees.

Usecase

cva class-variance-authority

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Example codes

shadcn/ui/Button

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

[pipech]

As a temporary solution, I create a fake callees wrap around tailwind class.

https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/229#issuecomment-1497576504

const buttonVariants = cva(
  `
    inline-flex items-center justify-center
    whitespace-nowrap rounded-md text-sm font-medium
    transition-colors
    disabled:pointer-events-none disabled:opacity-50
    focus-visible:outline-none focus-visible:ring-1
    focus-visible:ring-ring
  `,
  {
    defaultVariants: {
      size: "default",
      variant: "default",
    },
    variants: {
      size: {
        default: cn("h-9 px-4 py-2"),
        icon: cn("h-9 w-9"),
        lg: cn("h-10 rounded-md px-8"),
        sm: cn("h-8 rounded-md px-3 text-xs"),
      },
      variant: {
        default:
          cn(`
            bg-primary text-primary-foreground shadow
            hover:bg-primary/90
          `),
        destructive:
          cn(`
            bg-destructive text-destructive-foreground
            shadow-sm
            hover:bg-destructive/90
          `),
        ghost: cn("hover:bg-accent hover:text-accent-foreground"),
        link: cn(`
          text-primary underline-offset-4
          hover:underline
        `),
        outline:
          cn(`
            border border-input bg-background shadow-sm
            hover:bg-accent hover:text-accent-foreground
          `),
        secondary:
          cn(`
            bg-secondary text-secondary-foreground shadow-sm
            hover:bg-secondary/80
          `),
      },
    },
  },
);

[schoero]

I can see why this would be useful. I will look into it 👍

[schoero]

Hey @pipech

I created a pull request that adds support for regular expressions in the callee matcher. It basically works the same way like the "Tailwind CSS IntelliSense" Visual Studio Code extension as described in the cva installation guide.

For example, you could add the following regular expressions to the callee option of each rule:

  {
    "callees": [
      ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
      ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
    ]
  }

You can install the beta version using

npm i eslint-plugin-readable-tailwind@beta

I'd be happy to get your feedback before releasing it to the public.