How do I match only the content of function string arguments?

Viewed 45

I'm importing the classnames library as cx, and using it to generate Tailwind class name strings in a React project like this.

  const buttonClasses = cx(
    'flex flex-row items-center',
    'text-wave-brown text-xl p-1.5 rounded-xl',
    selected && 'bg-slate-800',
    isDisabled && 'text-zinc-700 bg-transparent',
    props.className
  );

The Tailwind Intellisense plugin supports adding a regex to trigger autocomplete. I've added the bottom row ("cx\\(([^\\)]*)\\)") in the VS Code config.

  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\\(.*?\\)`([^`]*)", // tw(Component)`...`


    "cx\\(([^\\)]*)\\)" // cx(...)
  ],

This works, but it triggers autocomplete even outside of the string literals. I would prefer to only get autocomplete when my cursor is inside of a string literal (between the ' ticks).

Is there a way to write the regex so that it only matches the content inside the string literals that are also arguments of the cx() function?

0 Answers
Related