fix(preset-mini): don't extract non-quoted colon character (#2361)

unocss · Mar 17, 2023 · 69787ef · 69787ef
1 parent be07365
commit 69787ef
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 4 deletions.
diff --git a/packages/core/src/extractors/split.ts b/packages/core/src/extractors/split.ts
@@ -3,8 +3,8 @@ import { isValidSelector } from '../utils'
 
 const defaultSplitRE = /\\?[\s'"`;{}]+/g
 export const quotedArbitraryValuesRE = /(?:[\w&:[\]-]|\[\S+=\S+\])+\[\\?['"]?\S+?['"]\]\]?[\w:-]*/g
-export const arbitraryPropertyRE = /\[(\\\W|[\w-])+:['"]?\S+?['"]?\]/g
-const arbitraryPropertyCandidateRE = new RegExp(`^${arbitraryPropertyRE.source}$`)
+export const arbitraryPropertyRE = /\[(\\\W|[\w-])+:[^\s:]*?("\S+?"|'\S+?'|`\S+?`|[^\s:]+?)[^\s:]*?\)?\]/g
+const arbitraryPropertyCandidateRE = /^\[(\\\W|[\w-])+:['"]?\S+?['"]?\]$/
 
 export const splitCode = (code: string) => {
   const result = new Set<string>()

diff --git a/packages/preset-mini/src/_rules/variables.ts b/packages/preset-mini/src/_rules/variables.ts
@@ -26,7 +26,7 @@ export const cssVariables: Rule[] = [
 ]
 
 export const cssProperty: Rule[] = [
-  [/^\[(--(\w|\\\W)+|[\w-]+):([^:].*)\]$/, ([match, prop,, value]) => {
+  [/^\[(--(\w|\\\W)+|[\w-]+):([^\s:]*?("\S+?"|'\S+?'|`\S+?`|[^\s:]+?)[^\s:]*?\)?)\]$/, ([match, prop,, value]) => {
     if (!isURI(match.slice(1, -1)))
       return { [prop]: h.bracket(`[${value}]`) }
   }],

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1102,6 +1102,7 @@ export const presetMiniNonTargets = [
   '["update:modelValue"]',
   '[https://en.wikipedia.org/wiki]',
   '[Baz::class]',
+  '[foo:bar:baz]',
   // escaped arbitrary css properties only allowed in css variables
   '[cant\~escape:me]',
 

diff --git a/test/extractor.test.ts b/test/extractor.test.ts
@@ -10,6 +10,7 @@ it('extractorSplit', async () => {
   expect(await extract('<div class="text-red border">foo</div>')).toContain('text-red')
   expect(await extract('<div class="<sm:text-lg">foo</div>')).toContain('<sm:text-lg')
   expect(await extract('"class=\"bg-white\""')).toContain('bg-white')
+  expect((await extract('<div class="[content:\'bar:baz\'] [foo:bar:baz]">')).includes('[foo:bar:baz]')).toBeFalsy()
 })
 
 it('extractorSvelte uses regular split with non .svelte files', async () => {

diff --git a/test/pos.test.ts b/test/pos.test.ts
@@ -164,7 +164,7 @@ describe('matched-positions', async () => {
       ],
     })
 
-    expect(await match(uno, '<div class="[color:red] [color:\'red\']"></div>'))
+    expect(await match(uno, '<div class="[color:red] [color:\'red\'] [foo:bar:baz] [content:\'bar:baz\']"></div>'))
       .toMatchInlineSnapshot(`
         [
           [
@@ -177,6 +177,11 @@ describe('matched-positions', async () => {
             37,
             "[color:'red']",
           ],
+          [
+            52,
+            71,
+            "[content:'bar:baz']",
+          ],
         ]
       `)
   })