From 93f9b58a0c30d713ee1a1894d9bf42b1a3a36ffc Mon Sep 17 00:00:00 2001 From: Saya Date: Sun, 29 May 2022 21:36:28 +0800 Subject: [PATCH] feat(preset-mini): add `backdrop:x` variant for `::backdrop` pseudo element (#1022) --- packages/preset-mini/src/variants/pseudo.ts | 27 ++++++++++++++------- test/__snapshots__/preset-mini.test.ts.snap | 1 + test/assets/preset-mini-targets.ts | 1 + test/preset-uno.test.ts | 3 +++ 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/preset-mini/src/variants/pseudo.ts b/packages/preset-mini/src/variants/pseudo.ts index 59a76145a7..35564a76ae 100644 --- a/packages/preset-mini/src/variants/pseudo.ts +++ b/packages/preset-mini/src/variants/pseudo.ts @@ -59,7 +59,11 @@ const PseudoClasses: Record = Object.fromEntries([ ['selection', '::selection'], ['marker', '::marker'], ['file', '::file-selector-button'], -].map(key => typeof key === 'string' ? [key, `:${key}`] : key)) +].map(key => Array.isArray(key) ? key : [key, `:${key}`])) + +const PseudoClassesColon: Record = Object.fromEntries([ + ['backdrop', '::backdrop'], +].map(key => Array.isArray(key) ? key : [key, `:${key}`])) const PseudoClassFunctions = [ 'not', @@ -69,6 +73,7 @@ const PseudoClassFunctions = [ ] const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith('::')).map(([key]) => key).join('|') +const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith('::')).map(([key]) => key).join('|') const PseudoClassFunctionsStr = PseudoClassFunctions.join('|') const sortValue = (pseudo: string) => { @@ -77,14 +82,15 @@ const sortValue = (pseudo: string) => { } const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: string): VariantObject => { - const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`) const rawRe = new RegExp(`^${escapeRegExp(parent)}:`) + const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`) + const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`) return { name: `pseudo:${tag}`, match(input: string) { - const match = input.match(re) + const match = input.match(pseudoRE) || input.match(pseudoColonRE) if (match) { - let pseudo = PseudoClasses[match[3]] || `:${match[3]}` + let pseudo = PseudoClasses[match[3]] || PseudoClassesColon[match[3]] || `:${match[3]}` if (match[2]) pseudo = `:${match[2]}(${pseudo})` return { @@ -100,13 +106,15 @@ const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: strin } const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join('|') +const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join('|') const PseudoClassesAndElementsRE = new RegExp(`^(${PseudoClassesAndElementsStr})[:-]`) +const PseudoClassesAndElementsColonRE = new RegExp(`^(${PseudoClassesAndElementsColonStr})[:]`) export const variantPseudoClassesAndElements: VariantObject = { name: 'pseudo', match: (input: string) => { - const match = input.match(PseudoClassesAndElementsRE) + const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE) if (match) { - const pseudo = PseudoClasses[match[1]] || `:${match[1]}` + const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}` return { matcher: input.slice(match[0].length), selector: s => `${s}${pseudo}`, @@ -119,12 +127,13 @@ export const variantPseudoClassesAndElements: VariantObject = { } const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`) +const PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})[:]`) export const variantPseudoClassFunctions: VariantObject = { match: (input: string) => { - const match = input.match(PseudoClassFunctionsRE) + const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE) if (match) { const fn = match[1] - const pseudo = PseudoClasses[match[2]] || `:${match[2]}` + const pseudo = PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}` return { matcher: input.slice(match[0].length), selector: s => `${s}:${fn}(${pseudo})`, @@ -132,7 +141,7 @@ export const variantPseudoClassFunctions: VariantObject = { } }, multiPass: true, - autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}):`, + autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}|${PseudoClassesColonStr}):`, } export const variantTaggedPseudoClasses = (options: PresetMiniOptions = {}): VariantObject[] => { diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index d6cfce0337..a6ebeb5c23 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -408,6 +408,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);} .shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0,0,0,0));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);} .shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);} +.backdrop\\\\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(74,222,128,var(--un-shadow-opacity));} .shadow-current{--un-shadow-color:currentColor;} .shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgba(34,197,94,var(--un-shadow-opacity));} .shadow-green-900\\\\/50{--un-shadow-color:rgba(20,83,45,0.5);} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 5d5b6044d8..2c9b60d346 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -824,6 +824,7 @@ export const presetMiniTargets: string[] = [ 'marker:bg-violet-200', 'file:bg-violet-50', 'hover:file:bg-violet-100', + 'backdrop:shadow-green', // variants - pseudo classes 'rtl:text-right', diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts index 2fc271862a..ff0304e730 100644 --- a/test/preset-uno.test.ts +++ b/test/preset-uno.test.ts @@ -97,6 +97,9 @@ const nonTargets = [ 'tab-$', 'ws-$', + // mini - pseudo colon only + 'backdrop-shadow-green', + // wind - placeholder '$-placeholder-red-200',