fix(variant-group)!: remove quotes matching, add option to config sep…

…erator (#1231)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/src/utils/index.ts

@@ -7,4 +7,3 @@ export * from './layer'
 export * from './variantGroup'
 export * from './warn'
 export * from './handlers'
-export * from './extractQuoted'

packages/core/src/utils/variantGroup.ts

@@ -2,24 +2,30 @@ import type MagicString from 'magic-string'
 
 export const regexClassGroup = /([!\w+:_/-]+?)([:-])\(((?:[~!\w\s:/\\,%#.$-]|\[.*?\])*?)\)/gm
 
-export function expandVariantGroup(str: string): string
-export function expandVariantGroup(str: MagicString): MagicString
-export function expandVariantGroup(str: string | MagicString) {
+export function expandVariantGroup(str: string, seperators?: ('-' | ':')[]): string
+export function expandVariantGroup(str: MagicString, seperators?: ('-' | ':')[]): MagicString
+export function expandVariantGroup(str: string | MagicString, seperators: ('-' | ':')[] = ['-', ':']) {
   regexClassGroup.lastIndex = 0
   let hasChanged = false
+  let content = str.toString()
   do {
-    const before = str.toString()
-    str = str.replace(
+    const before = content
+    content = content.replace(
       regexClassGroup,
-      (_, pre, sep, body: string) => {
+      (from, pre, sep, body: string) => {
+        if (!seperators.includes(sep))
+          return from
         return body
           .split(/\s/g)
           .map(i => i === '~' ? pre : i.replace(/^(!?)(.*)/, `$1${pre}${sep}$2`))
           .join(' ')
       },
     )
-    hasChanged = str.toString() !== before
+    hasChanged = content !== before
   } while (hasChanged)
 
-  return str
+  if (typeof str === 'string')
+    return content
+  else
+    return str.overwrite(0, str.length(), content)
 }

packages/transformer-variant-group/src/index.ts

@@ -1,21 +1,30 @@
 import type { SourceCodeTransformer } from '@unocss/core'
-import { expandVariantGroup, extractQuoted } from '@unocss/core'
+import { expandVariantGroup } from '@unocss/core'
 
-export default function transformerVariantGroup(): SourceCodeTransformer {
+export interface TransformerVariantGroupOptions {
+  /**
+   * Separators to expand.
+   *
+   * ```
+   * foo-(bar baz) -> foo-bar foo-baz
+   *    ^
+   *    separator
+   * ```
+   *
+   * You may set it to `[':']` for strictness.
+   *
+   * @default [':', '-']
+   * @see https://github.com/unocss/unocss/pull/1231
+   */
+  separators?: (':' | '-')[]
+}
+
+export default function transformerVariantGroup(options: TransformerVariantGroupOptions = {}): SourceCodeTransformer {
   return {
     name: 'variant-group',
     enforce: 'pre',
     transform(s) {
-      extractQuoted(
-        s.toString(),
-        {
-          details: true,
-          templateStaticOnly: true,
-          deep: true,
-        },
-      )
-        .filter(({ value: { length } }) => length)
-        .forEach(({ value, range }) => s.overwrite(...range, expandVariantGroup(value)))
+      expandVariantGroup(s, options.separators)
     },
   }
 }

test/transformer-variant-group.test.ts

@@ -1,5 +1,4 @@
 import { readFile } from 'fs/promises'
-import transformerVariantGroup from '@unocss/transformer-variant-group'
 import { describe, expect, test } from 'vitest'
 import { expandVariantGroup } from '@unocss/core'
 import MagicString from 'magic-string'
@@ -32,13 +31,13 @@ describe('transformer-variant-group', () => {
     }
   })
 
-  test('vue file', async () => {
-    const transformer = transformerVariantGroup()
-    const transform = async (code: string) => {
+  test('vue file with strict sep', async () => {
+    async function transform(code: string) {
       const s = new MagicString(code)
-      await transformer.transform(s, '', {} as any)
+      expandVariantGroup(s, [':'])
       return s.toString()
     }
+
     const file = await readFile('./test/assets/variant-group.vue', 'utf-8')
     const result = await transform(file)
     expect(result).toMatchInlineSnapshot(`
@@ -48,7 +47,7 @@ describe('transformer-variant-group', () => {
       // eslint-disable-next-line @typescript-eslint/space-infix-ops
       const c = a-(b -a -b)
       </script>
-      
+
       <template>
         <div class=\\"bg-white font-light sm:hover:bg-gray-100 sm:hover:font-medium\\" />
         <div class=\\"lt-sm:hover:p-1 lt-sm:hover:p-2\\" />