diff --git a/packages/preset-mini/src/rules/static.ts b/packages/preset-mini/src/rules/static.ts index c2429c5673..0392585aff 100644 --- a/packages/preset-mini/src/rules/static.ts +++ b/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: '""' }], ] diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index d7d9623ad0..ec6b06f87a 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/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", diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index fac01826d8..bc6723d4b7 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/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;} diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 87ebd45480..9467e3d4d8 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/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){ diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index ba107c7696..fbbc7e6c7f 100644 --- a/test/assets/preset-mini-targets.ts +++ b/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', diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts index 71d0f2c698..69dbb06ec8 100644 --- a/test/preset-attributify.test.ts +++ b/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 diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts index 344dcffa80..4702f72afa 100644 --- a/test/preset-mini.test.ts +++ b/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() + }) }) diff --git a/test/preset-wind.test.ts b/test/preset-wind.test.ts index 584f50cfdd..282333748c 100644 --- a/test/preset-wind.test.ts +++ b/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)