fix(preset-mini)!: require bracket for content- (#1097)

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

@@ -50,10 +50,8 @@ export const whitespaces: Rule[] = [
 ]
 
 export const contents: Rule[] = [
-  [/^content-(.+)$/, ([, v]) => {
-    const c = h.bracket.cssvar(v)
-    return { content: c == null ? `"${v}"` : c }
-  }],
+  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
+  [/^content-(\$.+)]$/, ([, v]) => ({ content: h.cssvar(v) })],
   ['content-empty', { content: '""' }],
   ['content-none', { content: '""' }],
 ]

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

@@ -26,7 +26,7 @@ exports[`attributify > autocomplete extractor 5`] = `
   translate-x-100%
   translate-y-[10%]
   rotate-30
-  after=\\"content-unocss\\"
+  after=\\"content-[unocss]\\"
   rotate-60=\\"\\" ma=\\"\\"
   m='\`
   1 2
@@ -124,7 +124,7 @@ Set {
   "[translate-y-=\\"\\"]",
   "[%=\\"\\"]",
   "[rotate-30=\\"\\"]",
-  "[after~=\\"content-unocss\\"]",
+  "[after~=\\"content-[unocss]\\"]",
   "[rotate-60=\\"\\"]",
   "[ma=\\"\\"]",
   "[m~=\\"1\\"]",
@@ -237,7 +237,7 @@ exports[`attributify > fixture1 1`] = `
 [\\\\!leading-4=\\"\\"]{line-height:1rem !important;}
 [important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
 [text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
-[after~=\\"content-unocss\\"]::after{content:\\"unocss\\";}
+[after~=\\"content-\\\\[unocss\\\\]\\"]::after{content:\\"unocss\\";}
 @media (min-width: 640px){
 [sm~=\\"\\\\[color\\\\:red\\\\]\\"]{color:red;}
 }
@@ -298,7 +298,7 @@ exports[`attributify > fixture2 1`] = `
 [op-20=\\"\\"]{opacity:0.2;}
 [all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}
 [transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;}
-[after~=\\"content-\\\\[\\\\!\\\\]\\"]::after{content:!;}
+[after~=\\"content-\\\\[\\\\!\\\\]\\"]::after{content:\\"!\\";}
 @media (min-width: 640px){
 [sm~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 }"
@@ -350,7 +350,7 @@ exports[`attributify > variant 1`] = `
   "translate-y-",
   "%",
   "rotate-30",
-  "after-content-unocss",
+  "after-content-[unocss]",
   "rotate-60",
   "ma",
   "m-1",

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

@@ -7,6 +7,11 @@ exports[`preset-mini > custom var prefix 1`] = `
 .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}"
 `;
 
+exports[`preset-mini > none targets 1`] = `
+"/* layer: preflights */
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}"
+`;
+
 exports[`preset-mini > stray targets 1`] = `
 "/* layer: preflights */
 *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}
@@ -22,6 +27,7 @@ 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-\\\\$\\\\{row\\\\.span\\\\}\\\\/24{white-space:var(--\\\\{row\\\\.span\\\\}\\\\/24);}
@@ -250,10 +256,10 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .border-block-style-double{border-block-start-style:double;border-block-end-style:double;}
 .border-is-style-double{border-inline-start-style:double;}
 .after\\\\:content-\\\\[unocss\\\\]::after,
-.content-\\\\[unocss\\\\]{content:unocss;}
-.content-\\\\[\\\\!\\\\]{content:!;}
-.content-\\\\[attr\\\\(dashed-attr\\\\)\\\\]{content:attr(dashed-attr);}
-.content-unocss{content:\\"unocss\\";}
+.content-\\\\[unocss\\\\]{content:\\"unocss\\";}
+.content-\\\\[\\\\!\\\\]{content:\\"!\\";}
+.content-\\\\[attr\\\\(dashed-attr\\\\)\\\\]{content:\\"attr(dashed-attr)\\";}
+.content-\\\\[attr\\\\(underlined_attr\\\\)\\\\]{content:\\"attr(underlined_attr)\\";}
 .content-empty,
 .content-none{content:\\"\\";}
 .font-\\\\[system-ui\\\\]{font-family:system-ui;}

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

@@ -346,12 +346,6 @@ exports[`preset-wind > targets 1`] = `
 .backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
 .filter-none{filter:none;}
 .backdrop-filter-none{-webkit-backdrop-filter:none;backdrop-filter:none;}
-.content-\\\\[attr\\\\(underlined_attr\\\\)\\\\]{content:attr(underlined attr);}
-.content-\\\\[unocss\\\\]{content:unocss;}
-.content-\\\\$unocss-var{content:var(--unocss-var);}
-.content-attr_underline{content:\\"attr_underline\\";}
-.content-attr\\\\(dashed-attr\\\\){content:\\"attr(dashed-attr)\\";}
-.content-unocss{content:\\"unocss\\";}
 .placeholder-inherit::placeholder{color:inherit;}
 .placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));}
 @media (orientation: landscape){

test/assets/preset-mini-targets.ts

@@ -310,7 +310,6 @@ export const presetMiniTargets: string[] = [
   'order-none',
   'content-start',
   'content-center',
-  'content-[!]',
   'items-end',
   'self-stretch',
   'place-content-stretch',
@@ -518,11 +517,7 @@ export const presetMiniTargets: string[] = [
   'select-none',
   'whitespace-pre-wrap',
   'ws-nowrap',
-  'content-empty',
-  'content-none',
-  'content-unocss',
-  'content-[unocss]',
-  'content-[attr(dashed-attr)]',
+
   'break-normal',
   'break-words',
   'text-clip',
@@ -532,6 +527,15 @@ export const presetMiniTargets: string[] = [
   'oblique',
   'antialiased',
 
+  // content
+  'content-empty',
+  'content-none',
+  'content-[!]',
+  'content-[unocss]',
+  'content-[attr(dashed-attr)]',
+  'content-[attr(underlined_attr)]',
+  'content-$unocss-var',
+
   // svg
   'fill-none',
   'fill-current',
@@ -868,6 +872,14 @@ export const presetMiniTargets: string[] = [
   'previous-checked:bg-red-500',
 ]
 
+export const presetMiniNonTargets = [
+  // content requires bracket
+  'content-foo',
+  'content-foo-bar',
+  'content-[foo',
+  'content-foo]',
+]
+
 export const presetMiniStrayTargets: string[] = [
   // variants - negative
   '-border-solid',

test/preset-attributify.test.ts

@@ -29,7 +29,7 @@ describe('attributify', () => {
   translate-x-100%
   translate-y-[10%]
   rotate-30
-  after="content-unocss"
+  after="content-[unocss]"
   rotate-60="" ma=""
   m='\`
   1 2

test/preset-mini.test.ts

@@ -1,7 +1,7 @@
 import { createGenerator, escapeSelector } from '@unocss/core'
 import presetMini from '@unocss/preset-mini'
 import { describe, expect, test } from 'vitest'
-import { presetMiniStrayTargets, presetMiniTargets } from './assets/preset-mini-targets'
+import { presetMiniNonTargets, presetMiniStrayTargets, presetMiniTargets } from './assets/preset-mini-targets'
 import { presetWindTargets } from './assets/preset-wind-targets'
 
 const uno = createGenerator({
@@ -76,4 +76,11 @@ describe('preset-mini', () => {
     expect(css).toMatchSnapshot()
     expect(css).toEqual(css2)
   })
+
+  test('none targets', async () => {
+    const { css, matched } = await uno.generate(new Set(presetMiniNonTargets))
+
+    expect([...matched]).toEqual([])
+    expect(css).toMatchSnapshot()
+  })
 })

test/preset-wind.test.ts

@@ -3,16 +3,6 @@ import presetWind from '@unocss/preset-wind'
 import { describe, expect, test } from 'vitest'
 import { presetWindNonTargets, presetWindTargets } from './assets/preset-wind-targets'
 
-export const localTargets: string[] = [
-  // static
-  'content-unocss',
-  'content-attr(dashed-attr)',
-  'content-attr_underline',
-  'content-[unocss]',
-  'content-[attr(underlined_attr)]',
-  'content-$unocss-var',
-]
-
 const uno = createGenerator({
   presets: [
     presetWind({
@@ -31,7 +21,7 @@ const uno = createGenerator({
 
 describe('preset-wind', () => {
   test('targets', async () => {
-    const targets = [...localTargets, ...presetWindTargets]
+    const targets = presetWindTargets
     const code = targets.join(' ')
     const { css } = await uno.generate(code)
     const { css: css2 } = await uno.generate(code)