fix: fix support for bracket in variable variant unocss/unocss#1154

src/variants/misc.ts

@@ -56,7 +56,7 @@ export const variantScope: Variant = {
 export const variantVariables: Variant = {
   name: 'variables',
   match(matcher) {
-    const match = matcher.match(/^(\[[^\]]+\]):/)
+    const match = matcher.match(/^(\[.+?\]):/)
     if (match) {
       const variant = h.bracket(match[1]) ?? ''
       const updates = variant.startsWith('@')

test/assets/preset-mini-targets.ts

@@ -877,6 +877,16 @@ export const presetMiniTargets: string[] = [
   'peer-checked:bg-blue-500',
   'parent-hover:text-center',
   'previous-checked:bg-red-500',
+
+  // variants - variables
+  '[&:nth-child(2)]:m-10',
+  '[&>*]:m-11',
+  '[*>&]:m-12',
+  '[&_&]:m-13',
+  '[&[open]]:m-14',
+  '[&[readonly][disabled]]:m-15',
+  '[@supports(display:grid)]:bg-red/33',
+  '[@supports(display:grid)]:[*+&]:bg-red/34',
 ]
 
 export const presetMiniNonTargets = [

test/preset-mini.test.ts

@@ -0,0 +1,88 @@
+import { createGenerator, escapeSelector } from '@unocss/core'
+import { describe, expect, test } from 'vitest'
+import presetWeapp from '../src/index'
+import { presetMiniNonTargets, presetMiniTargets } from './assets/preset-mini-targets'
+import { presetWindTargets } from './assets/preset-wind-targets'
+
+const uno = createGenerator({
+  presets: [
+    presetWeapp({
+      dark: 'media',
+    }),
+  ],
+  theme: {
+    colors: {
+      custom: {
+        a: 'var(--custom)',
+        b: 'rgba(var(--custom), %alpha)',
+      },
+      a: {
+        b: {
+          c: '#514543',
+        },
+        camelCase: '#234',
+      },
+    },
+  },
+})
+
+describe('preset-mini', () => {
+  test('targets', async () => {
+    const code = presetMiniTargets.join(' ')
+    const { css } = await uno.generate(code)
+    const { css: css2 } = await uno.generate(code)
+
+    const unmatched = []
+    for (const i of presetMiniTargets) {
+      if (!css.includes(escapeSelector(i)))
+        unmatched.push(i)
+    }
+    expect(unmatched).toEqual([])
+    expect(css).toMatchSnapshot()
+    expect(css).toEqual(css2)
+  })
+
+  test('utils from preset-wind should be non-targets', async () => {
+    const code = presetWindTargets.join(' ')
+    const { css, matched } = await uno.generate(code, { preflights: false })
+
+    expect(Array.from(matched)).toEqual([])
+    expect(css).toBe('')
+  })
+
+  test('custom var prefix', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetWeapp({
+          variablePrefix: 'hi-',
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate([
+      'text-opacity-50',
+      'text-red',
+      'scale-100',
+    ].join(' '), { preflights: false })
+
+    expect(css).toMatchSnapshot()
+  })
+
+  test('nested theme colors', async () => {
+    const { css, matched } = await uno.generate([
+      'text-a-b-c',
+      'text-a-camel-case',
+      'bg-a-b-c',
+    ], { preflights: false })
+
+    expect(css).toMatchSnapshot('')
+    expect(matched.size).toBe(3)
+  })
+
+  test('none targets', async () => {
+    const { css, matched } = await uno.generate(new Set(presetMiniNonTargets), { minify: true, preflights: false })
+
+    expect(css).toMatchInlineSnapshot('""')
+    expect([...matched]).toEqual([])
+  })
+})

test/preset-weapp.test.ts

@@ -1,19 +1,18 @@
 /*
  * @Author: licl
  * @Date: 2022-06-25 13:30:37
- * @LastEditTime: 2022-06-26 16:30:48
+ * @LastEditTime: 2022-07-09 15:29:12
  * @LastEditors: licl
  * @Description:
  */
 import { createGenerator } from '@unocss/core'
 import { describe, expect, test } from 'vitest'
-import presetMini from '../src/index'
-import { presetMiniTargets } from './assets/preset-mini-targets'
+import presetWeapp from '../src/index'
 import { align, bg, border, borderColor, color, flex, grid, position, shadow, size, spacing, typography } from './assets/weapp'
 
 const uno = createGenerator({
   presets: [
-    presetMini({
+    presetWeapp({
       dark: 'media',
     }),
   ],
@@ -99,11 +98,4 @@ describe('preset-weapp', () => {
     const { css } = await uno.generate(code)
     expect(css).toMatchSnapshot()
   })
-
-  // test('targets', async () => {
-  //   const code = presetMiniTargets.join(' ')
-  //   const { css } = await uno.generate(code)
-
-  //   expect(css).toMatchSnapshot()
-  // })
 })