How does the Multi-step Regex work?

[buitrbao222]

Hi guys, thank you for this amazing extension. But I can't understand how the multi-step regex works, can you explain it to me?

I have this multi-step regex:

[
  "tw\\(([^)]*)\\)",
  "[\"'`]([^\"'`]*).*?[\"'`]"
]

It works properly in the TailwindCSS Intellisense plugin by using tailwindCSS.experimental.classRegex But it doesn't work with headwind.classRegex, can you explain why?

Basically what I want is this 2-step regex:

1. matches tw(anything in here)
2. matches any strings in the "anything in here" part to sort

My test cases:

// Strings (variadic)
tw('opacity-50 mt-4', isTrue && 'mb-4 bg-red-500');

// Objects
tw({
  'opacity-50 mt-4': true,
  'mb-4 bg-red-500': isTrue,
});

// Objects (variadic)
tw(
  { 'opacity-50 mt-4': true },
  { 'mb-4 bg-red-500': isTrue }
);

// Arrays
tw([
  'opacity-50 mt-4',
  'mb-4 bg-red-500'
]);

// Arrays (variadic)
tw(
  ['opacity-50 mt-4'],
  ['mb-4 bg-red-500'],
);

Many thanks.