feat(preset-mini): support quoted arbitrary values (#2226)

unocss · Feb 22, 2023 · 092ce4c · 092ce4c
1 parent 31774d4
commit 092ce4c
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/packages/core/src/extractors/index.ts b/packages/core/src/extractors/index.ts
@@ -1,2 +1,2 @@
-export { extractorSplit, arbitraryPropertyRE } from './split'
+export { extractorSplit, arbitraryPropertyRE, quotedArbitraryValuesRE } from './split'
 export { extractorSvelte } from './svelte'
diff --git a/packages/core/src/extractors/split.ts b/packages/core/src/extractors/split.ts
@@ -2,6 +2,7 @@ import type { Extractor } from '../types'
 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}$`)
 
@@ -15,6 +16,9 @@ export const splitCode = (code: string) => {
     result.add(match[0])
   }
 
+  for (const match of code.matchAll(quotedArbitraryValuesRE))
+    result.add(match[0])
+
   code.split(defaultSplitRE).forEach((match) => {
     isValidSelector(match) && !arbitraryPropertyCandidateRE.test(match) && result.add(match)
   })

diff --git a/packages/shared-common/src/index.ts b/packages/shared-common/src/index.ts
@@ -1,5 +1,5 @@
 import type { ExtractorContext, UnoGenerator } from '@unocss/core'
-import { arbitraryPropertyRE, escapeRegExp, isAttributifySelector, makeRegexClassGroup } from '@unocss/core'
+import { arbitraryPropertyRE, escapeRegExp, isAttributifySelector, makeRegexClassGroup, quotedArbitraryValuesRE } from '@unocss/core'
 import MagicString from 'magic-string'
 
 // https://github.com/dsblv/string-replace-async/blob/main/index.js
@@ -110,6 +110,14 @@ export function getMatchedPositions(code: string, matched: string[], hasVariantG
     start = end
   })
 
+  // highlight for qouted arbitrary values
+  for (const match of code.matchAll(quotedArbitraryValuesRE)) {
+    const start = match.index!
+    const end = start + match[0].length
+    if (plain.has(match[0]))
+      result.push([start, end, match[0]])
+  }
+
   // highlight for arbitrary css properties
   for (const match of code.matchAll(arbitraryPropertyRE)) {
     const start = match.index!

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -166,6 +166,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .opacity-\\\\$opa{opacity:var(--opa);}
 .opacity-0{opacity:0;}
 .placeholder-opacity-60::placeholder{opacity:0.6;}
+.\\\\[\\\\&\\\\[data-active\\\\=\\\\\\"true\\\\\\"\\\\]\\\\]\\\\:bg-red[data-active=\\"true\\"]{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}
 .bg-\\\\[\\\\#153\\\\]\\\\/10,
 .bg-\\\\[\\\\#1533\\\\]\\\\/10{background-color:rgba(17,85,51,0.1);}
 .bg-\\\\[\\\\#1533\\\\]{--un-bg-opacity:0.2;background-color:rgba(17,85,51,var(--un-bg-opacity));}
@@ -335,6 +336,10 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .content-visibility-unset{content-visibility:unset;}
 .after\\\\:content-\\\\[quoted\\\\:unocss\\\\]::after,
 .content-\\\\[quoted\\\\:unocss\\\\]{content:\\"unocss\\";}
+.before\\\\:\\\\[\\\\&\\\\[data-active\\\\=\\\\'true\\\\'\\\\]\\\\]\\\\:content-\\\\[\\\\'test\\\\'\\\\][data-active='true']::before{content:'test';}
+.content-\\\\[\\\\'quoted_with_space\\\\'\\\\]{content:'quoted with space';}
+.content-\\\\[\\\\'quoted1\\\\'\\\\]{content:'quoted1';}
+.content-\\\\[\\\\\\"quoted2\\\\\\"\\\\]{content:\\"quoted2\\";}
 .content-\\\\[normal\\\\]{content:normal;}
 .content-\\\\[quoted\\\\:\\\\!\\\\]{content:\\"!\\";}
 .content-\\\\[string\\\\:attr\\\\(dashed-attr\\\\)\\\\]{content:attr(dashed-attr);}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -659,6 +659,9 @@ export const presetMiniTargets: string[] = [
   'content-[normal]',
   'content-[quoted:!]',
   'content-[quoted:unocss]',
+  'content-[\'quoted1\']',
+  'content-[\'quoted_with_space\']',
+  'content-["quoted2"]',
   'content-[string:attr(dashed-attr)]',
   'content-[string:attr(underlined\\_attr)]',
   'content-$unocss-var',
@@ -1044,6 +1047,8 @@ export const presetMiniTargets: string[] = [
   '[*[open]:readonly_&]:[&[open]:disabled]:m-17',
   '[@supports(display:grid)]:bg-red/33',
   '[@supports(display:grid)]:[*+&]:bg-red/34',
+  'before:[&[data-active=\'true\']]:content-[\'test\']',
+  '[&[data-active="true"]]:bg-red',
 
   // variants - combinators + pseudo
   'checked:next:text-slate-100',