diff --git a/packages/preset-mini/src/_rules/static.ts b/packages/preset-mini/src/_rules/static.ts index 705eed53eb..1d8203ab73 100644 --- a/packages/preset-mini/src/_rules/static.ts +++ b/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: '""' }], ] diff --git a/packages/preset-mini/src/_utils/handlers/handlers.ts b/packages/preset-mini/src/_utils/handlers/handlers.ts index 16fa529265..21f0aef56d 100644 --- a/packages/preset-mini/src/_utils/handlers/handlers.ts +++ b/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\'') } diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index cc9ddfd057..f34b43a631 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/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;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 5aae9f8c50..2a3eba51fb 100644 --- a/test/assets/preset-mini-targets.ts +++ b/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', diff --git a/test/handler.test.ts b/test/handler.test.ts index 52df680c62..fa350c990a 100644 --- a/test/handler.test.ts +++ b/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-"\'') }) })