From ca7583c9838f4d4e8e2c24174f175b4f6c84cb73 Mon Sep 17 00:00:00 2001 From: chris-zhu <1633711653@qq.com> Date: Tue, 19 Apr 2022 17:54:22 +0800 Subject: [PATCH] feat(preset-mini): support `important:` variant (#841) --- packages/preset-mini/src/variants/misc.ts | 6 ++++-- test/__snapshots__/preset-attributify.test.ts.snap | 9 ++++++++- test/__snapshots__/preset-mini.test.ts.snap | 2 ++ test/assets/preset-mini-targets.ts | 2 ++ test/preset-attributify.test.ts | 13 +++++++------ 5 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/preset-mini/src/variants/misc.ts b/packages/preset-mini/src/variants/misc.ts index 99d9fcb14d..0b37c98603 100644 --- a/packages/preset-mini/src/variants/misc.ts +++ b/packages/preset-mini/src/variants/misc.ts @@ -38,9 +38,10 @@ export const variantScope: Variant = { export const variantImportant: Variant = { match(matcher) { - if (matcher.startsWith('!')) { + const match = matcher.match(/^(important[:-]|!)/) + if (match) { return { - matcher: matcher.slice(1), + matcher: matcher.slice(match[0].length), body: (body) => { body.forEach((v) => { if (v[1]) @@ -51,6 +52,7 @@ export const variantImportant: Variant = { } } }, + autocomplete: '(important)', } export const variantNegative: Variant = { diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index aa0358b295..b5c81cb4be 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/test/__snapshots__/preset-attributify.test.ts.snap @@ -8,7 +8,8 @@ exports[`attributify > autocomplete extractor 5`] = ` md=\\"[--var:var(--another)]\\" lg=\\"bg-blue-600\\" class=\\"absolute fixed\\" - bg=\\"blue-400 hover:blue-500 dark:!blue-5001 dark:hover:blue-600\\" + important=\\"text-red bg-red\\" + bg=\\"blue-4001 hover:blue-500 dark:!blue-500 dark:hover:blue-600\\" text=\\"sm white\\" !leading-4 flex=\\"!~ col\\" @@ -86,6 +87,8 @@ Set { "[lg~=\\"bg-blue-600\\"]", "absolute", "fixed", + "[important~=\\"text-red\\"]", + "[important~=\\"bg-red\\"]", "[bg~=\\"blue-400\\"]", "[bg~=\\"hover:blue-500\\"]", "[bg~=\\"dark:!blue-500\\"]", @@ -226,6 +229,7 @@ exports[`attributify > fixture1 1`] = ` .dark [bg~=\\"dark\\\\:hover\\\\:blue-600\\"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} [bg~=\\"blue-400\\"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));} [bg~=\\"hover\\\\:blue-500\\"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));} +[important~=\\"bg-red\\"]{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;} [p~=\\"x-4\\"]{padding-left:1rem;padding-right:1rem;} [p~=\\"y-2\\"]{padding-top:0.5rem;padding-bottom:0.5rem;} [p~=\\"t-2\\"], @@ -235,6 +239,7 @@ exports[`attributify > fixture1 1`] = ` [font~=\\"sans\\"]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Arial,\\"Noto Sans\\",sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\",\\"Noto Color Emoji\\";} [text~=\\"sm\\"]{font-size:0.875rem;line-height:1.25rem;} [\\\\!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\\";} @media (min-width: 640px){ @@ -317,6 +322,8 @@ exports[`attributify > variant 1`] = ` "lg-bg-blue-600", undefined, undefined, + "important-text-red", + "important-bg-red", "bg-blue-400", "hover:bg-blue-500", "dark:!bg-blue-500", diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 3f14e615f5..b109601f76 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -42,6 +42,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .pxy{padding:1rem;} .hover\\\\:\\\\!p-1:hover{padding:0.25rem !important;} .hover\\\\:p-5:hover{padding:1.25rem;} +.important\\\\:p-3{padding:0.75rem !important;} .is-hover\\\\:p-4px:is(:hover), .not-hover\\\\:p-4px:not(:hover){padding:4px;} .not-hover\\\\:p-3:not(:hover){padding:0.75rem;} @@ -817,6 +818,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .lt-sm\\\\:m1{margin:0.25rem;} } @media (min-width: 640px){ +.sm\\\\:important\\\\:p-3{padding:0.75rem !important;} .sm\\\\:m-1, .sm\\\\:m1{margin:0.25rem;} } diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index bebd57e03a..6345490e66 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -753,6 +753,8 @@ export const presetMiniTargets: string[] = [ 'peer-not-placeholder-shown:text-2xl', 'sm:m-1', 'sm:m1', + 'important:p-3', + 'sm:important:p-3', // variants class 'all-[.target]-[combinator:test-2]', diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts index 9bcf4fbfe3..28accffba3 100644 --- a/test/preset-attributify.test.ts +++ b/test/preset-attributify.test.ts @@ -11,6 +11,7 @@ describe('attributify', () => { md="[--var:var(--another)]" lg="bg-blue-600" class="absolute fixed" + important="text-red bg-red" bg="blue-400 hover:blue-500 dark:!blue-500 dark:hover:blue-600" text="sm white" !leading-4 @@ -149,12 +150,12 @@ describe('attributify', () => { expect(res).not.toBeNull() - expect(res!.extracted).toMatchInlineSnapshot('"dark:!bg-blue-500"') + expect(res!.extracted).toMatchInlineSnapshot('"bg-blue-400"') expect(res!.transformSuggestions!([`${res!.extracted}1`, `${res!.extracted}2`])) .toMatchInlineSnapshot(` [ - "dark:!blue-5001", - "dark:!blue-5002", + "blue-4001", + "blue-4002", ] `) @@ -162,13 +163,13 @@ describe('attributify', () => { expect(reversed).toMatchInlineSnapshot(` { "end": 189, - "replacement": "dark:!blue-5001", - "start": 175, + "replacement": "blue-4001", + "start": 181, } `) expect(fixture1.slice(reversed.start, reversed.end)) - .toMatchInlineSnapshot('"dark:!blue-500"') + .toMatchInlineSnapshot('"blue-400"') expect(fixture1.slice(0, reversed.start) + reversed.replacement + fixture1.slice(reversed.end)) .toMatchSnapshot() })