feat(preset-mini): change handler type

packages/preset-mini/src/_rules/static.ts

@@ -69,8 +69,7 @@ export const contentVisibility: Rule[] = [
 ]
 
 export const contents: Rule[] = [
-  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
-  [/^content-(\$.+)]$/, ([, v]) => ({ content: h.cssvar(v) })],
+  [/^content-(.+)$/, ([, v]) => ({ content: h.bracket.cssvar(v) })],
   ['content-empty', { content: '""' }],
   ['content-none', { content: '""' }],
 ]

packages/preset-mini/src/_utils/handlers/handlers.ts

@@ -91,7 +91,7 @@ export function fraction(str: string) {
     return `${round(num * 100)}%`
 }
 
-const bracketTypeRe = /^\[(color|length|position|raw|string):/i
+const bracketTypeRe = /^\[(color|length|position|quoted|string):/i
 function bracketWithType(str: string, requiredType?: string) {
   if (str && str.startsWith('[') && str.endsWith(']')) {
     let base: string | undefined
@@ -125,11 +125,13 @@ function bracketWithType(str: string, requiredType?: string) {
       return
 
     switch (hintedType) {
-      case 'raw': return base
-
       case 'string': return base
         .replace(/(^|[^\\])_/g, '$1 ')
         .replace(/\\_/g, '_')
+
+      case 'quoted': return base
+        .replace(/(^|[^\\])_/g, '$1 ')
+        .replace(/\\_/g, '_')
         .replace(/(['\\])/g, '\\$1')
         .replace(/^(.+)$/, '\'$1\'')
     }

test/__snapshots__/preset-mini.test.ts.snap

@@ -38,7 +38,6 @@ exports[`preset-mini > targets 1`] = `
 /* layer: 1 */
 .uno-layer-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 /* layer: default */
-.content-\\\\$unocss-var{align-content:var(--unocss-var);}
 .fw-\\\\$variable{font-weight:var(--variable);}
 .items-\\\\$size{align-items:var(--size);}
 .ws-\\\\$variable{white-space:var(--variable);}
@@ -295,11 +294,12 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .content-visibility-hidden{content-visibility:hidden;}
 .content-visibility-auto{content-visibility:auto;}
 .content-visibility-unset{content-visibility:unset;}
-.after\\\\:content-\\\\[unocss\\\\]::after,
-.content-\\\\[unocss\\\\]{content:\\"unocss\\";}
-.content-\\\\[\\\\!\\\\]{content:\\"!\\";}
-.content-\\\\[attr\\\\(dashed-attr\\\\)\\\\]{content:\\"attr(dashed-attr)\\";}
-.content-\\\\[attr\\\\(underlined_attr\\\\)\\\\]{content:\\"attr(underlined_attr)\\";}
+.after\\\\:content-\\\\[quoted\\\\:unocss\\\\]::after,
+.content-\\\\[quoted\\\\:unocss\\\\]{content:'unocss';}
+.content-\\\\[quoted\\\\:\\\\!\\\\]{content:'!';}
+.content-\\\\[string\\\\:attr\\\\(dashed-attr\\\\)\\\\]{content:attr(dashed-attr);}
+.content-\\\\[string\\\\:attr\\\\(underlined\\\\\\\\_attr\\\\)\\\\]{content:attr(underlined_attr);}
+.content-\\\\$unocss-var{content:var(--unocss-var);}
 .content-empty,
 .content-none{content:\\"\\";}
 .font-\\\\[system-ui\\\\]{font-family:system-ui;}

test/assets/preset-mini-targets.ts

@@ -610,10 +610,10 @@ export const presetMiniTargets: string[] = [
   // content
   'content-empty',
   'content-none',
-  'content-[!]',
-  'content-[unocss]',
-  'content-[attr(dashed-attr)]',
-  'content-[attr(underlined_attr)]',
+  'content-[quoted:!]',
+  'content-[quoted:unocss]',
+  'content-[string:attr(dashed-attr)]',
+  'content-[string:attr(underlined\\_attr)]',
   'content-$unocss-var',
 
   // content visibility
@@ -923,7 +923,7 @@ export const presetMiniTargets: string[] = [
 
   // variants - pseudo elements
   'before:translate-y-full',
-  'after:content-[unocss]',
+  'after:content-[quoted:unocss]',
   'placeholder-opacity-60',
   'placeholder-color-opacity-60',
   'placeholder-color-red-1',

test/handler.test.ts

@@ -32,16 +32,15 @@ describe('value handler', () => {
     expect(h.bracket('[var(--A\\_B)]')).eql('var(--A_B)')
   })
 
-  it('bracket raw-type', () => {
-    expect(h.bracket('[raw:a b]')).eql('a b')
-    expect(h.bracket('[raw:a_b]')).eql('a_b')
-    expect(h.bracket('[raw:a\\_b]')).eql('a\\_b')
-    expect(h.bracket('[raw:attr("data-label") ":" attr("data-value")]')).eql('attr("data-label") ":" attr("data-value")')
+  it('bracket string-type', () => {
+    expect(h.bracket('[string:a_b]')).eql('a b')
+    expect(h.bracket('[string:a\\_b]')).eql('a\_b')
+    expect(h.bracket('[string:attr("data-label") ":" attr("data-value")]')).eql('attr("data-label") ":" attr("data-value")')
   })
 
-  it('bracket string-type', () => {
-    expect(h.bracket('[string:a_b]')).eql('\'a b\'')
-    expect(h.bracket('[string:a\\_b]')).eql('\'a_b\'')
-    expect(h.bracket('[string:with-\\,-\'-and-"]')).eql('\'with-\\\\,-\\\'-and-"\'')
+  it('bracket quoted-type', () => {
+    expect(h.bracket('[quoted:a_b]')).eql('\'a b\'')
+    expect(h.bracket('[quoted:a\\_b]')).eql('\'a_b\'')
+    expect(h.bracket('[quoted:with-\\,-\'-and-"]')).eql('\'with-\\\\,-\\\'-and-"\'')
   })
 })