[IntelliSense] Support for prop spreading

[powd]

Suppose I'd like to apply class names conditionally like so:

function cn(...classLists: Parameters<typeof twJoin>) {
  return {
    className: twJoin(...classLists),
  }
}

function Alert({ children, danger }: { children: ReactNode; danger?: boolean }) {
  return <div {...cn(danger ? 'bg-red-200' : 'bg-sky-200')}>{children}</div>
}

Unfortunately, from what I can see, it is currently impossible to configure the extension to work with spread props as shown above.

It'd be super awesome to have TailwindCSS IntelliSense support that. ✌️

[wongjn]

You could try configuring the tailwindCSS.experimental.classRegex setting.

[powd]

Oh, in fact, I knew about that option, but I thought it was removed because it's experimental and the extension marketplace page doesn't mention it.

After some experimentation with regexes, it looks like it works.

In case anyone searched for something similar, let me just drop the solution (it has limitations, though, due to the assumption that the sequence "})" won't occur within cn(...)):

{
  // ...
  "tailwindCSS.experimental.classRegex": [
    [
      "[^\\.]\\.{3}cn\\(((?:(?!\\)\\})(.|\\n))+)\\)\\}",
      "'([^']+)'"
    ]
  // ...
}

I'll be testing it at a slight bigger scale. I just hope this option won't cause any pitfalls or performance issues... and that it won't be deleted in later releases.

Thanks, wongjn! 🎉