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

sibbng · web-flow · commit 69787efd0572 · 2023-03-17T14:36:39.000+01:00
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']",
+          ],
         ]
       `)
   })

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export const cssVariables: Rule[] = [`
`26`	`26`	`]`
`27`	`27`
`28`	`28`	`export const cssProperty: Rule[] = [`
`29`		`- [/^\[(--(\w\|\\\W)+\|[\w-]+):([^:].*)\]$/, ([match, prop,, value]) => {`
	`29`	+ [/^\[(--(\w\|\\\W)+\|[\w-]+):([^\s:]?("\S+?"\|'\S+?'\|`\S+?`\|[^\s:]+?)[^\s:]?\)?)\]$/, ([match, prop,, value]) => {
`30`	`30`	`if (!isURI(match.slice(1, -1)))`
`31`	`31`	return { [prop]: h.bracket(`[${value}]`) }
`32`	`32`	`}],`
Original file line number	Diff line number	Diff line change
`@@ -164,7 +164,7 @@ describe('matched-positions', async () => {`
`164`	`164`	`],`
`165`	`165`	`})`
`166`	`166`
`167`		`- expect(await match(uno, '<div class="[color:red] [color:\'red\']"></div>'))`
	`167`	`+ expect(await match(uno, '<div class="[color:red] [color:\'red\'] [foo:bar:baz] [content:\'bar:baz\']"></div>'))`
`168`	`168`	.toMatchInlineSnapshot(`
`169`	`169`	`[`
`170`	`170`	`[`
`@@ -177,6 +177,11 @@ describe('matched-positions', async () => {`
`177`	`177`	`37,`
`178`	`178`	`"[color:'red']",`
`179`	`179`	`],`
	`180`	`+ [`
	`181`	`+ 52,`
	`182`	`+ 71,`
	`183`	`+ "[content:'bar:baz']",`
	`184`	`+ ],`
`180`	`185`	`]`
`181`	`186`	`)
`182`	`187`	`})`