From bc921eec512a7c32e9fe280c35f09dcc95452d0b Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Wed, 11 Oct 2023 20:25:07 +0800 Subject: [PATCH 1/5] chore(color): keep hsla and rgba consistent with tailwindcss --- packages/rule-utils/src/colors.ts | 5 ++++- .../test/cases/preflights/OutputDev.svelte | 4 ++-- .../test/cases/preflights/OutputProd.svelte | 4 ++-- test/__snapshots__/cli.test.ts.snap | 2 +- test/__snapshots__/postcss.test.ts.snap | 6 +++--- test/assets/output/preset-mini-targets.css | 18 +++++++++--------- test/assets/output/preset-uno-targets-2.css | 2 +- test/assets/output/preset-uno-targets.css | 4 ++-- test/assets/output/preset-wind-targets.css | 6 +++--- test/assets/output/runtime-preset-tagify.css | 2 +- test/color.test.ts | 16 ++++++++-------- test/transformer-directives.test.ts | 2 +- 12 files changed, 37 insertions(+), 34 deletions(-) diff --git a/packages/rule-utils/src/colors.ts b/packages/rule-utils/src/colors.ts index 7d2cacd946..f497a05ba6 100644 --- a/packages/rule-utils/src/colors.ts +++ b/packages/rule-utils/src/colors.ts @@ -58,8 +58,11 @@ export function colorToString(color: CSSColorValue | string, alphaOverride?: str alpha = alphaOverride ?? alpha type = type.toLowerCase() + if (['hsla', 'rgba'].includes(type)) + return `${type.replace('a', '')}a(${components.join(' ')}${alpha == null ? '' : `/${alpha}`})` + // Comma separated functions - if (['hsla', 'hsl', 'rgba', 'rgb'].includes(type)) + if (['hsl', 'rgb'].includes(type)) return `${type.replace('a', '')}a(${components.join(',')}${alpha == null ? '' : `,${alpha}`})` alpha = alpha == null ? '' : ` / ${alpha}` diff --git a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte index d7f3ec7a33..8f228e7aef 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte @@ -112,8 +112,8 @@ } :global(._shadow_32yp54) { --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)); + 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), var(--un-ring-shadow), var(--un-shadow); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte index 3980111a06..552724794c 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte @@ -110,8 +110,8 @@ :global(.usp-ff1ijb) { margin-bottom: 0.25rem; --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)); + 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), var(--un-ring-shadow), var(--un-shadow); } diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap index 4bf822c294..3f0401064e 100644 --- a/test/__snapshots__/cli.test.ts.snap +++ b/test/__snapshots__/cli.test.ts.snap @@ -12,7 +12,7 @@ exports[`cli > supports directives transformer 2`] = `".btn-center{@apply text-c exports[`cli > supports unocss.config.js 1`] = ` "/* layer: shortcuts */ -.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" +.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0 0 0/0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" `; exports[`cli > supports updating source files with transformed utilities ('directives transformer') 1`] = `""`; diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap index 2d9b6ecba1..12e375b637 100644 --- a/test/__snapshots__/postcss.test.ts.snap +++ b/test/__snapshots__/postcss.test.ts.snap @@ -343,11 +343,11 @@ exports[`postcss > @unocss 1`] = ` .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\\\\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0,0,0,0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0,0,0,0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0/0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\[0_4px_3px_\\\\#000\\\\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0,0,0,0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0,0,0,0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0/0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgba(252,165,165,var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css index a03246a614..37b9dd05c4 100644 --- a/test/assets/output/preset-mini-targets.css +++ b/test/assets/output/preset-mini-targets.css @@ -128,7 +128,7 @@ unocss .scope-\[unocss\]\:block{display:block;} .bg-\[\#153\]\/10, .bg-\[\#1533\]\/10{background-color:rgba(17,85,51,0.1);} .bg-\[\#1533\]{--un-bg-opacity:0.2;background-color:rgba(17,85,51,var(--un-bg-opacity));} -.bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1,2,3,var(--un-bg-opacity));} +.bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1 2 3/var(--un-bg-opacity));} .bg-\#452233\/40, .bg-hex-452233\/40{background-color:rgba(69,34,51,0.4);} .bg-red-100{--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));} @@ -419,10 +419,10 @@ unocss .scope-\[unocss\]\:block{display:block;} .text-stroke-blue-500{--un-text-stroke-opacity:1;-webkit-text-stroke-color:rgba(59,130,246,var(--un-text-stroke-opacity));} .text-stroke-op-\$opacity-variable{--un-text-stroke-opacity:var(--opacity-variable);} .text-stroke-op-60{--un-text-stroke-opacity:0.6;} -.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0,0,0,0.2)),0 0 1px var(--un-text-shadow-color, rgba(1,0,5,0.1));text-shadow:var(--un-text-shadow);} +.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0 0 0/0.2)),0 0 1px var(--un-text-shadow-color, rgba(1 0 5/0.1));text-shadow:var(--un-text-shadow);} .text-shadow-\$var{text-shadow:var(--var);} -.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0,0,0,0.26)),0 0 5px var(--un-text-shadow-color, rgba(15,3,86,0.22));text-shadow:var(--un-text-shadow);} -.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0,0,0,0));text-shadow:var(--un-text-shadow);} +.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0 0 0/0.26)),0 0 5px var(--un-text-shadow-color, rgba(15 3 86/0.22));text-shadow:var(--un-text-shadow);} +.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0 0 0/0));text-shadow:var(--un-text-shadow);} .text-shadow-color-red-300{--un-text-shadow-opacity:1;--un-text-shadow-color:rgba(252,165,165,var(--un-text-shadow-opacity));} .text-shadow-color-op-\$opacity-variable{--un-text-shadow-opacity:var(--opacity-variable);} .text-shadow-color-op-30{--un-text-shadow-opacity:0.3;} @@ -519,16 +519,16 @@ unocss .scope-\[unocss\]\:block{display:block;} .oblique{font-style:oblique;} .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .backdrop\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(74,222,128,var(--un-shadow-opacity));} -.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), var(--un-ring-shadow), var(--un-shadow);} +.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), var(--un-ring-shadow), var(--un-shadow);} .shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgba(255,255,255,var(--un-shadow-opacity));} -.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237,0,0,1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237 0 0/1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-\$variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .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);} -.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0,0,0,0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), 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), var(--un-ring-shadow), var(--un-shadow);} .shadow-transparent{--un-shadow-color:transparent;} -.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), var(--un-ring-shadow), 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), var(--un-ring-shadow), var(--un-shadow);} .backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));} .shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);} .shadow-op-50{--un-shadow-opacity:0.5;} @@ -1047,4 +1047,4 @@ unocss .scope-\[unocss\]\:block{display:block;} /* layer: uno css */ .uno-layer-\[uno_css\]\:block{display:block;} /* layer: uno_css */ -.uno-layer-uno_css\:block{display:block;} +.uno-layer-uno_css\:block{display:block;} \ No newline at end of file diff --git a/test/assets/output/preset-uno-targets-2.css b/test/assets/output/preset-uno-targets-2.css index e1449ef672..aac2d7dad9 100644 --- a/test/assets/output/preset-uno-targets-2.css +++ b/test/assets/output/preset-uno-targets-2.css @@ -5,5 +5,5 @@ section{--un-text-opacity:1;color:rgba(156,163,175,var(--un-text-opacity));} .body_main{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} } @media (min-width: 768px){ -aside{--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), var(--un-ring-shadow), var(--un-shadow);} +aside{--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), var(--un-ring-shadow), var(--un-shadow);} } \ No newline at end of file diff --git a/test/assets/output/preset-uno-targets.css b/test/assets/output/preset-uno-targets.css index 8e99462427..0dc4025b8b 100644 --- a/test/assets/output/preset-uno-targets.css +++ b/test/assets/output/preset-uno-targets.css @@ -3,8 +3,8 @@ .border-custom-b\/0{border-color:rgba(var(--custom), 0);} .border-custom-b\/10{border-color:rgba(var(--custom), 0.1);} .bg-custom-b{background-color:rgba(var(--custom), 1);} -.bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c),var(--un-bg-opacity));} -.bg-custom-c\/10{background-color:rgba(var(--custom-c),0.1);} +.bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c)/var(--un-bg-opacity));} +.bg-custom-c\/10{background-color:rgba(var(--custom-c)/0.1);} .bg-custom-d{background-color:hsl(var(--custom-d), 1);} .bg-custom-d\/20{background-color:hsl(var(--custom-d), 0.2);} .bg-custom-e{--un-bg-opacity:1;background-color:hsla(var(--custom-e),var(--un-bg-opacity));} diff --git a/test/assets/output/preset-wind-targets.css b/test/assets/output/preset-wind-targets.css index a4b8193d43..f44dd3faa5 100644 --- a/test/assets/output/preset-wind-targets.css +++ b/test/assets/output/preset-wind-targets.css @@ -307,11 +307,11 @@ .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0,0,0,0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0,0,0,0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0/0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\[0_4px_3px_\#000\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0,0,0,0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0,0,0,0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0/0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgba(252,165,165,var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} diff --git a/test/assets/output/runtime-preset-tagify.css b/test/assets/output/runtime-preset-tagify.css index 8f1b484bbf..4ea0324a14 100644 --- a/test/assets/output/runtime-preset-tagify.css +++ b/test/assets/output/runtime-preset-tagify.css @@ -6,4 +6,4 @@ scale-2{--un-scale-x:0.02;--un-scale-y:0.02;transform:translateX(var(--un-transl hover\:color-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} text-green5\:10{color:rgba(34,197,94,0.1);} text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} -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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file +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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file diff --git a/test/color.test.ts b/test/color.test.ts index 968724e376..3bbd062dd0 100644 --- a/test/color.test.ts +++ b/test/color.test.ts @@ -78,15 +78,15 @@ describe('color utils', () => { const fn = (x: string) => colorToString(parseCssColor(x)!) expect(fn('rgb(0,1,2)')).eql('rgba(0,1,2)') - expect(fn('rgba(0,1,2,3)')).eql('rgba(0,1,2,3)') - expect(fn('rgba(0,(1),2,3)')).eql('rgba(0,(1),2,3)') + expect(fn('rgba(0,1,2,3)')).eql('rgba(0 1 2/3)') + expect(fn('rgba(0,(1),2,3)')).eql('rgba(0 (1) 2/3)') - expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0,1,2,3)') - expect(fn('rgba(0 1 2/ 3)')).eql('rgba(0,1,2,3)') - expect(fn('rgba(0 1 2 /3)')).eql('rgba(0,1,2,3)') - expect(fn('rgba(0 1 2/3)')).eql('rgba(0,1,2,3)') + expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0 1 2/3)') + expect(fn('rgba(0 1 2/ 3)')).eql('rgba(0 1 2/3)') + expect(fn('rgba(0 1 2 /3)')).eql('rgba(0 1 2/3)') + expect(fn('rgba(0 1 2/3)')).eql('rgba(0 1 2/3)') - expect(fn('color(rgba 0 1 2 / 3)')).eql('rgba(0,1,2,3)') + expect(fn('color(rgba 0 1 2 / 3)')).eql('rgba(0 1 2/3)') expect(fn('color(fancy 0 1 2 3 4 5 / 6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') expect(fn('color(fancy 0 1 2 3 4 5 /6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') expect(fn('color(fancy 0 1 2 3 4 5/ 6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') @@ -109,7 +109,7 @@ describe('color utils', () => { expect(colorableShadows('0 0 #0000', '--v')).eql(['0 0 var(--v, rgba(0,0,0,0))']) // with spaces - expect(colorableShadows('0 1px 3px 0 rgba(0, 0, 0, 0.2)', '--v')).eql(['0 1px 3px 0 var(--v, rgba(0,0,0,0.2))']) + expect(colorableShadows('0 1px 3px 0 rgba(0, 0, 0, 0.2)', '--v')).eql(['0 1px 3px 0 var(--v, rgba(0 0 0/0.2))']) // full box-shadow expect(colorableShadows('var(--un-shadow-inset) 0 1px 3px 0 #0000', '--v')).eql(['var(--un-shadow-inset) 0 1px 3px 0 var(--v, rgba(0,0,0,0))']) diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts index a77603b605..f849d89334 100644 --- a/test/transformer-directives.test.ts +++ b/test/transformer-directives.test.ts @@ -469,7 +469,7 @@ div { "div { color: rgba(239, 68, 68, 50%); color: rgba(255, 0, 0, 0.5); - color: rgba(255, 0, 0, 50%); + color: rgba(255 0 0/ 50%); color: hsla(210, 50%, 50%, 0.6); color: hsla(210, 50%, 50%, 60%); } From 79c7871130387b2ac788529fcdc251bfc51ddb2e Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:37:58 +0800 Subject: [PATCH 2/5] chore: update --- docs/.vitepress/theme/vars.css | 12 +- docs/config/shortcuts.md | 8 +- docs/config/theme.md | 2 +- docs/presets/mini.md | 6 +- docs/presets/wind.md | 2 +- docs/transformers/compile-class.md | 2 +- examples/sveltekit-scoped/README.md | 4 +- examples/sveltekit/src/routes/Counter.svelte | 4 +- examples/sveltekit/src/routes/Go.svelte | 4 +- interactive/markdown.css | 4 +- interactive/spa-loading-template.html | 2 +- packages/inspector/client/main.css | 4 +- packages/preset-mini/src/_rules/ring.ts | 4 +- packages/preset-mini/src/_rules/shadow.ts | 6 +- packages/preset-mini/src/_theme/filters.ts | 14 +- packages/preset-mini/src/_theme/font.ts | 12 +- packages/preset-mini/src/_theme/misc.ts | 16 +- packages/preset-mini/src/_utils/utilities.ts | 6 +- packages/preset-wind/src/rules/background.ts | 4 +- packages/rule-utils/src/colors.ts | 9 +- packages/shared-docs/src/utils.ts | 2 +- .../transformClasses/index.test.ts | 12 +- .../test-outputs/EverythingDev.svelte | 8 +- .../test-outputs/EverythingProd.svelte | 10 +- .../test/cases/basic/OutputDev.svelte | 2 +- .../test/cases/basic/OutputProd.svelte | 2 +- .../test/cases/needs-parent/OutputDev.svelte | 8 +- .../test/cases/needs-parent/OutputProd.svelte | 8 +- .../test/cases/preflights/OutputDev.svelte | 29 +-- .../test/cases/preflights/OutputProd.svelte | 29 +-- .../test/cases/prose/OutputDev.svelte | 16 +- .../test/cases/prose/OutputProd.svelte | 16 +- packages/transformer-compile-class/README.md | 2 +- packages/vscode/src/utils.ts | 16 +- playground/src/main.css | 2 +- test/__snapshots__/cli.test.ts.snap | 6 +- test/__snapshots__/order.test.ts.snap | 12 +- test/__snapshots__/parser.test.ts.snap | 2 +- test/__snapshots__/postcss.test.ts.snap | 86 +++---- test/__snapshots__/prefix.test.ts.snap | 4 +- test/__snapshots__/preflights.test.ts.snap | 8 +- .../preset-attributify.test.ts.snap | 4 +- test/__snapshots__/scope.test.ts.snap | 6 +- .../output/preset-mini-active-pseudo.css | 6 +- .../output/preset-mini-custom-var-prefix.css | 2 +- .../preset-mini-dark-customizing-selector.css | 4 +- .../output/preset-mini-empty-prefix.css | 2 +- test/assets/output/preset-mini-group-data.css | 4 +- .../preset-mini-nested-theme-colors.css | 6 +- .../preset-mini-non-nested-theme-colors.css | 8 +- test/assets/output/preset-mini-targets.css | 228 +++++++++--------- test/assets/output/preset-prefixes-1.css | 2 +- test/assets/output/preset-prefixes-2.css | 2 +- .../output/preset-uno-custom-var-prefix.css | 2 +- .../assets/output/preset-uno-empty-prefix.css | 2 +- test/assets/output/preset-uno-targets-2.css | 6 +- test/assets/output/preset-uno-targets.css | 26 +- test/assets/output/preset-web-fonts.css | 2 +- .../output/preset-wind-custom-var-prefix.css | 2 +- .../output/preset-wind-empty-var-prefix.css | 2 +- test/assets/output/preset-wind-targets.css | 72 +++--- test/assets/output/runtime-preset-tagify.css | 8 +- .../assets/output/shortcuts-nested-pseudo.css | 16 +- .../output/transformer-directives-apply.css | 28 +-- .../transformer-directives-variant-group.css | 2 +- .../preset-attributify/case-1/output.css | 22 +- .../preset-attributify/case-2/output.css | 20 +- .../preset-attributify/case-4/output.css | 26 +- .../preset-attributify/case-5/output.css | 4 +- .../preset-attributify/case-6/output.css | 2 +- test/color.test.ts | 54 ++--- test/config.test.ts | 4 +- test/layer.test.ts | 2 +- test/preset-tagify.test.ts | 12 +- test/shortcuts.test.ts | 44 ++-- test/transformer-compile-class.test.ts | 12 +- test/transformer-directives.test.ts | 24 +- test/utils.test.ts | 16 +- 78 files changed, 542 insertions(+), 547 deletions(-) diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 36f8d88def..b4cdd1e264 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -9,16 +9,16 @@ :root { --vp-c-gutter: var(--vp-c-divider); - --vp-code-block-bg: rgba(125,125,125,0.04); + --vp-code-block-bg: rgba(125 125 125 / 0.04); --vp-code-tab-divider: var(--vp-c-divider); - --vp-code-copy-code-bg: rgba(125,125,125,0.1); - --vp-code-copy-code-hover-bg: rgba(125,125,125,0.2); - --vp-c-disabled-bg: rgba(125,125,125,0.2); + --vp-code-copy-code-bg: rgba(125 125 125 / 0.1); + --vp-code-copy-code-hover-bg: rgba(125 125 125 / 0.2); + --vp-c-disabled-bg: rgba(125 125 125 / 0.2); --vp-code-tab-text-color: var(--vp-c-text-2); --vp-code-tab-active-text-color: var(--vp-c-text-1); --vp-code-tab-hover-text-color: var(--vp-c-text-1); --vp-code-copy-code-active-text: var(--vp-c-text-2); - --vp-c-text-dark-3: rgba(56, 56, 56, 0.8); + --vp-c-text-dark-3: rgba(56 56 56 / 0.8); --vp-c-brand-lightest: var(--vp-c-brand-1); --vp-c-highlight-bg: var(--vp-c-brand-light); @@ -26,7 +26,7 @@ } .dark { - --vp-code-block-bg: rgba(0,0,0,0.2); + --vp-code-block-bg: rgba(0 0 0 / 0.2); --vp-c-text-code: #c0cec0; } diff --git a/docs/config/shortcuts.md b/docs/config/shortcuts.md index 30a156aa32..2c6ed73b2a 100644 --- a/docs/config/shortcuts.md +++ b/docs/config/shortcuts.md @@ -45,10 +45,10 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS: padding-left: 1rem; padding-right: 1rem; --un-bg-opacity: 1; - background-color: rgba(74, 222, 128, var(--un-bg-opacity)); + background-color: rgba(74 222 128 / var(--un-bg-opacity)); border-radius: 0.5rem; --un-text-opacity: 1; - color: rgba(220, 252, 231, var(--un-text-opacity)); + color: rgba(220 252 231 / var(--un-text-opacity)); } .btn-red { padding-top: 0.5rem; @@ -56,9 +56,9 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS: padding-left: 1rem; padding-right: 1rem; --un-bg-opacity: 1; - background-color: rgba(248, 113, 113, var(--un-bg-opacity)); + background-color: rgba(248 113 113 / var(--un-bg-opacity)); border-radius: 0.5rem; --un-text-opacity: 1; - color: rgba(254, 226, 226, var(--un-text-opacity)); + color: rgba(254 226 226 / var(--un-text-opacity)); } ``` diff --git a/docs/config/theme.md b/docs/config/theme.md index a86f3ff0dd..a88cd59a0a 100644 --- a/docs/config/theme.md +++ b/docs/config/theme.md @@ -17,7 +17,7 @@ theme: { colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { - 'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" + 'primary': 'hsla(var(--hue 217) 78% / 51%)', //class="bg-brand-primary" } }, } diff --git a/docs/presets/mini.md b/docs/presets/mini.md index 92582bbdce..d30ca77979 100644 --- a/docs/presets/mini.md +++ b/docs/presets/mini.md @@ -63,7 +63,7 @@ will generate: ```css .dark .dark\:bg-red\:10 { - background-color: rgba(248, 113, 113, 0.1); + background-color: rgba(248 113 113 / 0.1); } ``` @@ -76,7 +76,7 @@ To opt-in media query based dark mode, you can use `@dark:` variant: ```css @media (prefers-color-scheme: dark) { .\@dark\:bg-red\:10 { - background-color: rgba(248, 113, 113, 0.1); + background-color: rgba(248 113 113 / 0.1); } } ``` @@ -125,7 +125,7 @@ presetMini({ colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { - 'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" + 'primary': 'hsla(var(--hue 217) 78% / 51%)', //class="bg-brand-primary" } }, } diff --git a/docs/presets/wind.md b/docs/presets/wind.md index 27e575bac3..8abf4b873e 100644 --- a/docs/presets/wind.md +++ b/docs/presets/wind.md @@ -91,7 +91,7 @@ The variant `@hover-text-red` will output: @media (hover: hover) and (pointer: fine) { .\@hover-text-red:hover { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgba(248 113 113 / var(--un-text-opacity)); } } ``` diff --git a/docs/transformers/compile-class.md b/docs/transformers/compile-class.md index fedd4b4f79..17dc74fee0 100644 --- a/docs/transformers/compile-class.md +++ b/docs/transformers/compile-class.md @@ -68,7 +68,7 @@ Will be compiled to: } .uno-0qw2gr:hover { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgba(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { diff --git a/examples/sveltekit-scoped/README.md b/examples/sveltekit-scoped/README.md index 958d7c71c6..c665be4109 100644 --- a/examples/sveltekit-scoped/README.md +++ b/examples/sveltekit-scoped/README.md @@ -57,7 +57,7 @@ will be transformed into this: diff --git a/examples/sveltekit/src/routes/Go.svelte b/examples/sveltekit/src/routes/Go.svelte index 9238e69346..318b7afbd0 100644 --- a/examples/sveltekit/src/routes/Go.svelte +++ b/examples/sveltekit/src/routes/Go.svelte @@ -30,7 +30,7 @@ font-size: inherit; padding: 1em 2em; color: #ff3e00; - background-color: rgba(255, 62, 0, 0.1); + background-color: rgba(255 62 0 / 0.1); border-radius: 2em; border: 2px solid rgba(255, 62, 0, 0); outline: none; @@ -43,6 +43,6 @@ border: 2px solid #ff3e00; } button:active { - background-color: rgba(255, 62, 0, 0.2); + background-color: rgba(255 62 0 / 0.2); } diff --git a/interactive/markdown.css b/interactive/markdown.css index 853a7ba85f..2a2a186da1 100644 --- a/interactive/markdown.css +++ b/interactive/markdown.css @@ -58,7 +58,7 @@ } mark { - background-color: rgba(187, 128, 9, 0.15); + background-color: rgba(187 128 9 / 0.15); color: #c9d1d9; } @@ -629,7 +629,7 @@ } table tr:nth-child(2n) { - background-color: rgba(156, 163, 175, 0.02); + background-color: rgba(156 163 175 / 0.02); } img { diff --git a/interactive/spa-loading-template.html b/interactive/spa-loading-template.html index a78ed85525..59c5f4dba3 100644 --- a/interactive/spa-loading-template.html +++ b/interactive/spa-loading-template.html @@ -27,7 +27,7 @@ @media (prefers-color-scheme: dark) { html { - background-color: rgba(18, 18, 18, 1); + background-color: rgba(18 18 18 / 1); color-scheme: dark; } } diff --git a/packages/inspector/client/main.css b/packages/inspector/client/main.css index f234d52de7..61d959aac3 100644 --- a/packages/inspector/client/main.css +++ b/packages/inspector/client/main.css @@ -23,7 +23,7 @@ html:not(.dark) { left: 0; top: 0; transition: opacity 0.4s; - background-color: rgba(125,125,125,0.1); + background-color: rgba(125 125 125 / 0.1); opacity: 0; z-index: 1; } @@ -95,4 +95,4 @@ html:not(.dark) { } .dark .v-popper--theme-dropdown .v-popper__arrow-inner { border-color: #080808; -} \ No newline at end of file +} diff --git a/packages/preset-mini/src/_rules/ring.ts b/packages/preset-mini/src/_rules/ring.ts index 44cd883b8a..e1c6865482 100644 --- a/packages/preset-mini/src/_rules/ring.ts +++ b/packages/preset-mini/src/_rules/ring.ts @@ -8,8 +8,8 @@ export const ringBase = { '--un-ring-offset-width': '0px', '--un-ring-offset-color': '#fff', '--un-ring-width': '0px', - '--un-ring-color': 'rgba(147,197,253,0.5)', - '--un-shadow': '0 0 rgba(0,0,0,0)', + '--un-ring-color': 'rgba(147 197 253 / 0.5)', + '--un-shadow': '0 0 rgba(0 0 0 / 0)', } export const rings: Rule[] = [ diff --git a/packages/preset-mini/src/_rules/shadow.ts b/packages/preset-mini/src/_rules/shadow.ts index 9aaedadb59..1b631701db 100644 --- a/packages/preset-mini/src/_rules/shadow.ts +++ b/packages/preset-mini/src/_rules/shadow.ts @@ -4,10 +4,10 @@ import { colorResolver, colorableShadows, h, hasParseableColor } from '../utils' import { varEmpty } from './static' export const boxShadowsBase = { - '--un-ring-offset-shadow': '0 0 rgba(0,0,0,0)', - '--un-ring-shadow': '0 0 rgba(0,0,0,0)', + '--un-ring-offset-shadow': '0 0 rgba(0 0 0 / 0)', + '--un-ring-shadow': '0 0 rgba(0 0 0 / 0)', '--un-shadow-inset': varEmpty, - '--un-shadow': '0 0 rgba(0,0,0,0)', + '--un-shadow': '0 0 rgba(0 0 0 / 0)', } export const boxShadows: Rule[] = [ diff --git a/packages/preset-mini/src/_theme/filters.ts b/packages/preset-mini/src/_theme/filters.ts index c6945d8ae3..767c4175ce 100644 --- a/packages/preset-mini/src/_theme/filters.ts +++ b/packages/preset-mini/src/_theme/filters.ts @@ -10,11 +10,11 @@ export const blur = { } export const dropShadow = { - 'DEFAULT': ['0 1px 2px rgba(0,0,0,0.1)', '0 1px 1px rgba(0,0,0,0.06)'], - 'sm': '0 1px 1px rgba(0,0,0,0.05)', - 'md': ['0 4px 3px rgba(0,0,0,0.07)', '0 2px 2px rgba(0,0,0,0.06)'], - 'lg': ['0 10px 8px rgba(0,0,0,0.04)', '0 4px 3px rgba(0,0,0,0.1)'], - 'xl': ['0 20px 13px rgba(0,0,0,0.03)', '0 8px 5px rgba(0,0,0,0.08)'], - '2xl': '0 25px 25px rgba(0,0,0,0.15)', - 'none': '0 0 rgba(0,0,0,0)', + 'DEFAULT': ['0 1px 2px rgba(0 0 0 / 0.1)', '0 1px 1px rgba(0 0 0 / 0.06)'], + 'sm': '0 1px 1px rgba(0 0 0 / 0.05)', + 'md': ['0 4px 3px rgba(0 0 0 / 0.07)', '0 2px 2px rgba(0 0 0 / 0.06)'], + 'lg': ['0 10px 8px rgba(0 0 0 / 0.04)', '0 4px 3px rgba(0 0 0 / 0.1)'], + 'xl': ['0 20px 13px rgba(0 0 0 / 0.03)', '0 8px 5px rgba(0 0 0 / 0.08)'], + '2xl': '0 25px 25px rgba(0 0 0 / 0.15)', + 'none': '0 0 rgba(0 0 0 / 0)', } diff --git a/packages/preset-mini/src/_theme/font.ts b/packages/preset-mini/src/_theme/font.ts index f8c3a0299c..8553497b9e 100644 --- a/packages/preset-mini/src/_theme/font.ts +++ b/packages/preset-mini/src/_theme/font.ts @@ -73,12 +73,12 @@ export const textStrokeWidth: Theme['textStrokeWidth'] = { } satisfies Theme['textStrokeWidth'] export const textShadow = { - DEFAULT: ['0 0 1px rgba(0,0,0,0.2)', '0 0 1px rgba(1,0,5,0.1)'], - none: '0 0 rgba(0,0,0,0)', - sm: '1px 1px 3px rgba(36,37,47,0.25)', - md: ['0 1px 2px rgba(30,29,39,0.19)', '1px 2px 4px rgba(54,64,147,0.18)'], - lg: ['3px 3px 6px rgba(0,0,0,0.26)', '0 0 5px rgba(15,3,86,0.22)'], - xl: ['1px 1px 3px rgba(0,0,0,0.29)', '2px 4px 7px rgba(73,64,125,0.35)'], + DEFAULT: ['0 0 1px rgba(0 0 0 / 0.2)', '0 0 1px rgba(1 0 5 / 0.1)'], + none: '0 0 rgba(0 0 0 / 0)', + sm: '1px 1px 3px rgba(36 37 47 / 0.25)', + md: ['0 1px 2px rgba(30 29 39 / 0.19)', '1px 2px 4px rgba(54 64 147 / 0.18)'], + lg: ['3px 3px 6px rgba(0 0 0 / 0.26)', '0 0 5px rgba(15 3 86 / 0.22)'], + xl: ['1px 1px 3px rgba(0 0 0 / 0.29)', '2px 4px 7px rgba(73 64 125 / 0.35)'], } satisfies Theme['textShadow'] export const lineHeight = { diff --git a/packages/preset-mini/src/_theme/misc.ts b/packages/preset-mini/src/_theme/misc.ts index 210620b047..bce9b180b2 100644 --- a/packages/preset-mini/src/_theme/misc.ts +++ b/packages/preset-mini/src/_theme/misc.ts @@ -59,14 +59,14 @@ export const borderRadius = { } satisfies Theme['borderRadius'] export const boxShadow = { - 'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)'], - 'none': '0 0 rgba(0,0,0,0)', - 'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)', - 'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)'], - 'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)'], - 'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)'], - '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)', - 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.05)', + 'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0 0 0 / 0.1)'], + 'none': '0 0 rgba(0 0 0 / 0)', + 'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0 0 0 / 0.05)', + 'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0 0 0 / 0.1)'], + 'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0 0 0 / 0.1)'], + 'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0 0 0 / 0.1)'], + '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0 0 0 / 0.25)', + 'inner': 'inset 0 2px 4px 0 rgba(0 0 0 / 0.05)', } satisfies Theme['boxShadow'] export const easing = { diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts index 034e369e65..43fb5fa86e 100644 --- a/packages/preset-mini/src/_utils/utilities.ts +++ b/packages/preset-mini/src/_utils/utilities.ts @@ -155,15 +155,15 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef * * @example Resolving 'red-100' from theme: * colorResolver('background-color', 'background')('', 'red-100') - * return { '--un-background-opacity': '1', 'background-color': 'rgba(254,226,226,var(--un-background-opacity))' } + * return { '--un-background-opacity': '1', 'background-color': 'rgba(254 226 226 / var(--un-background-opacity))' } * * @example Resolving 'red-100/20' from theme: * colorResolver('background-color', 'background')('', 'red-100/20') - * return { 'background-color': 'rgba(204,251,241,0.22)' } + * return { 'background-color': 'rgba(204 251 241 / 0.22)' } * * @example Resolving 'hex-124': * colorResolver('color', 'text')('', 'hex-124') - * return { '--un-text-opacity': '1', 'color': 'rgba(17,34,68,var(--un-text-opacity))' } + * return { '--un-text-opacity': '1', 'color': 'rgba(17 34 68 / var(--un-text-opacity))' } * * @param property - Property for the css value to be created. * @param varName - Base name for the opacity variable. diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index 93254cbe82..cb2503b661 100644 --- a/packages/preset-wind/src/rules/background.ts +++ b/packages/preset-wind/src/rules/background.ts @@ -7,7 +7,7 @@ function bgGradientToValue(cssColor: CSSColorValue | undefined) { if (cssColor) return colorToString(cssColor, 0) - return 'rgba(255,255,255,0)' + return 'rgba(255 255 255 / 0)' } function bgGradientColorValue(mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) { @@ -92,7 +92,7 @@ export const backgroundStyles: Rule[] = [ [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()], // images [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({ - 'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`, + 'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))))`, }), { autocomplete: ['bg-gradient-repeating', 'bg-gradient-(linear|radial|conic)', 'bg-gradient-repeating-(linear|radial|conic)'] }], // ignore any center position [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => { diff --git a/packages/rule-utils/src/colors.ts b/packages/rule-utils/src/colors.ts index f497a05ba6..91538f524e 100644 --- a/packages/rule-utils/src/colors.ts +++ b/packages/rule-utils/src/colors.ts @@ -29,9 +29,6 @@ export function parseCssColor(str = ''): CSSColorValue | undefined { if (components.length === 0) return - if (['rgba', 'hsla'].includes(type) && alpha == null) - return - if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length)) return @@ -59,11 +56,7 @@ export function colorToString(color: CSSColorValue | string, alphaOverride?: str type = type.toLowerCase() if (['hsla', 'rgba'].includes(type)) - return `${type.replace('a', '')}a(${components.join(' ')}${alpha == null ? '' : `/${alpha}`})` - - // Comma separated functions - if (['hsl', 'rgb'].includes(type)) - return `${type.replace('a', '')}a(${components.join(',')}${alpha == null ? '' : `,${alpha}`})` + return `${type}(${components.join(' ')}${alpha == null ? '' : ` / ${alpha}`})` alpha = alpha == null ? '' : ` / ${alpha}` if (cssColorFunctions.includes(type)) diff --git a/packages/shared-docs/src/utils.ts b/packages/shared-docs/src/utils.ts index c15ee63a94..abc5768a9b 100644 --- a/packages/shared-docs/src/utils.ts +++ b/packages/shared-docs/src/utils.ts @@ -9,7 +9,7 @@ export function extractColors(css: string) { if (Number.isNaN(r)) return '' if (!Number.isNaN(a)) - return `rgba(${r}, ${g}, ${b}, ${a})` + return `rgba(${r} ${g} ${b} / ${a})` return `rgb(${r}, ${g}, ${b})` }) .filter(Boolean) diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts index 6087982647..b4351e19cf 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts @@ -47,7 +47,7 @@ describe('transform', () => { " @@ -58,7 +58,7 @@ describe('transform', () => { " @@ -260,8 +260,8 @@ describe('transform', () => { :global(.uno-3h14cd) { font-weight: 600; --un-text-opacity: 1; - color: rgba(34, 197, 94, var(--un-text-opacity)); - color: rgba(96, 165, 250, var(--un-text-opacity)); + color: rgb(34 197 94 / var(--un-text-opacity)); + color: rgb(96 165 250 / var(--un-text-opacity)); } :global(.uno-r4l94t) { font-weight: 700; @@ -272,7 +272,7 @@ describe('transform', () => { } :global(.uno-ffvc5a) { --un-text-opacity: 1; - color: rgba(220, 38, 38, var(--un-text-opacity)); + color: rgb(220 38 38 / var(--un-text-opacity)); } " @@ -348,7 +348,7 @@ describe('transform', () => { " diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte index 46ecf47d7f..8c3f7bc869 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte @@ -59,11 +59,11 @@ } :global(._bg-red-500_7dkb0w) { --un-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--un-bg-opacity)); + background-color: rgb(239 68 68 / var(--un-bg-opacity)); } :global(.dark ._dark\:hover\:bg-green-500_7dkb0w:hover) { --un-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--un-bg-opacity)); + background-color: rgb(34 197 94 / var(--un-bg-opacity)); } :global(._text-center_7dkb0w) { text-align: center; @@ -74,11 +74,11 @@ } :global(._text-orange-400_7dkb0w) { --un-text-opacity: 1; - color: rgba(251, 146, 60, var(--un-text-opacity)); + color: rgb(251 146 60 / var(--un-text-opacity)); } :global(._hover\:text-red_7dkb0w:hover) { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { :global(._sm\:text-left_7dkb0w) { diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte index ea3188979b..7625f4ec01 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte @@ -32,7 +32,7 @@ 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)); --un-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--un-bg-opacity)); + background-color: rgb(239 68 68 / var(--un-bg-opacity)); } :global(.uno-rdvmaz > :not([hidden]) ~ :not([hidden])) { --un-space-x-reverse: 0; @@ -44,7 +44,7 @@ } :global(.dark .uno-uovm2y:hover) { --un-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--un-bg-opacity)); + background-color: rgb(34 197 94 / var(--un-bg-opacity)); } :global(.uno-rdvmaz) { text-align: center; @@ -55,15 +55,15 @@ } :global(.uno-y37ej3) { --un-text-opacity: 1; - color: rgba(251, 146, 60, var(--un-text-opacity)); + color: rgb(251 146 60 / var(--un-text-opacity)); } :global(.uno-deus5r:hover) { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } :global(.uno-wt89uz:hover) { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { :global(.uno-rdvmaz) { diff --git a/packages/svelte-scoped/test/cases/basic/OutputDev.svelte b/packages/svelte-scoped/test/cases/basic/OutputDev.svelte index 5d7d51962d..f99c585b9a 100644 --- a/packages/svelte-scoped/test/cases/basic/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/basic/OutputDev.svelte @@ -3,7 +3,7 @@ diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte index 8b745a426e..31a2ee8616 100644 --- a/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte @@ -24,19 +24,19 @@ button { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } button:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) button { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) button:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte index 0032b7243e..abfa7d9875 100644 --- a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte @@ -24,19 +24,19 @@ button { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } button:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) button { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) button:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte index 8f228e7aef..c1974e2939 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -112,27 +112,28 @@ } :global(._shadow_32yp54) { --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)); + 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), var(--un-ring-shadow), var(--un-shadow); } div { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } div:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) div { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) div:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte index 552724794c..3aa5eec1be 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -110,27 +110,28 @@ :global(.usp-ff1ijb) { margin-bottom: 0.25rem; --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)); + 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), var(--un-ring-shadow), var(--un-shadow); } div { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } div:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) div { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) div:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/prose/OutputDev.svelte b/packages/svelte-scoped/test/cases/prose/OutputDev.svelte index 6973ded07f..34072b504e 100644 --- a/packages/svelte-scoped/test/cases/prose/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/prose/OutputDev.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; diff --git a/packages/svelte-scoped/test/cases/prose/OutputProd.svelte b/packages/svelte-scoped/test/cases/prose/OutputProd.svelte index 6973ded07f..34072b504e 100644 --- a/packages/svelte-scoped/test/cases/prose/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/prose/OutputProd.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-shadow: 0 0 rgba(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgba(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgba(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; diff --git a/packages/transformer-compile-class/README.md b/packages/transformer-compile-class/README.md index 7c9b440366..d52512baaa 100644 --- a/packages/transformer-compile-class/README.md +++ b/packages/transformer-compile-class/README.md @@ -52,7 +52,7 @@ Will be compiled to: } .uno-0qw2gr:hover { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgba(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { diff --git a/packages/vscode/src/utils.ts b/packages/vscode/src/utils.ts index f03cc133d5..174744636b 100644 --- a/packages/vscode/src/utils.ts +++ b/packages/vscode/src/utils.ts @@ -93,10 +93,10 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * ```css *.dark [border="dark\:gray-700"] { * --un-border-opacity: 1; - * border-color: rgba(55, 65, 81, var(--un-border-opacity)); + * border-color: rgba(55 65 81 / var(--un-border-opacity)); *} * ``` - * return `rgba(55, 65, 81, 1)` + * return `rgba(55 65 81 / 1)` * * @example Input with no-value CSS var and its fallback value * ```css @@ -104,12 +104,12 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * background-color: hsla(217, 78%, 51%, var(--no-value, 0.5)); *} * ``` - * return `hsla(217, 78%, 51%, 0.5)` + * return `hsla(217 78% 51% / 0.5)` * * @example Input with no-value CSS var * ```css *.bg-brand-primary { - * background-color: hsla(217, 78%, 51%, var(--no-value)); + * background-color: hsla(217 78% 51% / var(--no-value)); *} * ``` * return `hsla(217, 78%, 51%)` @@ -118,7 +118,7 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * @returns The **first** CSS color string (hex, rgb[a], hsl[a]) or `undefined` */ export function getColorString(str: string) { - let colorString = str.match(cssColorRegex)?.[0] // e.g rgba(248, 113, 113, var(--maybe-css-var)) + let colorString = str.match(cssColorRegex)?.[0] // e.g rgba(248 113 113 / var(--maybe-css-var)) if (!colorString) return @@ -132,13 +132,13 @@ export function getColorString(str: string) { const fallback = match.groups?.fallback if (cssVarName && cssVars.get(cssVarName)) - // rgba(248, 113, 113, var(--un-text-opacity)) => rgba(248, 113, 113, 1) + // rgba(248 113 113 / var(--un-text-opacity)) => rgba(248 113 113 / 1) colorString = colorString.replaceAll(matchedString, cssVars.get(cssVarName) ?? matchedString) else if (fallback) - // rgba(248, 113, 113, var(--no-value, 0.5)) => rgba(248, 113, 113, 0.5) + // rgba(248, 113, 113, var(--no-value, 0.5)) => rgba(248 113 113 / 0.5) colorString = colorString.replaceAll(matchedString, fallback) - // rgba(248, 113, 113, var(--no-value)) => rgba(248, 113, 113) + // rgba(248 113 113 / var(--no-value)) => rgba(248, 113, 113) colorString = colorString.replaceAll(/,?\s+var\(--.*?\)/gm, '') } diff --git a/playground/src/main.css b/playground/src/main.css index 1129b3e3b9..f30054c82e 100644 --- a/playground/src/main.css +++ b/playground/src/main.css @@ -27,7 +27,7 @@ .splitpanes__splitter:before { content: ''; transition: opacity 0.4s; - background-color: rgba(125,125,125,0.1); + background-color: rgba(125 125 125 / 0.1); @apply absolute z-1 top-0 left-0 op-0; } diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap index add50c412c..d1a7e8aa69 100644 --- a/test/__snapshots__/cli.test.ts.snap +++ b/test/__snapshots__/cli.test.ts.snap @@ -17,7 +17,7 @@ exports[`cli > supports directives transformer 2`] = `".btn-center{@apply text-c exports[`cli > supports unocss.config.js 1`] = ` "/* layer: shortcuts */ -.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0 0 0/0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" +.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" `; exports[`cli > supports updating source files with transformed utilities ('directives transformer') 1`] = `""`; @@ -26,7 +26,7 @@ exports[`cli > supports updating source files with transformed utilities ('direc exports[`cli > supports updating source files with transformed utilities ('variant group transformer') 1`] = ` "/* layer: default */ -.border-red{--un-border-opacity:1;border-color:rgba(248,113,113,var(--un-border-opacity));} +.border-red{--un-border-opacity:1;border-color:rgb(248 113 113 / var(--un-border-opacity));} .border-solid{border-style:solid;} .p-4{padding:1rem;}" `; @@ -35,7 +35,7 @@ exports[`cli > supports updating source files with transformed utilities ('varia exports[`cli > supports variantGroup transformer 1`] = ` "/* layer: default */ -.border-red{--un-border-opacity:1;border-color:rgba(248,113,113,var(--un-border-opacity));} +.border-red{--un-border-opacity:1;border-color:rgb(248 113 113 / var(--un-border-opacity));} .border-solid{border-style:solid;} .p-4{padding:1rem;}" `; diff --git a/test/__snapshots__/order.test.ts.snap b/test/__snapshots__/order.test.ts.snap index d0dc46b274..d028aad7e0 100644 --- a/test/__snapshots__/order.test.ts.snap +++ b/test/__snapshots__/order.test.ts.snap @@ -12,16 +12,16 @@ exports[`order > fully controlled rules merged and sorted by body 1`] = ` exports[`order > multiple variant sorting 1`] = ` "/* layer: default */ -.dark .group:hover:focus-within .dark\\\\:group-hover\\\\:group-focus-within\\\\:bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} -.group:hover:focus-within .dark .group-hover\\\\:group-focus-within\\\\:dark\\\\:bg-red-600{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));} -.parent:hover>.light .group:focus-within .parent-hover\\\\:light\\\\:group-focus-within\\\\:bg-yellow-600{--un-bg-opacity:1;background-color:rgba(202,138,4,var(--un-bg-opacity));} -.parent:hover>.light .parent:focus-within>.parent-hover\\\\:light\\\\:parent-focus-within\\\\:bg-green-600{--un-bg-opacity:1;background-color:rgba(22,163,74,var(--un-bg-opacity));}" +.dark .group:hover:focus-within .dark\\\\:group-hover\\\\:group-focus-within\\\\:bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));} +.group:hover:focus-within .dark .group-hover\\\\:group-focus-within\\\\:dark\\\\:bg-red-600{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity));} +.parent:hover>.light .group:focus-within .parent-hover\\\\:light\\\\:group-focus-within\\\\:bg-yellow-600{--un-bg-opacity:1;background-color:rgb(202 138 4 / var(--un-bg-opacity));} +.parent:hover>.light .parent:focus-within>.parent-hover\\\\:light\\\\:parent-focus-within\\\\:bg-green-600{--un-bg-opacity:1;background-color:rgb(22 163 74 / var(--un-bg-opacity));}" `; exports[`order > pseudo-elements sorting 1`] = ` "/* layer: default */ -.dark .dark\\\\:hover\\\\:file\\\\:marker\\\\:bg-red-600::file-selector-button:hover::marker{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));} -.dark .dark\\\\:file\\\\:marker\\\\:hover\\\\:bg-red-600:hover::file-selector-button::marker{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}" +.dark .dark\\\\:hover\\\\:file\\\\:marker\\\\:bg-red-600::file-selector-button:hover::marker{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity));} +.dark .dark\\\\:file\\\\:marker\\\\:hover\\\\:bg-red-600:hover::file-selector-button::marker{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity));}" `; exports[`order > variant ordering 1`] = ` diff --git a/test/__snapshots__/parser.test.ts.snap b/test/__snapshots__/parser.test.ts.snap index 4b86e04eab..d7d67969a8 100644 --- a/test/__snapshots__/parser.test.ts.snap +++ b/test/__snapshots__/parser.test.ts.snap @@ -2,5 +2,5 @@ exports[`split string with custom separator 1`] = ` "/* layer: default */ -.backdrop__shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(74,222,128,var(--un-shadow-opacity));}" +.backdrop__shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(74 222 128 / var(--un-shadow-opacity));}" `; diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap index 12e375b637..bb8d76bf52 100644 --- a/test/__snapshots__/postcss.test.ts.snap +++ b/test/__snapshots__/postcss.test.ts.snap @@ -1,21 +1,21 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`postcss > @apply > basic 1`] = `"div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}.dark div>:focus:hover{font-size:20px;}div:hover{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}"`; +exports[`postcss > @apply > basic 1`] = `"div{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}.dark div>:focus:hover{font-size:20px;}div:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}"`; -exports[`postcss > @apply > media 1`] = `"div{}@media (min-width: 640px){div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}}@media (min-width: 768px){div{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}}@media (min-width: 1024px){div{--un-bg-opacity:1;background-color:rgba(244,114,182,var(--un-bg-opacity));}}@media (min-width: 1280px){div{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));}}"`; +exports[`postcss > @apply > media 1`] = `"div{}@media (min-width: 640px){div{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}}@media (min-width: 768px){div{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));}}@media (min-width: 1024px){div{--un-bg-opacity:1;background-color:rgb(244 114 182 / var(--un-bg-opacity));}}@media (min-width: 1280px){div{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}}"`; exports[`postcss > @screen 1`] = ` "@media (min-width: 768px) and (max-width: 1023.9px) { - div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));} + div{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));} .dark div>:focus:hover{font-size:20px;} - div:hover{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));} + div:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));} div{color:#dc2626} }" `; exports[`postcss > @unocss 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} /* layer: shortcuts */ .container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;} @media (min-width: 640px){ @@ -35,7 +35,7 @@ exports[`postcss > @unocss 1`] = ` } /* layer: _pre */ @media (prefers-contrast: less){ -.uno-layer-_pre\\\\:contrast-less\\\\:bg-gray-3{--un-bg-opacity:1;background-color:rgba(209,213,219,var(--un-bg-opacity));} +.uno-layer-_pre\\\\:contrast-less\\\\:bg-gray-3{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity));} } /* layer: default */ .bg-blend-\\\\$data{background-blend-mode:var(--data);} @@ -196,7 +196,7 @@ exports[`postcss > @unocss 1`] = ` .divide-inline-reverse>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:1;} .divide-\\\\$variable>:not([hidden])~:not([hidden]){border-color:var(--variable);} .divide-current>:not([hidden])~:not([hidden]){border-color:currentColor;} -.divide-green-500>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgba(34,197,94,var(--un-divide-opacity));} +.divide-green-500>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(34 197 94 / var(--un-divide-opacity));} .divide-transparent>:not([hidden])~:not([hidden]){border-color:transparent;} .divide-opacity-50>:not([hidden])~:not([hidden]){--un-divide-opacity:0.5;} .divide-dashed>:not([hidden])~:not([hidden]){border-style:dashed;} @@ -223,40 +223,40 @@ exports[`postcss > @unocss 1`] = ` .bg-gradient-stops-\\\\[blue\\\\,pink\\\\], .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.bg-gradient-from-green-600\\\\/60{--un-gradient-from-position:0%;--un-gradient-from:rgba(22,163,74,0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600\\\\/60{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / 0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-green-500\\\\/50{--un-gradient-from-position:0%;--un-gradient-from:rgba(34,197,94,0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-green-500\\\\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-via-current, -.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} -.bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} -.bg-gradient-via-green-600\\\\/40{--un-gradient-via-position:50%;--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} +.bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} +.bg-gradient-via-green-600\\\\/40{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / 0.4) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} -.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} -.via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} -.via-green-500\\\\/30{--un-gradient-via-position:50%;--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} +.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-green-500\\\\/30{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / 0.3) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-to-current, .to-current{--un-gradient-to-position:100%;--un-gradient-to:currentColor var(--un-gradient-to-position);} -.bg-gradient-to-green-600{--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,var(--un-to-opacity, 1)) var(--un-gradient-to-position);} -.bg-gradient-to-green-600\\\\/60{--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0.6) var(--un-gradient-to-position);} +.bg-gradient-to-green-600{--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} +.bg-gradient-to-green-600\\\\/60{--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0.6) var(--un-gradient-to-position);} .bg-gradient-to-transparent, .to-transparent{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);} .to-\\\\$bg-to{--un-gradient-to-position:100%;--un-gradient-to:var(--bg-to) var(--un-gradient-to-position);} -.to-green-500{--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,var(--un-to-opacity, 1)) var(--un-gradient-to-position);} -.to-green-500\\\\/50{--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0.5) var(--un-gradient-to-position);} +.to-green-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} +.to-green-500\\\\/50{--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0.5) var(--un-gradient-to-position);} .bg-gradient-via-opacity-40{--un-via-opacity:0.4;} .via-opacity-30{--un-via-opacity:0.3;} .from-10\\\\%{--un-gradient-from-position:10%;} .to-90\\\\%{--un-gradient-to-position:90%;} .via-20\\\\%{--un-gradient-via-position:20%;} -.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} +.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} +.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} .bg-gradient-to-t{--un-gradient-shape:to top;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-to-tl{--un-gradient-shape:to top left;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-shape-\\\\[70deg\\\\], @@ -287,7 +287,7 @@ exports[`postcss > @unocss 1`] = ` .bg-repeat-revert{background-repeat:revert;} .bg-origin-border{background-origin:border-box;} .bg-origin-initial{background-origin:initial;} -.svg\\\\:fill-red svg{--un-fill-opacity:1;fill:rgba(248,113,113,var(--un-fill-opacity));} +.svg\\\\:fill-red svg{--un-fill-opacity:1;fill:rgb(248 113 113 / var(--un-fill-opacity));} .object-none{object-fit:none;} .object-\\\\[center_25\\\\%\\\\]{object-position:center 25%;} .object-cb, @@ -308,9 +308,9 @@ exports[`postcss > @unocss 1`] = ` .write-unset{writing-mode:unset;} .write-orient-sideways{text-orientation:sideways;} .write-orient-revert{text-orientation:revert;} -.caret-red{--un-caret-opacity:1;caret-color:rgba(248,113,113,var(--un-caret-opacity));} +.caret-red{--un-caret-opacity:1;caret-color:rgb(248 113 113 / var(--un-caret-opacity));} .caret-op-90{--un-caret-opacity:0.9;} -.accent-red{--un-accent-opacity:1;accent-color:rgba(248,113,113,var(--un-accent-opacity));} +.accent-red{--un-accent-opacity:1;accent-color:rgb(248 113 113 / var(--un-accent-opacity));} .accent-op-90{--un-accent-opacity:0.9;} .bg-blend-color-burn{background-blend-mode:color-burn;} .bg-blend-luminosity{background-blend-mode:luminosity;} @@ -320,7 +320,7 @@ exports[`postcss > @unocss 1`] = ` .mix-blend-plus-lighter{mix-blend-mode:plus-lighter;} .mix-blend-normal{mix-blend-mode:normal;} .mix-blend-revert{mix-blend:revert;} -.data-dropdown\\\\:ring-green[data-data-bs-toggle=\\"dropdown\\"]{--un-ring-opacity:1;--un-ring-color:rgba(74,222,128,var(--un-ring-opacity));} +.data-dropdown\\\\:ring-green[data-data-bs-toggle=\\"dropdown\\"]{--un-ring-opacity:1;--un-ring-color:rgb(74 222 128 / var(--un-ring-opacity));} .image-render-pixel{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;} .backdrop-blur{--un-backdrop-blur:blur(8px);-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);} .backdrop-blur-4{--un-backdrop-blur:blur(4px);-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);} @@ -343,12 +343,12 @@ exports[`postcss > @unocss 1`] = ` .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\\\\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0/0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\[0_4px_3px_\\\\#000\\\\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0/0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgba(252,165,165,var(--un-drop-shadow-opacity));} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0 / 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgb(252 165 165 / var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} .backdrop-grayscale-90{--un-backdrop-grayscale:grayscale(0.9);-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);} @@ -387,12 +387,12 @@ exports[`postcss > @unocss 1`] = ` .filter-unset{filter:unset;} .backdrop-filter-revert{-webkit-backdrop-filter:revert;backdrop-filter:revert;} .placeholder-inherit::placeholder{color:inherit;} -.placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));} +.placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgb(248 113 113 / var(--un-placeholder-opacity));} .view-transition-foo{view-transition-name:foo;} .view-transition-none{view-transition-name:none;} @media (hover: hover) and (pointer: fine){ -.\\\\@hover-text-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} -[open] .\\\\@hover\\\\:\\\\[\\\\[open\\\\]_\\\\&\\\\]\\\\:text-blue:hover{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} +.\\\\@hover-text-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} +[open] .\\\\@hover\\\\:\\\\[\\\\[open\\\\]_\\\\&\\\\]\\\\:text-blue:hover{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity));} } @media (orientation: landscape){ .landscape\\\\:hidden{display:none;} @@ -404,7 +404,7 @@ exports[`postcss > @unocss 1`] = ` .\\\\@dark\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;} } @media (prefers-contrast: more){ -.contrast-more\\\\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} +.contrast-more\\\\:bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));} } @media (prefers-contrast: more){@media (prefers-color-scheme: dark){ .\\\\@dark\\\\:contrast-more\\\\:p-10{padding:2.5rem;} @@ -422,7 +422,7 @@ exports[`postcss > @unocss 1`] = ` exports[`postcss > @unocss all layers 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" `; exports[`postcss > @unocss layers 1`] = ` @@ -430,7 +430,7 @@ exports[`postcss > @unocss layers 1`] = ` .test{padding:1.25rem;} /* layer: default */ .relative{position:relative;} -.p4{padding:1rem;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" +.p4{padding:1rem;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" `; -exports[`postcss > theme() 1`] = `"div{color:#dc2626;background-color:rgba(220,38,38, 50%)}"`; +exports[`postcss > theme() 1`] = `"div{color:#dc2626;background-color:rgb(220 38 38 / 50%)}"`; diff --git a/test/__snapshots__/prefix.test.ts.snap b/test/__snapshots__/prefix.test.ts.snap index 97476fbacf..8307053ba0 100644 --- a/test/__snapshots__/prefix.test.ts.snap +++ b/test/__snapshots__/prefix.test.ts.snap @@ -4,7 +4,7 @@ exports[`prefix > multiple preset prefix 1`] = ` "/* layer: default */ .h-container{width:100%;} .hover\\\\:h-p4:hover{padding:1rem;} -.h-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.h-text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} .bar, .bar-bar, .bar-shortcut, @@ -53,7 +53,7 @@ exports[`prefix > preset prefix 1`] = ` .dark .dark\\\\:hover\\\\:children\\\\:h-space-x-4>*:hover>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));} .dark .dark\\\\:hover\\\\:children\\\\:h-divide-x>*:hover>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(1px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(1px * var(--un-divide-x-reverse));} .hover\\\\:h-p4:hover{padding:1rem;} -.h-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.h-text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} .bar-bar, .bar-shortcut{color:bar;} @media (min-width: 640px){ diff --git a/test/__snapshots__/preflights.test.ts.snap b/test/__snapshots__/preflights.test.ts.snap index 40ca08dbf8..8b336d4363 100644 --- a/test/__snapshots__/preflights.test.ts.snap +++ b/test/__snapshots__/preflights.test.ts.snap @@ -9,20 +9,20 @@ exports[`preflights > basic 1`] = ` exports[`preflights > preflight root can be customized with array 1`] = ` "/* layer: preflights */ -.scope-1{--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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}[data-scope-2]{--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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}" +.scope-1{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}[data-scope-2]{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}" `; exports[`preflights > preflight root can be customized with string 1`] = ` "/* layer: preflights */ -:root{--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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}" +:root{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}" `; exports[`preflights > preflight with empty variablePrefix 1`] = ` "/* layer: preflights */ -*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0,0,0,0);--ring-shadow:0 0 rgba(0,0,0,0);--shadow-inset: ;--shadow:0 0 rgba(0,0,0,0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147,197,253,0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0,0,0,0);--ring-shadow:0 0 rgba(0,0,0,0);--shadow-inset: ;--shadow:0 0 rgba(0,0,0,0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147,197,253,0.5);}" +*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0 0 0 / 0);--ring-shadow:0 0 rgba(0 0 0 / 0);--shadow-inset: ;--shadow:0 0 rgba(0 0 0 / 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147 197 253 / 0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0 0 0 / 0);--ring-shadow:0 0 rgba(0 0 0 / 0);--shadow-inset: ;--shadow:0 0 rgba(0 0 0 / 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147 197 253 / 0.5);}" `; exports[`preflights > preflight with variablePrefix 1`] = ` "/* layer: preflights */ -*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0,0,0,0);--test-ring-shadow:0 0 rgba(0,0,0,0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0,0,0,0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147,197,253,0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0,0,0,0);--test-ring-shadow:0 0 rgba(0,0,0,0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0,0,0,0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147,197,253,0.5);}" +*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--test-ring-shadow:0 0 rgba(0 0 0 / 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0 0 0 / 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--test-ring-shadow:0 0 rgba(0 0 0 / 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0 0 0 / 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147 197 253 / 0.5);}" `; diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index 6b832eaa1d..604b44b634 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/test/__snapshots__/preset-attributify.test.ts.snap @@ -2,8 +2,8 @@ exports[`attributify > merge attribute name and value-only 1`] = ` "/* layer: default */ -[bg~=\\"\\\\[\\\\&\\\\:nth-child\\\\(3\\\\)\\\\]\\\\:\\\\[\\\\#123456\\\\]\\"]:nth-child(3){--un-bg-opacity:1;background-color:rgba(18,52,86,var(--un-bg-opacity));} -[bg~=\\"\\\\[\\\\&\\\\.foo\\\\]\\\\:\\\\[\\\\&\\\\:nth-child\\\\(3\\\\)\\\\]\\\\:\\\\[\\\\#123\\\\]\\"]:nth-child(3).foo{--un-bg-opacity:1;background-color:rgba(17,34,51,var(--un-bg-opacity));}" +[bg~=\\"\\\\[\\\\&\\\\:nth-child\\\\(3\\\\)\\\\]\\\\:\\\\[\\\\#123456\\\\]\\"]:nth-child(3){--un-bg-opacity:1;background-color:rgb(18 52 86 / var(--un-bg-opacity));} +[bg~=\\"\\\\[\\\\&\\\\.foo\\\\]\\\\:\\\\[\\\\&\\\\:nth-child\\\\(3\\\\)\\\\]\\\\:\\\\[\\\\#123\\\\]\\"]:nth-child(3).foo{--un-bg-opacity:1;background-color:rgb(17 34 51 / var(--un-bg-opacity));}" `; exports[`attributify > prefixedOnly 1`] = ` diff --git a/test/__snapshots__/scope.test.ts.snap b/test/__snapshots__/scope.test.ts.snap index 8dff79a544..b874ad02f9 100644 --- a/test/__snapshots__/scope.test.ts.snap +++ b/test/__snapshots__/scope.test.ts.snap @@ -10,10 +10,10 @@ exports[`scope 1`] = ` .foo-scope .pl-10px{padding-left:10px;} .dark .foo-scope .dark\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;} .dark .foo-scope .dark\\\\:hover\\\\:text-xl:hover{font-size:1.25rem;line-height:1.75rem;} -.variant .foo-scope .scope-\\\\[\\\\.variant\\\\]\\\\:c-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.variant .foo-scope .scope-\\\\[\\\\.variant\\\\]\\\\:c-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} @media (min-width: 640px){ -.foo-scope .sm\\\\:text-red-100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));} -.foo-scope .sm\\\\:text-red-200\\\\/10{color:rgba(254,202,202,0.1);} +.foo-scope .sm\\\\:text-red-100{--un-text-opacity:1;color:rgb(254 226 226 / var(--un-text-opacity));} +.foo-scope .sm\\\\:text-red-200\\\\/10{color:rgb(254 202 202 / 0.1);} } @media (min-width: 768px){ .foo-scope .md\\\\:\\\\!hidden{display:none !important;} diff --git a/test/assets/output/preset-mini-active-pseudo.css b/test/assets/output/preset-mini-active-pseudo.css index 5b0e0d977b..d631701d5a 100644 --- a/test/assets/output/preset-mini-active-pseudo.css +++ b/test/assets/output/preset-mini-active-pseudo.css @@ -1,4 +1,4 @@ /* layer: default */ -.hover\:bg-blue-3:hover{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} -.focus\:bg-blue-3:focus{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} -.active\:bg-blue-3:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} \ No newline at end of file +.hover\:bg-blue-3:hover{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));} +.focus\:bg-blue-3:focus{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));} +.active\:bg-blue-3:active{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));} \ No newline at end of file diff --git a/test/assets/output/preset-mini-custom-var-prefix.css b/test/assets/output/preset-mini-custom-var-prefix.css index f12bd33d2c..9d82ee3a83 100644 --- a/test/assets/output/preset-mini-custom-var-prefix.css +++ b/test/assets/output/preset-mini-custom-var-prefix.css @@ -1,4 +1,4 @@ /* layer: default */ -.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));} +.text-red{--hi-text-opacity:1;color:rgb(248 113 113 / var(--hi-text-opacity));} .text-opacity-50{--hi-text-opacity:0.5;} .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));} \ No newline at end of file diff --git a/test/assets/output/preset-mini-dark-customizing-selector.css b/test/assets/output/preset-mini-dark-customizing-selector.css index d3d9173bc3..b117a0ec3b 100644 --- a/test/assets/output/preset-mini-dark-customizing-selector.css +++ b/test/assets/output/preset-mini-dark-customizing-selector.css @@ -1,6 +1,6 @@ /* layer: default */ -[data-mode="dark"] .dark\:bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} -[data-mode="light"] .light\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} +[data-mode="dark"] .dark\:bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));} +[data-mode="light"] .light\:bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));} [data-mode="dark"] .dark\:hover\:rounded:hover{border-radius:0.25rem;} [data-mode="dark"] .dark\:text-lg{font-size:1.125rem;line-height:1.75rem;} [data-mode="light"] .light\:text-sm{font-size:0.875rem;line-height:1.25rem;} diff --git a/test/assets/output/preset-mini-empty-prefix.css b/test/assets/output/preset-mini-empty-prefix.css index bce2d2d01a..c4ebcba631 100644 --- a/test/assets/output/preset-mini-empty-prefix.css +++ b/test/assets/output/preset-mini-empty-prefix.css @@ -1,4 +1,4 @@ /* layer: default */ -.text-red{--text-opacity:1;color:rgba(248,113,113,var(--text-opacity));} +.text-red{--text-opacity:1;color:rgb(248 113 113 / var(--text-opacity));} .text-opacity-50{--text-opacity:0.5;} .scale-100{--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z)) rotate(var(--rotate)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z));} \ No newline at end of file diff --git a/test/assets/output/preset-mini-group-data.css b/test/assets/output/preset-mini-group-data.css index 934a33e169..a2eb533e15 100644 --- a/test/assets/output/preset-mini-group-data.css +++ b/test/assets/output/preset-mini-group-data.css @@ -1,5 +1,5 @@ /* layer: default */ .group:hover .group-hover\:font-bold{font-weight:700;} -.group[data-state=open] .group-data-\[state\=open\]\:text-black{--un-text-opacity:1;color:rgba(0,0,0,var(--un-text-opacity));} -.data-\[state\=open\]\:text-red[data-state=open]{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.group[data-state=open] .group-data-\[state\=open\]\:text-black{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity));} +.data-\[state\=open\]\:text-red[data-state=open]{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} .group[data-state=open] .group-data-\[state\=open\]\:rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;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));} \ No newline at end of file diff --git a/test/assets/output/preset-mini-nested-theme-colors.css b/test/assets/output/preset-mini-nested-theme-colors.css index bda4c98835..45a5b6afa9 100644 --- a/test/assets/output/preset-mini-nested-theme-colors.css +++ b/test/assets/output/preset-mini-nested-theme-colors.css @@ -1,4 +1,4 @@ /* layer: default */ -.bg-a-b-c{--un-bg-opacity:1;background-color:rgba(81,69,67,var(--un-bg-opacity));} -.text-a-b-c{--un-text-opacity:1;color:rgba(81,69,67,var(--un-text-opacity));} -.text-a-camel-case{--un-text-opacity:1;color:rgba(34,51,68,var(--un-text-opacity));} \ No newline at end of file +.bg-a-b-c{--un-bg-opacity:1;background-color:rgb(81 69 67 / var(--un-bg-opacity));} +.text-a-b-c{--un-text-opacity:1;color:rgb(81 69 67 / var(--un-text-opacity));} +.text-a-camel-case{--un-text-opacity:1;color:rgb(34 51 68 / var(--un-text-opacity));} \ No newline at end of file diff --git a/test/assets/output/preset-mini-non-nested-theme-colors.css b/test/assets/output/preset-mini-non-nested-theme-colors.css index 9a260e404b..a8a14e1451 100644 --- a/test/assets/output/preset-mini-non-nested-theme-colors.css +++ b/test/assets/output/preset-mini-non-nested-theme-colors.css @@ -1,5 +1,5 @@ /* layer: default */ -.bg-numbered321{--un-bg-opacity:1;background-color:rgba(51,34,17,var(--un-bg-opacity));} -.bg-with-hyphen{--un-bg-opacity:1;background-color:rgba(18,52,86,var(--un-bg-opacity));} -.text-numbered-123{--un-text-opacity:1;color:rgba(17,34,51,var(--un-text-opacity));} -.text-with-hyphen{--un-text-opacity:1;color:rgba(18,52,86,var(--un-text-opacity));} \ No newline at end of file +.bg-numbered321{--un-bg-opacity:1;background-color:rgb(51 34 17 / var(--un-bg-opacity));} +.bg-with-hyphen{--un-bg-opacity:1;background-color:rgb(18 52 86 / var(--un-bg-opacity));} +.text-numbered-123{--un-text-opacity:1;color:rgb(17 34 51 / var(--un-text-opacity));} +.text-with-hyphen{--un-text-opacity:1;color:rgb(18 52 86 / var(--un-text-opacity));} \ No newline at end of file diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css index 37b9dd05c4..5db90ce0f6 100644 --- a/test/assets/output/preset-mini-targets.css +++ b/test/assets/output/preset-mini-targets.css @@ -1,5 +1,5 @@ /* 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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);} +*,::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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);} /* layer: 1 */ .uno-layer-1\:translate-0{--un-translate-x:0;--un-translate-y:0;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 */ @@ -122,42 +122,42 @@ unocss .scope-\[unocss\]\:block{display:block;} .opacity-0{opacity:0;} .disabled\:op50:disabled{opacity:0.5;} .placeholder-opacity-60::placeholder{opacity:0.6;} -.\[\&\[data-active\=\"true\"\]\]\:bg-red[data-active="true"]{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));} +.\[\&\[data-active\=\"true\"\]\]\:bg-red[data-active="true"]{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));} .bg-\[--test-variable\], .bg-\$test-variable{background-color:var(--test-variable);} .bg-\[\#153\]\/10, -.bg-\[\#1533\]\/10{background-color:rgba(17,85,51,0.1);} -.bg-\[\#1533\]{--un-bg-opacity:0.2;background-color:rgba(17,85,51,var(--un-bg-opacity));} -.bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1 2 3/var(--un-bg-opacity));} +.bg-\[\#1533\]\/10{background-color:rgb(17 85 51 / 0.1);} +.bg-\[\#1533\]{--un-bg-opacity:0.2;background-color:rgb(17 85 51 / var(--un-bg-opacity));} +.bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1 2 3 / var(--un-bg-opacity));} .bg-\#452233\/40, -.bg-hex-452233\/40{background-color:rgba(69,34,51,0.4);} -.bg-red-100{--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));} -.bg-teal-100\/55{background-color:rgba(204,251,241,0.55);} -.bg-teal-200\:55{background-color:rgba(153,246,228,0.55);} -.bg-teal-300\:\[\.55\]{background-color:rgba(94,234,212,.55);} -.bg-teal-400\/\[\.55\]{background-color:rgba(45,212,191,.55);} -.bg-teal-500\/\[55\%\]{background-color:rgba(20,184,166,55%);} -.first-letter\:bg-green-400::first-letter{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));} -.first-line\:bg-green-400::first-line{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));} -.peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));} -.previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));} -.focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgba(156,163,175,0.2);} -.focus-within\:where-first\:checked\:bg-gray\/20:checked:where(:first-child):focus-within{background-color:rgba(156,163,175,0.2);} -.hover\:file\:bg-violet-100::file-selector-button:hover{--un-bg-opacity:1;background-color:rgba(237,233,254,var(--un-bg-opacity));} -.hover\:is-first\:checked\:bg-true-gray\/10:checked:is(:first-child):hover{background-color:rgba(163,163,163,0.1);} -.hover\:not-first\:checked\:bg-red\/10:checked:not(:first-child):hover{background-color:rgba(248,113,113,0.1);} -.hover\:not-first\:checked\:bg-true-gray\/10:checked:not(:first-child):hover{background-color:rgba(163,163,163,0.1);} -.marker\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgba(221,214,254,var(--un-bg-opacity));} -.file\:bg-violet-50::file-selector-button{--un-bg-opacity:1;background-color:rgba(245,243,255,var(--un-bg-opacity));} +.bg-hex-452233\/40{background-color:rgb(69 34 51 / 0.4);} +.bg-red-100{--un-bg-opacity:1;background-color:rgb(254 226 226 / var(--un-bg-opacity));} +.bg-teal-100\/55{background-color:rgb(204 251 241 / 0.55);} +.bg-teal-200\:55{background-color:rgb(153 246 228 / 0.55);} +.bg-teal-300\:\[\.55\]{background-color:rgb(94 234 212 / .55);} +.bg-teal-400\/\[\.55\]{background-color:rgb(45 212 191 / .55);} +.bg-teal-500\/\[55\%\]{background-color:rgb(20 184 166 / 55%);} +.first-letter\:bg-green-400::first-letter{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));} +.first-line\:bg-green-400::first-line{--un-bg-opacity:1;background-color:rgb(74 222 128 / var(--un-bg-opacity));} +.peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));} +.previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));} +.focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);} +.focus-within\:where-first\:checked\:bg-gray\/20:checked:where(:first-child):focus-within{background-color:rgb(156 163 175 / 0.2);} +.hover\:file\:bg-violet-100::file-selector-button:hover{--un-bg-opacity:1;background-color:rgb(237 233 254 / var(--un-bg-opacity));} +.hover\:is-first\:checked\:bg-true-gray\/10:checked:is(:first-child):hover{background-color:rgb(163 163 163 / 0.1);} +.hover\:not-first\:checked\:bg-red\/10:checked:not(:first-child):hover{background-color:rgb(248 113 113 / 0.1);} +.hover\:not-first\:checked\:bg-true-gray\/10:checked:not(:first-child):hover{background-color:rgb(163 163 163 / 0.1);} +.marker\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgb(221 214 254 / var(--un-bg-opacity));} +.file\:bg-violet-50::file-selector-button{--un-bg-opacity:1;background-color:rgb(245 243 255 / var(--un-bg-opacity));} .bg-opacity-\[--opacity-variable\], .bg-opacity-\$opacity-variable{--un-bg-opacity:var(--opacity-variable);} .bg-opacity-45{--un-bg-opacity:0.45;} .color-scheme-dark{color-scheme:dark;} .color-scheme-light{color-scheme:light;} -.all-\[svg\]\:fill-red svg{--un-fill-opacity:1;fill:rgba(248,113,113,var(--un-fill-opacity));} -.fill-\[\#123\]{--un-fill-opacity:1;fill:rgba(17,34,51,var(--un-fill-opacity));} +.all-\[svg\]\:fill-red svg{--un-fill-opacity:1;fill:rgb(248 113 113 / var(--un-fill-opacity));} +.fill-\[\#123\]{--un-fill-opacity:1;fill:rgb(17 34 51 / var(--un-fill-opacity));} .fill-current{fill:currentColor;} -.fill-green-400{--un-fill-opacity:1;fill:rgba(74,222,128,var(--un-fill-opacity));} +.fill-green-400{--un-fill-opacity:1;fill:rgb(74 222 128 / var(--un-fill-opacity));} .fill-opacity-\$opacity-variable{--un-fill-opacity:var(--opacity-variable);} .fill-opacity-80{--un-fill-opacity:0.8;} .fill-none{fill:none;} @@ -179,9 +179,9 @@ unocss .scope-\[unocss\]\:block{display:block;} .stroke-offset-1, .stroke-offset-1px{stroke-dashoffset:1px;} .stroke-offset-none{stroke-dashoffset:0;} -.stroke-\[\#123\]{--un-stroke-opacity:1;stroke:rgba(17,34,51,var(--un-stroke-opacity));} +.stroke-\[\#123\]{--un-stroke-opacity:1;stroke:rgb(17 34 51 / var(--un-stroke-opacity));} .stroke-current{stroke:currentColor;} -.stroke-green-400{--un-stroke-opacity:1;stroke:rgba(74,222,128,var(--un-stroke-opacity));} +.stroke-green-400{--un-stroke-opacity:1;stroke:rgb(74 222 128 / var(--un-stroke-opacity));} .stroke-opacity-\$opacity-variable{--un-stroke-opacity:var(--opacity-variable);} .stroke-opacity-80{--un-stroke-opacity:0.8;} .stroke-cap-round{stroke-linecap:round;} @@ -214,30 +214,30 @@ unocss .scope-\[unocss\]\:block{display:block;} .border-s-width-\$variable{border-inline-start-width:var(--variable);} .border-t-width-3{border-top-width:3px;} .b-block-size-\$variable{border-block-start-width:var(--variable);border-block-end-width:var(--variable);} -.border-\[\#124\]{--un-border-opacity:1;border-color:rgba(17,34,68,var(--un-border-opacity));} +.border-\[\#124\]{--un-border-opacity:1;border-color:rgb(17 34 68 / var(--un-border-opacity));} .border-\[var\(--color\)\], .border-\$color{border-color:var(--color);} -.border-black{--un-border-opacity:1;border-color:rgba(0,0,0,var(--un-border-opacity));} -.border-black\/10{border-color:rgba(0,0,0,0.1);} -.border-blue{--un-border-opacity:1;border-color:rgba(96,165,250,var(--un-border-opacity));} -.border-green-100\/20{border-color:rgba(220,252,231,0.2);} +.border-black{--un-border-opacity:1;border-color:rgb(0 0 0 / var(--un-border-opacity));} +.border-black\/10{border-color:rgb(0 0 0 / 0.1);} +.border-blue{--un-border-opacity:1;border-color:rgb(96 165 250 / var(--un-border-opacity));} +.border-green-100\/20{border-color:rgb(220 252 231 / 0.2);} .border-red-100, -.border-red100{--un-border-opacity:1;border-color:rgba(254,226,226,var(--un-border-opacity));} -.border-red-200\/10{border-color:rgba(254,202,202,0.1);} -.border-red-300\/20{border-color:rgba(252,165,165,0.2);} -.border-red2{--un-border-opacity:1;border-color:rgba(254,202,202,var(--un-border-opacity));} -.border-x-\[rgb\(1\,2\,3\)\]\/\[0\.5\]{border-left-color:rgba(1,2,3,0.5);border-right-color:rgba(1,2,3,0.5);} +.border-red100{--un-border-opacity:1;border-color:rgb(254 226 226 / var(--un-border-opacity));} +.border-red-200\/10{border-color:rgb(254 202 202 / 0.1);} +.border-red-300\/20{border-color:rgb(252 165 165 / 0.2);} +.border-red2{--un-border-opacity:1;border-color:rgb(254 202 202 / var(--un-border-opacity));} +.border-x-\[rgb\(1\,2\,3\)\]\/\[0\.5\]{border-left-color:rgb(1 2 3 / 0.5);border-right-color:rgb(1 2 3 / 0.5);} .border-x-\$color{border-left-color:var(--color);border-right-color:var(--color);} -.border-y-red{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgba(248,113,113,var(--un-border-top-opacity));--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgba(248,113,113,var(--un-border-bottom-opacity));} -.border-b-blue{--un-border-opacity:1;--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgba(96,165,250,var(--un-border-bottom-opacity));} -.border-e-red-200\/10{border-inline-end-color:rgba(254,202,202,0.1);} -.border-e-red-300\/\[20\]{border-inline-end-color:rgba(252,165,165,20);} -.border-e-red-400{--un-border-opacity:1;--un-border-inline-end-opacity:var(--un-border-opacity);border-inline-end-color:rgba(248,113,113,var(--un-border-inline-end-opacity));} -.border-s-green-500{--un-border-opacity:1;--un-border-inline-start-opacity:var(--un-border-opacity);border-inline-start-color:rgba(34,197,94,var(--un-border-inline-start-opacity));} -.border-s-red-100{--un-border-opacity:1;--un-border-inline-start-opacity:var(--un-border-opacity);border-inline-start-color:rgba(254,226,226,var(--un-border-inline-start-opacity));} -.border-t-\[\#124\]{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgba(17,34,68,var(--un-border-top-opacity));} +.border-y-red{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgb(248 113 113 / var(--un-border-top-opacity));--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgb(248 113 113 / var(--un-border-bottom-opacity));} +.border-b-blue{--un-border-opacity:1;--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgb(96 165 250 / var(--un-border-bottom-opacity));} +.border-e-red-200\/10{border-inline-end-color:rgb(254 202 202 / 0.1);} +.border-e-red-300\/\[20\]{border-inline-end-color:rgb(252 165 165 / 20);} +.border-e-red-400{--un-border-opacity:1;--un-border-inline-end-opacity:var(--un-border-opacity);border-inline-end-color:rgb(248 113 113 / var(--un-border-inline-end-opacity));} +.border-s-green-500{--un-border-opacity:1;--un-border-inline-start-opacity:var(--un-border-opacity);border-inline-start-color:rgb(34 197 94 / var(--un-border-inline-start-opacity));} +.border-s-red-100{--un-border-opacity:1;--un-border-inline-start-opacity:var(--un-border-opacity);border-inline-start-color:rgb(254 226 226 / var(--un-border-inline-start-opacity));} +.border-t-\[\#124\]{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgb(17 34 68 / var(--un-border-top-opacity));} .border-t-\$color{border-top-color:var(--color);} -.border-t-black\/10{border-top-color:rgba(0,0,0,0.1);} +.border-t-black\/10{border-top-color:rgb(0 0 0 / 0.1);} .border-opacity-\$opacity-variable{--un-border-opacity:var(--opacity-variable);} .border-opacity-20{--un-border-opacity:0.2;} .border-y-op-30{--un-border-top-opacity:0.3;--un-border-bottom-opacity:0.3;} @@ -399,11 +399,11 @@ unocss .scope-\[unocss\]\:block{display:block;} .decoration-size-unset{text-decoration-thickness:unset;} .underline-1rem{text-decoration-thickness:1rem;} .underline-auto{text-decoration-thickness:auto;} -.aria-\[invalid\=spelling\]\:underline-red-600[aria-invalid=spelling]{-webkit-text-decoration-color:rgba(220,38,38,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(220,38,38,var(--un-line-opacity));} -.data-\[invalid\~\=grammar\]\:underline-green-600[data-invalid~=grammar]{-webkit-text-decoration-color:rgba(22,163,74,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(22,163,74,var(--un-line-opacity));} -.decoration-purple\/50{-webkit-text-decoration-color:rgba(192,132,252,0.5);text-decoration-color:rgba(192,132,252,0.5);} +.aria-\[invalid\=spelling\]\:underline-red-600[aria-invalid=spelling]{-webkit-text-decoration-color:rgb(220 38 38 / var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgb(220 38 38 / var(--un-line-opacity));} +.data-\[invalid\~\=grammar\]\:underline-green-600[data-invalid~=grammar]{-webkit-text-decoration-color:rgb(22 163 74 / var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgb(22 163 74 / var(--un-line-opacity));} +.decoration-purple\/50{-webkit-text-decoration-color:rgb(192 132 252 / 0.5);text-decoration-color:rgb(192 132 252 / 0.5);} .decoration-transparent{-webkit-text-decoration-color:transparent;text-decoration-color:transparent;} -.underline-red-500{-webkit-text-decoration-color:rgba(239,68,68,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(239,68,68,var(--un-line-opacity));} +.underline-red-500{-webkit-text-decoration-color:rgb(239 68 68 / var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgb(239 68 68 / var(--un-line-opacity));} .underline-op-\$opacity-variable{--un-line-opacity:var(--opacity-variable);} .underline-op80{--un-line-opacity:0.8;} .decoration-offset-0\.6rem, @@ -416,14 +416,14 @@ unocss .scope-\[unocss\]\:block{display:block;} .decoration-none{text-decoration:none;} .text-stroke-6{-webkit-text-stroke-width:6px;} .text-stroke-sm{-webkit-text-stroke-width:thin;} -.text-stroke-blue-500{--un-text-stroke-opacity:1;-webkit-text-stroke-color:rgba(59,130,246,var(--un-text-stroke-opacity));} +.text-stroke-blue-500{--un-text-stroke-opacity:1;-webkit-text-stroke-color:rgb(59 130 246 / var(--un-text-stroke-opacity));} .text-stroke-op-\$opacity-variable{--un-text-stroke-opacity:var(--opacity-variable);} .text-stroke-op-60{--un-text-stroke-opacity:0.6;} -.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0 0 0/0.2)),0 0 1px var(--un-text-shadow-color, rgba(1 0 5/0.1));text-shadow:var(--un-text-shadow);} +.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgba(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);} .text-shadow-\$var{text-shadow:var(--var);} -.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0 0 0/0.26)),0 0 5px var(--un-text-shadow-color, rgba(15 3 86/0.22));text-shadow:var(--un-text-shadow);} -.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0 0 0/0));text-shadow:var(--un-text-shadow);} -.text-shadow-color-red-300{--un-text-shadow-opacity:1;--un-text-shadow-color:rgba(252,165,165,var(--un-text-shadow-opacity));} +.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0 0 0 / 0.26)),0 0 5px var(--un-text-shadow-color, rgba(15 3 86 / 0.22));text-shadow:var(--un-text-shadow);} +.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0 0 0 / 0));text-shadow:var(--un-text-shadow);} +.text-shadow-color-red-300{--un-text-shadow-opacity:1;--un-text-shadow-color:rgb(252 165 165 / var(--un-text-shadow-opacity));} .text-shadow-color-op-\$opacity-variable{--un-text-shadow-opacity:var(--opacity-variable);} .text-shadow-color-op-30{--un-text-shadow-opacity:0.3;} .case-upper{text-transform:uppercase;} @@ -436,76 +436,76 @@ unocss .scope-\[unocss\]\:block{display:block;} [dir="rtl"] .rtl\:text-right{text-align:right;} .c-\[\#157\], .c-\#157, -.c-hex-157{--un-text-opacity:1;color:rgba(17,85,119,var(--un-text-opacity));} -.c-\[\#157\]\/\$opacity-variable{color:rgba(17,85,119,var(--opacity-variable));} +.c-hex-157{--un-text-opacity:1;color:rgb(17 85 119 / var(--un-text-opacity));} +.c-\[\#157\]\/\$opacity-variable{color:rgb(17 85 119 / var(--opacity-variable));} .c-\[\#157\]\/10, .c-\#157\/10, -.c-hex-157\/10{color:rgba(17,85,119,0.1);} +.c-hex-157\/10{color:rgb(17 85 119 / 0.1);} .c-\[\#2573\], .c-\#2573, -.c-hex-2573{--un-text-opacity:0.2;color:rgba(34,85,119,var(--un-text-opacity));} -.c-\[\#2573\]\/\$opacity-variable{color:rgba(34,85,119,var(--opacity-variable));} +.c-hex-2573{--un-text-opacity:0.2;color:rgb(34 85 119 / var(--un-text-opacity));} +.c-\[\#2573\]\/\$opacity-variable{color:rgb(34 85 119 / var(--opacity-variable));} .c-\[\#2573\]\/10, .c-\#2573\/10, -.c-hex-2573\/10{color:rgba(34,85,119,0.1);} +.c-hex-2573\/10{color:rgb(34 85 119 / 0.1);} .c-\[\#335577\], .c-\#335577, -.c-hex-335577{--un-text-opacity:1;color:rgba(51,85,119,var(--un-text-opacity));} -.c-\[\#335577\]\/\$opacity-variable{color:rgba(51,85,119,var(--opacity-variable));} +.c-hex-335577{--un-text-opacity:1;color:rgb(51 85 119 / var(--un-text-opacity));} +.c-\[\#335577\]\/\$opacity-variable{color:rgb(51 85 119 / var(--opacity-variable));} .c-\[\#335577\]\/10, .c-\#335577\/10, -.c-hex-335577\/10{color:rgba(51,85,119,0.1);} +.c-hex-335577\/10{color:rgb(51 85 119 / 0.1);} .c-\[\#44557733\], .c-\#44557733, -.c-hex-44557733{--un-text-opacity:0.2;color:rgba(68,85,119,var(--un-text-opacity));} -.c-\[\#44557733\]\/\$opacity-variable{color:rgba(68,85,119,var(--opacity-variable));} +.c-hex-44557733{--un-text-opacity:0.2;color:rgb(68 85 119 / var(--un-text-opacity));} +.c-\[\#44557733\]\/\$opacity-variable{color:rgb(68 85 119 / var(--opacity-variable));} .c-\[\#44557733\]\/10, .c-\#44557733\/10, -.c-hex-44557733\/10{color:rgba(68,85,119,0.1);} +.c-hex-44557733\/10{color:rgb(68 85 119 / 0.1);} .c-\$color-variable, .c-\$color-variable\/\$opacity-variable, .c-\$color-variable\/10{color:var(--color-variable);} .color-\$red{color:var(--red);} .color-blue, -.color-blue-400{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} +.color-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity));} .color-blue-400\/10, -.color-blue\/10{color:rgba(96,165,250,0.1);} +.color-blue\/10{color:rgb(96 165 250 / 0.1);} .color-blue-gray, .color-blue-gray-400, .color-bluegray, -.color-bluegray-400{--un-text-opacity:1;color:rgba(148,163,184,var(--un-text-opacity));} +.color-bluegray-400{--un-text-opacity:1;color:rgb(148 163 184 / var(--un-text-opacity));} .color-blue-gray-400\/10, .color-blue-gray\/10, .color-bluegray-400\/10, -.color-bluegray\/10{color:rgba(148,163,184,0.1);} -.open\:color-pink-100[open]{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));} +.color-bluegray\/10{color:rgb(148 163 184 / 0.1);} +.open\:color-pink-100[open]{--un-text-opacity:1;color:rgb(252 231 243 / var(--un-text-opacity));} .placeholder-shown-color-transparent:placeholder-shown{color:transparent;} -.in-range\:color-pink-100:in-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));} -.out-of-range\:color-pink-100:out-of-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));} -.placeholder-color-red-1::placeholder{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));} +.in-range\:color-pink-100:in-range{--un-text-opacity:1;color:rgb(252 231 243 / var(--un-text-opacity));} +.out-of-range\:color-pink-100:out-of-range{--un-text-opacity:1;color:rgb(252 231 243 / var(--un-text-opacity));} +.placeholder-color-red-1::placeholder{--un-text-opacity:1;color:rgb(254 226 226 / var(--un-text-opacity));} .placeholder\:color-transparent::placeholder{color:transparent;} .selection\:color-\[var\(--select-color\)\]::selection{color:var(--select-color);} .text-\[--variable\], .text-\[color\:--variable\], .text-\$variable{color:var(--variable);} -.text-\[\#124\]{--un-text-opacity:1;color:rgba(17,34,68,var(--un-text-opacity));} +.text-\[\#124\]{--un-text-opacity:1;color:rgb(17 34 68 / var(--un-text-opacity));} .text-\[calc\(1em-1px\)\]{color:calc(1em - 1px);} .text-\[color\:var\(--color-x\)\]\:\[trick\]{color:var(--color-x);} .text-\[color\:var\(--color\)\], .text-\[var\(--color\)\]{color:var(--color);} -.text-black\/10{color:rgba(0,0,0,0.1);} +.text-black\/10{color:rgb(0 0 0 / 0.1);} .text-red-100, -.text-red100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));} -.text-red-200\/10{color:rgba(254,202,202,0.1);} +.text-red100{--un-text-opacity:1;color:rgb(254 226 226 / var(--un-text-opacity));} +.text-red-200\/10{color:rgb(254 202 202 / 0.1);} .text-red-300\:20, -.text-red-300\/20{color:rgba(252,165,165,0.2);} -.text-red\:20{color:rgba(248,113,113,0.2);} -.text-red2{--un-text-opacity:1;color:rgba(254,202,202,var(--un-text-opacity));} -.text-rose{--un-text-opacity:1;color:rgba(251,113,133,var(--un-text-opacity));} -.checked\:next\:hover\:text-slate-500:hover+*:checked{--un-text-opacity:1;color:rgba(100,116,139,var(--un-text-opacity));} -.checked\:next\:text-slate-100+*:checked{--un-text-opacity:1;color:rgba(241,245,249,var(--un-text-opacity));} -.next\:checked\:children\:text-slate-600>*:checked+*{--un-text-opacity:1;color:rgba(71,85,105,var(--un-text-opacity));} -.next\:checked\:text-slate-200:checked+*{--un-text-opacity:1;color:rgba(226,232,240,var(--un-text-opacity));} +.text-red-300\/20{color:rgb(252 165 165 / 0.2);} +.text-red\:20{color:rgb(248 113 113 / 0.2);} +.text-red2{--un-text-opacity:1;color:rgb(254 202 202 / var(--un-text-opacity));} +.text-rose{--un-text-opacity:1;color:rgb(251 113 133 / var(--un-text-opacity));} +.checked\:next\:hover\:text-slate-500:hover+*:checked{--un-text-opacity:1;color:rgb(100 116 139 / var(--un-text-opacity));} +.checked\:next\:text-slate-100+*:checked{--un-text-opacity:1;color:rgb(241 245 249 / var(--un-text-opacity));} +.next\:checked\:children\:text-slate-600>*:checked+*{--un-text-opacity:1;color:rgb(71 85 105 / var(--un-text-opacity));} +.next\:checked\:text-slate-200:checked+*{--un-text-opacity:1;color:rgb(226 232 240 / var(--un-text-opacity));} .color-inherit, .text-inherit{color:inherit;} .color-initial{color:initial;} @@ -518,18 +518,18 @@ unocss .scope-\[unocss\]\:block{display:block;} .font-oblique, .oblique{font-style:oblique;} .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} -.backdrop\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(74,222,128,var(--un-shadow-opacity));} -.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), var(--un-ring-shadow), var(--un-shadow);} -.shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgba(255,255,255,var(--un-shadow-opacity));} -.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237 0 0/1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.backdrop\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(74 222 128 / var(--un-shadow-opacity));} +.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), var(--un-ring-shadow), var(--un-shadow);} +.shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgb(255 255 255 / var(--un-shadow-opacity));} +.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237 0 0 / 1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-\$variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .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);} -.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0 0 0/0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgb(34 197 94 / var(--un-shadow-opacity));} +.shadow-green-900\/50{--un-shadow-color:rgb(20 83 45 / 0.5);} +.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-transparent{--un-shadow-color:transparent;} -.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), var(--un-ring-shadow), var(--un-shadow);} -.backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));} +.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), var(--un-ring-shadow), var(--un-shadow);} +.backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(220 252 231 / var(--un-shadow-opacity));} .shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);} .shadow-op-50{--un-shadow-opacity:0.5;} .shadow-inset{--un-shadow-inset:inset;} @@ -544,14 +544,14 @@ unocss .scope-\[unocss\]\:block{display:block;} .ring-offset-none{--un-ring-offset-width:0;} .ring-offset-size-\$variable, .ring-offset-width-\$variable{--un-ring-offset-width:var(--variable);} -.ring-red2{--un-ring-opacity:1;--un-ring-color:rgba(254,202,202,var(--un-ring-opacity));} -.ring-red2\/5{--un-ring-color:rgba(254,202,202,0.05);} +.ring-red2{--un-ring-opacity:1;--un-ring-color:rgb(254 202 202 / var(--un-ring-opacity));} +.ring-red2\/5{--un-ring-color:rgb(254 202 202 / 0.05);} .ring-op-\$opacity-variable{--un-ring-opacity:var(--opacity-variable);} .ring-op-5{--un-ring-opacity:0.05;} .ring-offset-\$variable{--un-ring-offset-color:var(--variable);} -.ring-offset-green5{--un-ring-offset-opacity:1;--un-ring-offset-color:rgba(34,197,94,var(--un-ring-offset-opacity));} -.ring-offset-red2{--un-ring-offset-opacity:1;--un-ring-offset-color:rgba(254,202,202,var(--un-ring-offset-opacity));} -.ring-offset-red2\/5{--un-ring-offset-color:rgba(254,202,202,0.05);} +.ring-offset-green5{--un-ring-offset-opacity:1;--un-ring-offset-color:rgb(34 197 94 / var(--un-ring-offset-opacity));} +.ring-offset-red2{--un-ring-offset-opacity:1;--un-ring-offset-color:rgb(254 202 202 / var(--un-ring-offset-opacity));} +.ring-offset-red2\/5{--un-ring-offset-color:rgb(254 202 202 / 0.05);} .ring-offset-op-\$opacity-variable{--un-ring-offset-opacity:var(--opacity-variable);} .ring-offset-op-5{--un-ring-offset-opacity:0.05;} .ring-inset{--un-ring-inset:inset;} @@ -786,10 +786,10 @@ unocss .scope-\[unocss\]\:block{display:block;} .outline-width-revert{outline-width:revert;} .outline-\[var\(--red\)\]{outline-color:var(--red);} .outline-\$variable{outline-color:var(--variable);} -.outline-blue-2{--un-outline-color-opacity:1;outline-color:rgba(191,219,254,var(--un-outline-color-opacity));} -.outline-color-red-1{--un-outline-color-opacity:1;outline-color:rgba(254,226,226,var(--un-outline-color-opacity));} +.outline-blue-2{--un-outline-color-opacity:1;outline-color:rgb(191 219 254 / var(--un-outline-color-opacity));} +.outline-color-red-1{--un-outline-color-opacity:1;outline-color:rgb(254 226 226 / var(--un-outline-color-opacity));} .outline-gray, -.outline-gray-400{--un-outline-color-opacity:1;outline-color:rgba(156,163,175,var(--un-outline-color-opacity));} +.outline-gray-400{--un-outline-color-opacity:1;outline-color:rgb(156 163 175 / var(--un-outline-color-opacity));} .outline-offset-\[var\(--offset\)\]{outline-offset:var(--offset);} .outline-offset-\$variable{outline-offset:var(--variable);} .outline-offset-4{outline-offset:4px;} @@ -973,19 +973,19 @@ unocss .scope-\[unocss\]\:block{display:block;} .text-nowrap{text-wrap:nowrap;} .text-balance{text-wrap:balance;} @container (min-width: 10.5rem){ -.\@\[10\.5rem\]-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.\@\[10\.5rem\]-text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} } @container (min-width: 24rem){ -.\@sm\:text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.\@sm\:text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} } @container (min-width: 32rem){ -.\@lg-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.\@lg-text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} } @container label (min-width: 100px){ -.\@\[100px\]\/label\:text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));} +.\@\[100px\]\/label\:text-green{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity));} } @container label (min-width: 20rem){ -.\@xs\/label\:text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));} +.\@xs\/label\:text-green{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity));} } @layer base{ .layer-base\:translate-0{--un-translate-x:0;--un-translate-y:0;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));} @@ -998,7 +998,7 @@ unocss .scope-\[unocss\]\:block{display:block;} } @media (prefers-color-scheme: dark){ .dark\:text-xl{font-size:1.25rem;line-height:1.75rem;} -.dark\:not-odd\:text-red:not(:nth-child(odd)){--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +.dark\:not-odd\:text-red:not(:nth-child(odd)){--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} } @media (prefers-color-scheme: light){ .light\:text-sm{font-size:0.875rem;line-height:1.25rem;} @@ -1011,8 +1011,8 @@ unocss .scope-\[unocss\]\:block{display:block;} .supports-\[\(display\:_grid\)\]\:block{display:block;} } @supports(display:grid){ -.\[\@supports\(display\:grid\)\]\:bg-red\/33{background-color:rgba(248,113,113,0.33);} -*+.\[\@supports\(display\:grid\)\]\:\[\*\+\&\]\:bg-red\/34{background-color:rgba(248,113,113,0.34);} +.\[\@supports\(display\:grid\)\]\:bg-red\/33{background-color:rgb(248 113 113 / 0.33);} +*+.\[\@supports\(display\:grid\)\]\:\[\*\+\&\]\:bg-red\/34{background-color:rgb(248 113 113 / 0.34);} } @media (max-width: 1023.9px){ .lt-lg\:m2{margin:0.5rem;} diff --git a/test/assets/output/preset-prefixes-1.css b/test/assets/output/preset-prefixes-1.css index f48b521a33..f59407da82 100644 --- a/test/assets/output/preset-prefixes-1.css +++ b/test/assets/output/preset-prefixes-1.css @@ -2,5 +2,5 @@ .icon-mdi-alarm{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 20a7 7 0 0 1-7-7a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7m0-16a9 9 0 0 0-9 9a9 9 0 0 0 9 9a9 9 0 0 0 9-9a9 9 0 0 0-9-9m.5 4H11v6l4.75 2.85l.75-1.23l-4-2.37V8M7.88 3.39L6.6 1.86L2 5.71l1.29 1.53l4.59-3.85M22 5.72l-4.6-3.86l-1.29 1.53l4.6 3.86L22 5.72Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;} /* layer: default */ @media (min-width: 640px){ -[uno-sm~="bg-blue-400"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));} +[uno-sm~="bg-blue-400"]{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));} } \ No newline at end of file diff --git a/test/assets/output/preset-prefixes-2.css b/test/assets/output/preset-prefixes-2.css index f48b521a33..f59407da82 100644 --- a/test/assets/output/preset-prefixes-2.css +++ b/test/assets/output/preset-prefixes-2.css @@ -2,5 +2,5 @@ .icon-mdi-alarm{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 20a7 7 0 0 1-7-7a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7m0-16a9 9 0 0 0-9 9a9 9 0 0 0 9 9a9 9 0 0 0 9-9a9 9 0 0 0-9-9m.5 4H11v6l4.75 2.85l.75-1.23l-4-2.37V8M7.88 3.39L6.6 1.86L2 5.71l1.29 1.53l4.59-3.85M22 5.72l-4.6-3.86l-1.29 1.53l4.6 3.86L22 5.72Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;} /* layer: default */ @media (min-width: 640px){ -[uno-sm~="bg-blue-400"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));} +[uno-sm~="bg-blue-400"]{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));} } \ No newline at end of file diff --git a/test/assets/output/preset-uno-custom-var-prefix.css b/test/assets/output/preset-uno-custom-var-prefix.css index 8bdb148eb3..1464a2aa9a 100644 --- a/test/assets/output/preset-uno-custom-var-prefix.css +++ b/test/assets/output/preset-uno-custom-var-prefix.css @@ -1,4 +1,4 @@ /* layer: default */ .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));} -.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));} +.text-red{--hi-text-opacity:1;color:rgb(248 113 113 / var(--hi-text-opacity));} .text-opacity-50{--hi-text-opacity:0.5;} \ No newline at end of file diff --git a/test/assets/output/preset-uno-empty-prefix.css b/test/assets/output/preset-uno-empty-prefix.css index 1989f60fa2..fd9fc93cd7 100644 --- a/test/assets/output/preset-uno-empty-prefix.css +++ b/test/assets/output/preset-uno-empty-prefix.css @@ -1,4 +1,4 @@ /* layer: default */ .scale-100{--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z)) rotate(var(--rotate)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z));} -.text-red{--text-opacity:1;color:rgba(248,113,113,var(--text-opacity));} +.text-red{--text-opacity:1;color:rgb(248 113 113 / var(--text-opacity));} .text-opacity-50{--text-opacity:0.5;} \ No newline at end of file diff --git a/test/assets/output/preset-uno-targets-2.css b/test/assets/output/preset-uno-targets-2.css index aac2d7dad9..37adcb7ff7 100644 --- a/test/assets/output/preset-uno-targets-2.css +++ b/test/assets/output/preset-uno-targets-2.css @@ -1,9 +1,9 @@ /* layer: default */ .cls.multi, -section{--un-text-opacity:1;color:rgba(156,163,175,var(--un-text-opacity));} +section{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));} @media (prefers-color-scheme: dark){ -.body_main{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} +.body_main{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));} } @media (min-width: 768px){ -aside{--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), var(--un-ring-shadow), var(--un-shadow);} +aside{--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), var(--un-ring-shadow), var(--un-shadow);} } \ No newline at end of file diff --git a/test/assets/output/preset-uno-targets.css b/test/assets/output/preset-uno-targets.css index 0dc4025b8b..48e5d9ae50 100644 --- a/test/assets/output/preset-uno-targets.css +++ b/test/assets/output/preset-uno-targets.css @@ -3,26 +3,26 @@ .border-custom-b\/0{border-color:rgba(var(--custom), 0);} .border-custom-b\/10{border-color:rgba(var(--custom), 0.1);} .bg-custom-b{background-color:rgba(var(--custom), 1);} -.bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c)/var(--un-bg-opacity));} -.bg-custom-c\/10{background-color:rgba(var(--custom-c)/0.1);} +.bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c) / var(--un-bg-opacity));} +.bg-custom-c\/10{background-color:rgba(var(--custom-c) / 0.1);} .bg-custom-d{background-color:hsl(var(--custom-d), 1);} .bg-custom-d\/20{background-color:hsl(var(--custom-d), 0.2);} -.bg-custom-e{--un-bg-opacity:1;background-color:hsla(var(--custom-e),var(--un-bg-opacity));} -.bg-custom-e\/30{background-color:hsla(var(--custom-e),0.3);} +.bg-custom-e{--un-bg-opacity:1;background-color:hsl(var(--custom-e) / var(--un-bg-opacity));} +.bg-custom-e\/30{background-color:hsl(var(--custom-e) / 0.3);} .bg-custom-f{--un-bg-opacity:1;background-color:lch(var(--custom-f) / var(--un-bg-opacity));} .bg-custom-f\/\[var\(--f-op\)\]{background-color:lch(var(--custom-f) / var(--f-op));} .bg-custom-f\/30{background-color:lch(var(--custom-f) / 0.3);} -.bg-info{--un-bg-opacity:1;background-color:hsla(200.1,100%,54.3%,var(--un-bg-opacity));} -.bg-info\/\[10\%\]{background-color:hsla(200.1,100%,54.3%,10%);} -.bg-info\/10{background-color:hsla(200.1,100%,54.3%,0.1);} -.mix-shade-50-c-red-400{--un-text-opacity:1;color:rgba(calc(248 + (0 - 248) * 50 / 100),calc(113 + (0 - 113) * 50 / 100),calc(113 + (0 - 113) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} -.mix-shift--50-c-red-600{--un-text-opacity:1;color:rgba(calc(220 + (255 - 220) * 50 / 100),calc(38 + (255 - 38) * 50 / 100),calc(38 + (255 - 38) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} -.mix-shift-50-c-red-600{--un-text-opacity:1;color:rgba(calc(220 + (0 - 220) * 50 / 100),calc(38 + (0 - 38) * 50 / 100),calc(38 + (0 - 38) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} -.mix-tint-50-c-red-400{--un-text-opacity:1;color:rgba(calc(248 + (255 - 248) * 50 / 100),calc(113 + (255 - 113) * 50 / 100),calc(113 + (255 - 113) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} +.bg-info{--un-bg-opacity:1;background-color:hsl(200.1 100% 54.3% / var(--un-bg-opacity));} +.bg-info\/\[10\%\]{background-color:hsl(200.1 100% 54.3% / 10%);} +.bg-info\/10{background-color:hsl(200.1 100% 54.3% / 0.1);} +.mix-shade-50-c-red-400{--un-text-opacity:1;color:rgb(calc(248 + (0 - 248) * 50 / 100) calc(113 + (0 - 113) * 50 / 100) calc(113 + (0 - 113) * 50 / 100) / calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} +.mix-shift--50-c-red-600{--un-text-opacity:1;color:rgb(calc(220 + (255 - 220) * 50 / 100) calc(38 + (255 - 38) * 50 / 100) calc(38 + (255 - 38) * 50 / 100) / calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} +.mix-shift-50-c-red-600{--un-text-opacity:1;color:rgb(calc(220 + (0 - 220) * 50 / 100) calc(38 + (0 - 38) * 50 / 100) calc(38 + (0 - 38) * 50 / 100) / calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} +.mix-tint-50-c-red-400{--un-text-opacity:1;color:rgb(calc(248 + (255 - 248) * 50 / 100) calc(113 + (255 - 113) * 50 / 100) calc(113 + (255 - 113) * 50 / 100) / calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));} .text-custom-a{color:var(--custom);} -.focus\:placeholder-red-300:focus::placeholder{--un-placeholder-opacity:1;color:rgba(252,165,165,var(--un-placeholder-opacity));} +.focus\:placeholder-red-300:focus::placeholder{--un-placeholder-opacity:1;color:rgb(252 165 165 / var(--un-placeholder-opacity));} .placeholder-inherit::placeholder{color:inherit;} -.placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));} +.placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgb(248 113 113 / var(--un-placeholder-opacity));} .hover\:placeholder-op90:hover::placeholder{--un-placeholder-opacity:0.9;} .placeholder-op90::placeholder{--un-placeholder-opacity:0.9;} .placeholder-opacity-10::placeholder{--un-placeholder-opacity:0.1;} diff --git a/test/assets/output/preset-web-fonts.css b/test/assets/output/preset-web-fonts.css index cd83eee0e9..3131fc9cac 100644 --- a/test/assets/output/preset-web-fonts.css +++ b/test/assets/output/preset-web-fonts.css @@ -1,7 +1,7 @@ /* layer: imports */ @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* 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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);} +*,::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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);} /* layer: default */ .font-lato{font-family:"Lato",sans-serif;} .font-lobster{font-family:"Lobster";} diff --git a/test/assets/output/preset-wind-custom-var-prefix.css b/test/assets/output/preset-wind-custom-var-prefix.css index 8bdb148eb3..1464a2aa9a 100644 --- a/test/assets/output/preset-wind-custom-var-prefix.css +++ b/test/assets/output/preset-wind-custom-var-prefix.css @@ -1,4 +1,4 @@ /* layer: default */ .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));} -.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));} +.text-red{--hi-text-opacity:1;color:rgb(248 113 113 / var(--hi-text-opacity));} .text-opacity-50{--hi-text-opacity:0.5;} \ No newline at end of file diff --git a/test/assets/output/preset-wind-empty-var-prefix.css b/test/assets/output/preset-wind-empty-var-prefix.css index 1989f60fa2..fd9fc93cd7 100644 --- a/test/assets/output/preset-wind-empty-var-prefix.css +++ b/test/assets/output/preset-wind-empty-var-prefix.css @@ -1,4 +1,4 @@ /* layer: default */ .scale-100{--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z)) rotate(var(--rotate)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z));} -.text-red{--text-opacity:1;color:rgba(248,113,113,var(--text-opacity));} +.text-red{--text-opacity:1;color:rgb(248 113 113 / var(--text-opacity));} .text-opacity-50{--text-opacity:0.5;} \ No newline at end of file diff --git a/test/assets/output/preset-wind-targets.css b/test/assets/output/preset-wind-targets.css index f44dd3faa5..266d3bdf2e 100644 --- a/test/assets/output/preset-wind-targets.css +++ b/test/assets/output/preset-wind-targets.css @@ -1,8 +1,8 @@ /* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} /* layer: _pre */ @media (prefers-contrast: less){ -.uno-layer-_pre\:contrast-less\:bg-gray-3{--un-bg-opacity:1;background-color:rgba(209,213,219,var(--un-bg-opacity));} +.uno-layer-_pre\:contrast-less\:bg-gray-3{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity));} } /* layer: default */ .bg-blend-\$data{background-blend-mode:var(--data);} @@ -160,7 +160,7 @@ .divide-inline-reverse>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:1;} .divide-\$variable>:not([hidden])~:not([hidden]){border-color:var(--variable);} .divide-current>:not([hidden])~:not([hidden]){border-color:currentColor;} -.divide-green-500>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgba(34,197,94,var(--un-divide-opacity));} +.divide-green-500>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(34 197 94 / var(--un-divide-opacity));} .divide-transparent>:not([hidden])~:not([hidden]){border-color:transparent;} .divide-opacity-50>:not([hidden])~:not([hidden]){--un-divide-opacity:0.5;} .divide-dashed>:not([hidden])~:not([hidden]){border-style:dashed;} @@ -187,40 +187,40 @@ .bg-gradient-stops-\[blue\,pink\], .stops-\[blue\,pink\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.bg-gradient-from-green-600\/60{--un-gradient-from-position:0%;--un-gradient-from:rgba(22,163,74,0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600\/60{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / 0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-green-500\/50{--un-gradient-from-position:0%;--un-gradient-from:rgba(34,197,94,0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-green-500\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-via-current, -.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} -.bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} -.bg-gradient-via-green-600\/40{--un-gradient-via-position:50%;--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} +.bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} +.bg-gradient-via-green-600\/40{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / 0.4) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} -.via-\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} -.via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} -.via-green-500\/30{--un-gradient-via-position:50%;--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} +.via-\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-green-500\/30{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / 0.3) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-to-current, .to-current{--un-gradient-to-position:100%;--un-gradient-to:currentColor var(--un-gradient-to-position);} -.bg-gradient-to-green-600{--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,var(--un-to-opacity, 1)) var(--un-gradient-to-position);} -.bg-gradient-to-green-600\/60{--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0.6) var(--un-gradient-to-position);} +.bg-gradient-to-green-600{--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} +.bg-gradient-to-green-600\/60{--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0.6) var(--un-gradient-to-position);} .bg-gradient-to-transparent, .to-transparent{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);} .to-\$bg-to{--un-gradient-to-position:100%;--un-gradient-to:var(--bg-to) var(--un-gradient-to-position);} -.to-green-500{--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,var(--un-to-opacity, 1)) var(--un-gradient-to-position);} -.to-green-500\/50{--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0.5) var(--un-gradient-to-position);} +.to-green-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} +.to-green-500\/50{--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0.5) var(--un-gradient-to-position);} .bg-gradient-via-opacity-40{--un-via-opacity:0.4;} .via-opacity-30{--un-via-opacity:0.3;} .from-10\%{--un-gradient-from-position:10%;} .to-90\%{--un-gradient-to-position:90%;} .via-20\%{--un-gradient-via-position:20%;} -.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} +.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} +.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} .bg-gradient-to-t{--un-gradient-shape:to top;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-to-tl{--un-gradient-shape:to top left;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-shape-\[70deg\], @@ -251,7 +251,7 @@ .bg-repeat-revert{background-repeat:revert;} .bg-origin-border{background-origin:border-box;} .bg-origin-initial{background-origin:initial;} -.svg\:fill-red svg{--un-fill-opacity:1;fill:rgba(248,113,113,var(--un-fill-opacity));} +.svg\:fill-red svg{--un-fill-opacity:1;fill:rgb(248 113 113 / var(--un-fill-opacity));} .object-none{object-fit:none;} .object-\[center_25\%\]{object-position:center 25%;} .object-cb, @@ -272,9 +272,9 @@ .write-unset{writing-mode:unset;} .write-orient-sideways{text-orientation:sideways;} .write-orient-revert{text-orientation:revert;} -.caret-red{--un-caret-opacity:1;caret-color:rgba(248,113,113,var(--un-caret-opacity));} +.caret-red{--un-caret-opacity:1;caret-color:rgb(248 113 113 / var(--un-caret-opacity));} .caret-op-90{--un-caret-opacity:0.9;} -.accent-red{--un-accent-opacity:1;accent-color:rgba(248,113,113,var(--un-accent-opacity));} +.accent-red{--un-accent-opacity:1;accent-color:rgb(248 113 113 / var(--un-accent-opacity));} .accent-op-90{--un-accent-opacity:0.9;} .bg-blend-color-burn{background-blend-mode:color-burn;} .bg-blend-luminosity{background-blend-mode:luminosity;} @@ -284,7 +284,7 @@ .mix-blend-plus-lighter{mix-blend-mode:plus-lighter;} .mix-blend-normal{mix-blend-mode:normal;} .mix-blend-revert{mix-blend:revert;} -.data-dropdown\:ring-green[data-data-bs-toggle="dropdown"]{--un-ring-opacity:1;--un-ring-color:rgba(74,222,128,var(--un-ring-opacity));} +.data-dropdown\:ring-green[data-data-bs-toggle="dropdown"]{--un-ring-opacity:1;--un-ring-color:rgb(74 222 128 / var(--un-ring-opacity));} .image-render-pixel{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;} .backdrop-blur{--un-backdrop-blur:blur(8px);-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);} .backdrop-blur-4{--un-backdrop-blur:blur(4px);-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);} @@ -307,12 +307,12 @@ .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0/0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\[0_4px_3px_\#000\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0/0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0/0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgba(252,165,165,var(--un-drop-shadow-opacity));} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0 / 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgb(252 165 165 / var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} .backdrop-grayscale-90{--un-backdrop-grayscale:grayscale(0.9);-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);} @@ -351,12 +351,12 @@ .filter-unset{filter:unset;} .backdrop-filter-revert{-webkit-backdrop-filter:revert;backdrop-filter:revert;} .placeholder-inherit::placeholder{color:inherit;} -.placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));} +.placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgb(248 113 113 / var(--un-placeholder-opacity));} .view-transition-foo{view-transition-name:foo;} .view-transition-none{view-transition-name:none;} @media (hover: hover) and (pointer: fine){ -.\@hover-text-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} -[open] .\@hover\:\[\[open\]_\&\]\:text-blue:hover{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} +.\@hover-text-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} +[open] .\@hover\:\[\[open\]_\&\]\:text-blue:hover{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity));} } @media (orientation: landscape){ .landscape\:hidden{display:none;} @@ -368,7 +368,7 @@ .\@dark\:text-xl{font-size:1.25rem;line-height:1.75rem;} } @media (prefers-contrast: more){ -.contrast-more\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} +.contrast-more\:bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));} } @media (prefers-contrast: more){@media (prefers-color-scheme: dark){ .\@dark\:contrast-more\:p-10{padding:2.5rem;} diff --git a/test/assets/output/runtime-preset-tagify.css b/test/assets/output/runtime-preset-tagify.css index 4ea0324a14..b9b26d7e10 100644 --- a/test/assets/output/runtime-preset-tagify.css +++ b/test/assets/output/runtime-preset-tagify.css @@ -3,7 +3,7 @@ m-1{margin:0.25rem;} flex{display:flex;} scale-2{--un-scale-x:0.02;--un-scale-y:0.02;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));} .p2{padding:0.5rem;} -hover\:color-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} -text-green5\:10{color:rgba(34,197,94,0.1);} -text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} -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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file +hover\:color-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} +text-green5\:10{color:rgb(34 197 94 / 0.1);} +text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} +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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file diff --git a/test/assets/output/shortcuts-nested-pseudo.css b/test/assets/output/shortcuts-nested-pseudo.css index f78bc8afe7..be4f2e5c49 100644 --- a/test/assets/output/shortcuts-nested-pseudo.css +++ b/test/assets/output/shortcuts-nested-pseudo.css @@ -3,11 +3,11 @@ .btn3:focus{border-width:1px;} .focus\:btn3:focus:focus{border-width:1px;} .focus\:hover\:btn3:focus:hover:focus{border-width:1px;} -.btn3{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));} -.btn3:hover{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;} -.hover\:btn3:hover{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));} -.hover\:btn3:hover:hover{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;} -.focus\:btn3:focus{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));} -.focus\:btn3:hover:focus{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;} -.focus\:hover\:btn3:hover:focus{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(154,52,18,var(--un-text-opacity));} -.focus\:hover\:btn3:hover:hover:focus{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(21,94,117,var(--un-text-opacity));text-decoration-line:underline;} \ No newline at end of file +.btn3{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(154 52 18 / var(--un-text-opacity));} +.btn3:hover{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(21 94 117 / var(--un-text-opacity));text-decoration-line:underline;} +.hover\:btn3:hover{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(154 52 18 / var(--un-text-opacity));} +.hover\:btn3:hover:hover{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(21 94 117 / var(--un-text-opacity));text-decoration-line:underline;} +.focus\:btn3:focus{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(154 52 18 / var(--un-text-opacity));} +.focus\:btn3:hover:focus{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(21 94 117 / var(--un-text-opacity));text-decoration-line:underline;} +.focus\:hover\:btn3:hover:focus{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(154 52 18 / var(--un-text-opacity));} +.focus\:hover\:btn3:hover:hover:focus{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(21 94 117 / var(--un-text-opacity));text-decoration-line:underline;} \ No newline at end of file diff --git a/test/assets/output/transformer-directives-apply.css b/test/assets/output/transformer-directives-apply.css index bac75fc226..39e2c3d236 100644 --- a/test/assets/output/transformer-directives-apply.css +++ b/test/assets/output/transformer-directives-apply.css @@ -4,16 +4,16 @@ html { --un-bg-opacity: 1; - background-color: rgba(242, 242, 242, var(--un-bg-opacity)); + background-color: rgb(242 242 242 / var(--un-bg-opacity)); --un-text-opacity: 1; - color: rgba(64, 64, 64, var(--un-text-opacity)); + color: rgb(64 64 64 / var(--un-text-opacity)); } html.dark { --un-bg-opacity: 1; - background-color: rgba(24, 24, 24, var(--un-bg-opacity)); + background-color: rgb(24 24 24 / var(--un-bg-opacity)); --un-text-opacity: 1; - color: rgba(243, 244, 246, var(--un-text-opacity)); + color: rgb(243 244 246 / var(--un-text-opacity)); } #nprogress { @@ -22,7 +22,7 @@ html.dark { #nprogress .bar { --un-bg-opacity: 1; - background-color: rgba(168, 85, 247, var(--un-bg-opacity)); + background-color: rgb(168 85 247 / var(--un-bg-opacity)); --un-bg-opacity: 0.75; position: fixed; @@ -80,7 +80,7 @@ html.dark { appearance: none; border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(55, 65, 81, var(--un-bg-opacity)); + background-color: rgb(55 65 81 / var(--un-bg-opacity)); padding-left: 2rem; padding-right: 2rem; padding-top: 0.5rem; @@ -98,13 +98,13 @@ html.dark { box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow); --un-ring-opacity: 1; - --un-ring-color: rgba(31, 41, 55, var(--un-ring-opacity)); + --un-ring-color: rgb(31 41 55 / var(--un-ring-opacity)); --un-ring-opacity: 0.75; } @media (prefers-color-scheme: dark) { .select-dark { --un-bg-opacity: 1; - background-color: rgba(31, 41, 55, var(--un-bg-opacity)); + background-color: rgb(31 41 55 / var(--un-bg-opacity)); } } .select-dark:focus { @@ -138,10 +138,10 @@ html.dark { width: 100%; height: var(--header-height); --un-bg-opacity: 1; - background-color: rgba(0, 0, 0, var(--un-bg-opacity)); + background-color: rgb(0 0 0 / var(--un-bg-opacity)); --un-bg-opacity: 0.8; --un-text-opacity: 1; - color: rgba(255, 255, 255, var(--un-text-opacity)); + color: rgb(255 255 255 / var(--un-text-opacity)); --un-backdrop-blur: blur(16px); -webkit-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) @@ -167,7 +167,7 @@ html.dark { @media (prefers-color-scheme: dark) { .d-header { --un-bg-opacity: 1; - background-color: rgba(45, 45, 45, var(--un-bg-opacity)); + background-color: rgb(45 45 45 / var(--un-bg-opacity)); } } @@ -190,7 +190,7 @@ html.dark { input { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(50, 50, 50, var(--un-bg-opacity)); + background-color: rgb(50 50 50 / var(--un-bg-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -212,7 +212,7 @@ input:focus { .btn { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(60, 60, 60, var(--un-bg-opacity)); + background-color: rgb(60 60 60 / var(--un-bg-opacity)); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; @@ -221,7 +221,7 @@ input:focus { font-weight: 500; text-transform: uppercase; --un-text-opacity: 1; - color: rgba(255, 255, 255, var(--un-text-opacity)); + color: rgb(255 255 255 / var(--un-text-opacity)); } .btn:disabled { cursor: not-allowed; diff --git a/test/assets/output/transformer-directives-variant-group.css b/test/assets/output/transformer-directives-variant-group.css index 8edaea4304..7216245b0d 100644 --- a/test/assets/output/transformer-directives-variant-group.css +++ b/test/assets/output/transformer-directives-variant-group.css @@ -5,5 +5,5 @@ .btn:hover { border-width: 1px; --un-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--un-bg-opacity)); + background-color: rgb(255 255 255 / var(--un-bg-opacity)); } diff --git a/test/cases/preset-attributify/case-1/output.css b/test/cases/preset-attributify/case-1/output.css index 3c4847fe95..15fe59fc20 100644 --- a/test/cases/preset-attributify/case-1/output.css +++ b/test/cases/preset-attributify/case-1/output.css @@ -1,6 +1,6 @@ /* layer: base */ -[uno-layer-base~="c-white\/10"]{color:rgba(255,255,255,0.1);} -[uno-layer-base~="hover\:c-black\/20"]:hover{color:rgba(0,0,0,0.2);} +[uno-layer-base~="c-white\/10"]{color:rgb(255 255 255 / 0.1);} +[uno-layer-base~="hover\:c-black\/20"]:hover{color:rgb(0 0 0 / 0.2);} /* layer: default */ .absolute{position:absolute;} .fixed{position:fixed;} @@ -23,16 +23,16 @@ [flex~="items-center"]{align-items:center;} [border~="\32 "]{border-width:2px;} [border~="x-1"]{border-left-width:1px;border-right-width:1px;} -[border~="blue-200"]{--un-border-opacity:1;border-color:rgba(191,219,254,var(--un-border-opacity));} +[border~="blue-200"]{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));} [border~="rounded-xl"]{border-radius:0.75rem;} [border~="rounded"]{border-radius:0.25rem;} [rounded-sm=""]{border-radius:0.125rem;} [border~="x-style-dashed"]{border-left-style:dashed;border-right-style:dashed;} -.dark [bg~="dark\:\!blue-500"]{--un-bg-opacity:1 !important;background-color:rgba(59,130,246,var(--un-bg-opacity)) !important;} -[bg~="blue-400"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));} -[important~="bg-red"]{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;} -.dark [bg~="dark\:hover\:blue-600"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} -[bg~="hover\:blue-500"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));} +.dark [bg~="dark\:\!blue-500"]{--un-bg-opacity:1 !important;background-color:rgb(59 130 246 / var(--un-bg-opacity)) !important;} +[bg~="blue-400"]{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));} +[important~="bg-red"]{--un-bg-opacity:1 !important;background-color:rgb(248 113 113 / var(--un-bg-opacity)) !important;} +.dark [bg~="dark\:hover\:blue-600"]:hover{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));} +[bg~="hover\:blue-500"]:hover{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));} [p~="x-4"]{padding-left:1rem;padding-right:1rem;} [p~="y-2"]{padding-top:0.5rem;padding-bottom:0.5rem;} [p~="t-2"], @@ -42,8 +42,8 @@ [\!leading-4=""]{line-height:1rem !important;} [font~="mono"]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;} [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";} -[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));} +[important~="text-red"]{--un-text-opacity:1 !important;color:rgb(248 113 113 / var(--un-text-opacity)) !important;} +[text~="white"]{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));} [after~="content-\[quoted\:uno_css\]"]::after{content:"uno css";} @media (min-width: 640px){ [sm~="\[color\:red\]"]{color:red;} @@ -52,5 +52,5 @@ [md~="\[--var\:var\(--another\)\]"]{--var:var(--another);} } @media (min-width: 1024px){ -[lg~="bg-blue-600"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} +[lg~="bg-blue-600"]{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));} } \ No newline at end of file diff --git a/test/cases/preset-attributify/case-2/output.css b/test/cases/preset-attributify/case-2/output.css index 93f8d5bc50..2501c4c9d2 100644 --- a/test/cases/preset-attributify/case-2/output.css +++ b/test/cases/preset-attributify/case-2/output.css @@ -22,9 +22,9 @@ [peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="scale-75"], [peer=""]:focus~[peer-focus~="scale-75"]{--un-scale-x:0.75;--un-scale-y:0.75;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));} [select-none=""]{-webkit-user-select:none;user-select:none;} -[bg-gradient~="from-yellow-400"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(250,204,21,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -[bg-gradient~="via-red-500"]{--un-gradient-via-position:50%;--un-gradient-to:rgba(239,68,68,0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} -[bg-gradient~="to-pink-500"]{--un-gradient-to-position:100%;--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1)) var(--un-gradient-to-position);} +[bg-gradient~="from-yellow-400"]{--un-gradient-from-position:0%;--un-gradient-from:rgb(250 204 21 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(250 204 21 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +[bg-gradient~="via-red-500"]{--un-gradient-via-position:50%;--un-gradient-to:rgb(239 68 68 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(239 68 68 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} +[bg-gradient~="to-pink-500"]{--un-gradient-to-position:100%;--un-gradient-to:rgb(236 72 153 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} [bg-gradient~="to-r"]{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} [p-10=""]{padding:2.5rem;} [px-4=""]{padding-left:1rem;padding-right:1rem;} @@ -41,12 +41,12 @@ [font-200=""]{font-weight:200;} [leading-1rem=""]{line-height:1rem;} [tracking-wider=""]{letter-spacing:0.05em;} -[text-gray-7=""]{--un-text-opacity:1;color:rgba(55,65,81,var(--un-text-opacity));} -[text-true-gray-800=""]{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity));} +[text-gray-7=""]{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity));} +[text-true-gray-800=""]{--un-text-opacity:1;color:rgb(38 38 38 / var(--un-text-opacity));} [peer=""]:not(:placeholder-shown)~[peer-not-placeholder-shown~="text-green-500"], -[peer=""]:focus~[peer-focus~="text-green-500"]{--un-text-opacity:1;color:rgba(34,197,94,var(--un-text-opacity));} -[group=""]:hover [group-hover~="text-teal-400"]{--un-text-opacity:1;color:rgba(45,212,191,var(--un-text-opacity));} -[un-placeholder~="text-red"]::placeholder{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} +[peer=""]:focus~[peer-focus~="text-green-500"]{--un-text-opacity:1;color:rgb(34 197 94 / var(--un-text-opacity));} +[group=""]:hover [group-hover~="text-teal-400"]{--un-text-opacity:1;color:rgb(45 212 191 / var(--un-text-opacity));} +[un-placeholder~="text-red"]::placeholder{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} [op-20=""]{opacity:0.2;} [group=""]:hover [group-hover~="op-50"]{opacity:0.5;} [backdrop-element~="filter"]::backdrop{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} @@ -55,8 +55,8 @@ [before-content~="\[quoted\:\!\]"]::before{content:"!";} [after~="content-\[string\:\!\]"]::after{content:!;} @media (max-width: 767.9px){ -.\ { it('parses css colors', () => { expect(parseCssColor('rgb(0,1,2)')).eql({ type: 'rgb', components: ['0', '1', '2'], alpha: undefined }) - expect(parseCssColor('rgba(0,1,2,3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) - expect(parseCssColor('rgba(0,(1),2,3)')).eql({ type: 'rgba', components: ['0', '(1)', '2'], alpha: '3' }) + expect(parseCssColor('rgba(0 1 2 / 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) + expect(parseCssColor('rgba(0 (1) 2 / 3)')).eql({ type: 'rgba', components: ['0', '(1)', '2'], alpha: '3' }) expect(parseCssColor('rgb(0)')).eql({ type: 'rgb', components: ['0'], alpha: undefined }) expect(parseCssColor('rgb(0,1)')).eql(undefined) - expect(parseCssColor('rgba(0,1,2)')).eql(undefined) - expect(parseCssColor('rgba(0,1,2,3,4)')).eql(undefined) - expect(parseCssColor('rgba(0,)1(,2,3)')).eql(undefined) + expect(parseCssColor('rgba(0 1 2)')).eql(undefined) + expect(parseCssColor('rgba(0,1 2 3 / 4)')).eql(undefined) + expect(parseCssColor('rgba(0 )1( 2 / 3)')).eql(undefined) expect(parseCssColor('rgba(0 1 2 / 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) expect(parseCssColor('rgba(0 1 2/ 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) @@ -40,12 +40,12 @@ describe('color utils', () => { expect(parseCssColor('rgba(0 1)')).eql(undefined) expect(parseCssColor('rgba(0 1 / 2)')).eql(undefined) expect(parseCssColor('rgb(0 1 2)')).eql({ type: 'rgb', components: ['0', '1', '2'], alpha: undefined }) - expect(parseCssColor('rgba(0 1 2)')).eql(undefined) + expect(parseCssColor('rgba(0 1 2)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: undefined }) expect(parseCssColor('rgba(0 1 2 3)')).eql(undefined) expect(parseCssColor('rgba(0 1 2 3 4)')).eql(undefined) expect(parseCssColor('color(rgb 0 1 2)')).eql({ type: 'rgb', components: ['0', '1', '2'], alpha: undefined }) - expect(parseCssColor('color(rgba 0 1 2)')).eql(undefined) + expect(parseCssColor('color(rgba 0 1 2)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: undefined }) expect(parseCssColor('color(rgba 0 1 2 / 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) expect(parseCssColor('color(fancy 0 1 2 3 4 5 / 6)')).eql({ type: 'fancy', components: ['0', '1', '2', '3', '4', '5'], alpha: '6' }) @@ -77,16 +77,16 @@ describe('color utils', () => { it('generate css color string', () => { const fn = (x: string) => colorToString(parseCssColor(x)!) - expect(fn('rgb(0,1,2)')).eql('rgba(0,1,2)') - expect(fn('rgba(0,1,2,3)')).eql('rgba(0 1 2/3)') - expect(fn('rgba(0,(1),2,3)')).eql('rgba(0 (1) 2/3)') + expect(fn('rgb(0,1,2)')).eql('rgb(0 1 2)') + expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0 1 2 / 3)') + expect(fn('rgba(0 (1) 2 / 3)')).eql('rgba(0 (1) 2 / 3)') - expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0 1 2/3)') - expect(fn('rgba(0 1 2/ 3)')).eql('rgba(0 1 2/3)') - expect(fn('rgba(0 1 2 /3)')).eql('rgba(0 1 2/3)') - expect(fn('rgba(0 1 2/3)')).eql('rgba(0 1 2/3)') + expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0 1 2 / 3)') + expect(fn('rgba(0 1 2/ 3)')).eql('rgba(0 1 2 / 3)') + expect(fn('rgba(0 1 2 /3)')).eql('rgba(0 1 2 / 3)') + expect(fn('rgba(0 1 2/3)')).eql('rgba(0 1 2 / 3)') - expect(fn('color(rgba 0 1 2 / 3)')).eql('rgba(0 1 2/3)') + expect(fn('color(rgba 0 1 2 / 3)')).eql('rgba(0 1 2 / 3)') expect(fn('color(fancy 0 1 2 3 4 5 / 6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') expect(fn('color(fancy 0 1 2 3 4 5 /6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') expect(fn('color(fancy 0 1 2 3 4 5/ 6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') @@ -106,13 +106,13 @@ describe('color utils', () => { it('parses shadow color values', () => { // default 'none' - expect(colorableShadows('0 0 #0000', '--v')).eql(['0 0 var(--v, rgba(0,0,0,0))']) + expect(colorableShadows('0 0 #0000', '--v')).eql(['0 0 var(--v, rgb(0 0 0 / 0))']) // with spaces - expect(colorableShadows('0 1px 3px 0 rgba(0, 0, 0, 0.2)', '--v')).eql(['0 1px 3px 0 var(--v, rgba(0 0 0/0.2))']) + expect(colorableShadows('0 1px 3px 0 rgba(0, 0, 0, 0.2)', '--v')).eql(['0 1px 3px 0 var(--v, rgba(0 0 0 / 0.2))']) // full box-shadow - expect(colorableShadows('var(--un-shadow-inset) 0 1px 3px 0 #0000', '--v')).eql(['var(--un-shadow-inset) 0 1px 3px 0 var(--v, rgba(0,0,0,0))']) + expect(colorableShadows('var(--un-shadow-inset) 0 1px 3px 0 #0000', '--v')).eql(['var(--un-shadow-inset) 0 1px 3px 0 var(--v, rgb(0 0 0 / 0))']) // no color expect(colorableShadows('0', '--v')).eql(['0']) @@ -123,7 +123,7 @@ describe('color utils', () => { // component length expect(colorableShadows('1px #200', '--v')).eql(['1px #200']) - expect(colorableShadows('inset 2px 3px 4px 5px #600', '--v')).eql(['inset 2px 3px 4px 5px var(--v, rgba(102,0,0))']) + expect(colorableShadows('inset 2px 3px 4px 5px #600', '--v')).eql(['inset 2px 3px 4px 5px var(--v, rgb(102 0 0))']) expect(colorableShadows('inset 2px 3px 4px 5px 6px #700', '--v')).eql(['inset 2px 3px 4px 5px 6px #700']) }) @@ -148,38 +148,38 @@ describe('color utils', () => { expect(fn('info')).eql({ '--un-v-opacity': 1, - 'prop': 'hsla(200.1,100%,54.3%,var(--un-v-opacity))', + 'prop': 'hsl(200.1 100% 54.3% / var(--un-v-opacity))', }) expect(fn('info/10')).eql({ - prop: 'hsla(200.1,100%,54.3%,0.1)', + prop: 'hsl(200.1 100% 54.3% / 0.1)', }) expect(fn('warning')).eql({ '--un-v-opacity': 1, - 'prop': 'hsla(42.4,100%,50%,var(--un-v-opacity))', + 'prop': 'hsl(42.4 100% 50% / var(--un-v-opacity))', }) expect(fn('warning/[20%]')).eql({ - prop: 'hsla(42.4,100%,50%,20%)', + prop: 'hsl(42.4 100% 50% / 20%)', }) expect(fn('danger')).eql({ '--un-v-opacity': 1, - 'prop': 'hsla(var(--danger),var(--un-v-opacity))', + 'prop': 'hsl(var(--danger) / var(--un-v-opacity))', }) expect(fn('danger/$o3')).eql({ - prop: 'hsla(var(--danger),var(--o3))', + prop: 'hsl(var(--danger) / var(--o3))', }) expect(fn('hex-fff')).eql({ '--un-v-opacity': 1, - 'prop': 'rgba(255,255,255,var(--un-v-opacity))', + 'prop': 'rgb(255 255 255 / var(--un-v-opacity))', }) expect(fn('hex-fff/10')).eql({ - prop: 'rgba(255,255,255,0.1)', + prop: 'rgb(255 255 255 / 0.1)', }) expect(fn('$abc')).eql({ diff --git a/test/config.test.ts b/test/config.test.ts index df1a3796cd..d39ec1ad74 100644 --- a/test/config.test.ts +++ b/test/config.test.ts @@ -26,8 +26,8 @@ describe('config', () => { const { css } = await uno.generate('text-red-500 text-blue', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: default */ - .text-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} - .text-red-500{--un-text-opacity:1;color:rgba(0,255,0,var(--un-text-opacity));}" + .text-blue{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity));} + .text-red-500{--un-text-opacity:1;color:rgb(0 255 0 / var(--un-text-opacity));}" `) }) diff --git a/test/layer.test.ts b/test/layer.test.ts index af8834ffa7..f089f880b5 100644 --- a/test/layer.test.ts +++ b/test/layer.test.ts @@ -40,7 +40,7 @@ describe('layers', () => { "/* layer: imports */ @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Mono:wght@400;700&display=swap'); /* 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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--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 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);} + *,::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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);} /* layer: default */ .font-mono{font-family:\\"Fira Code\\",\\"Fira Mono\\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}" `) diff --git a/test/preset-tagify.test.ts b/test/preset-tagify.test.ts index e28d1c4f45..4e28cbac8a 100644 --- a/test/preset-tagify.test.ts +++ b/test/preset-tagify.test.ts @@ -52,15 +52,15 @@ describe('tagify', () => { expect((await uno.generate(code, { preflights: false })).css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - btn{padding-left:1rem;padding-right:1rem;padding-top:0.25rem;padding-bottom:0.25rem;display:inline-block;--un-bg-opacity:1;background-color:rgba(13,148,136,var(--un-bg-opacity));border-radius:0.25rem;--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));cursor:pointer;} - btn:disabled{opacity:0.5;--un-bg-opacity:1;background-color:rgba(75,85,99,var(--un-bg-opacity));cursor:default;} - btn:hover{--un-bg-opacity:1;background-color:rgba(15,118,110,var(--un-bg-opacity));} + btn{padding-left:1rem;padding-right:1rem;padding-top:0.25rem;padding-bottom:0.25rem;display:inline-block;--un-bg-opacity:1;background-color:rgb(13 148 136 / var(--un-bg-opacity));border-radius:0.25rem;--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));cursor:pointer;} + btn:disabled{opacity:0.5;--un-bg-opacity:1;background-color:rgb(75 85 99 / var(--un-bg-opacity));cursor:default;} + btn:hover{--un-bg-opacity:1;background-color:rgb(15 118 110 / var(--un-bg-opacity));} /* layer: default */ .p2{padding:0.5rem;} m-1{margin:0.25rem;} - hover\\\\:color-red:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} - text-green5\\\\:10{color:rgba(34,197,94,0.1);} - text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} + hover\\\\:color-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} + text-green5\\\\:10{color:rgb(34 197 94 / 0.1);} + text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} flex{display:flex;} .h2{height:0.5rem;} custom-rule{background-color:pink;}" diff --git a/test/shortcuts.test.ts b/test/shortcuts.test.ts index fd3f351ca0..ede9a101bc 100644 --- a/test/shortcuts.test.ts +++ b/test/shortcuts.test.ts @@ -94,9 +94,9 @@ describe('shortcuts', () => { const { css } = await uno.generate('shortcut-hover-active-1', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .shortcut-hover-active-1:hover{--un-bg-opacity:1;background-color:rgba(134,239,172,var(--un-bg-opacity));} - .shortcut-hover-active-1:focus{--un-bg-opacity:1;background-color:rgba(134,239,172,var(--un-bg-opacity));} - .shortcut-hover-active-1:active{--un-bg-opacity:1;background-color:rgba(134,239,172,var(--un-bg-opacity));}" + .shortcut-hover-active-1:hover{--un-bg-opacity:1;background-color:rgb(134 239 172 / var(--un-bg-opacity));} + .shortcut-hover-active-1:focus{--un-bg-opacity:1;background-color:rgb(134 239 172 / var(--un-bg-opacity));} + .shortcut-hover-active-1:active{--un-bg-opacity:1;background-color:rgb(134 239 172 / var(--un-bg-opacity));}" `) }) @@ -104,9 +104,9 @@ describe('shortcuts', () => { const { css } = await uno.generate('shortcut-hover-active-2', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} - .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} - .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" + .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgb(253 224 71 / var(--un-bg-opacity));} + .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgb(252 165 165 / var(--un-bg-opacity));} + .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}" `) }) @@ -114,10 +114,10 @@ describe('shortcuts', () => { const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-red-300', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .uno-layer-shortcuts\\\\:bg-red-300{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} - .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} - .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} - .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" + .uno-layer-shortcuts\\\\:bg-red-300{--un-bg-opacity:1;background-color:rgb(252 165 165 / var(--un-bg-opacity));} + .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgb(253 224 71 / var(--un-bg-opacity));} + .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgb(252 165 165 / var(--un-bg-opacity));} + .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}" `) }) @@ -125,10 +125,10 @@ describe('shortcuts', () => { const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-yellow-300', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .uno-layer-shortcuts\\\\:bg-yellow-300{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} - .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} - .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} - .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" + .uno-layer-shortcuts\\\\:bg-yellow-300{--un-bg-opacity:1;background-color:rgb(253 224 71 / var(--un-bg-opacity));} + .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgb(253 224 71 / var(--un-bg-opacity));} + .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgb(252 165 165 / var(--un-bg-opacity));} + .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}" `) }) @@ -136,10 +136,10 @@ describe('shortcuts', () => { const { css } = await uno.generate('shortcut-hover-active-2 uno-layer-shortcuts:bg-blue-300', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .uno-layer-shortcuts\\\\:bg-blue-300{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} - .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} - .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} - .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" + .uno-layer-shortcuts\\\\:bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));} + .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgb(253 224 71 / var(--un-bg-opacity));} + .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgb(252 165 165 / var(--un-bg-opacity));} + .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}" `) }) @@ -178,8 +178,8 @@ describe('shortcuts', () => { const { css } = await uno.generate('test test-last', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .test:focus{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));} - .test-last:focus{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}" + .test:focus{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity));} + .test-last:focus{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity));}" `) }) @@ -187,8 +187,8 @@ describe('shortcuts', () => { const { css } = await uno.generate('divide-y divide-default', { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .dark .divide-default>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgba(51,51,74,var(--un-divide-opacity));} - .divide-default>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgba(0,0,0,var(--un-divide-opacity));} + .dark .divide-default>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(51 51 74 / var(--un-divide-opacity));} + .divide-default>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(0 0 0 / var(--un-divide-opacity));} /* layer: default */ .divide-y>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(1px * var(--un-divide-y-reverse));}" `) diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts index 83d93b6987..d311f17596 100644 --- a/test/transformer-compile-class.test.ts +++ b/test/transformer-compile-class.test.ts @@ -54,11 +54,11 @@ describe('transformer-compile-class', () => { `) expect(result.css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .uno-pe1esh{--un-scale-x:0.05;--un-scale-y:0.05;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));border-width:1px;--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;} - .dark .uno-pe1esh:hover{--un-bg-opacity:1;background-color:rgba(34,197,94,var(--un-bg-opacity));} + .uno-pe1esh{--un-scale-x:0.05;--un-scale-y:0.05;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));border-width:1px;--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;} + .dark .uno-pe1esh:hover{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity));} .uno-cbgd7b{text-align:center;} .uno-s9yxer{font-size:0.875rem;line-height:1.25rem;font-weight:700;} - .uno-s9yxer:hover{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} + .uno-s9yxer:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} @media (min-width: 640px){ .uno-cbgd7b{text-align:left;} }" @@ -83,7 +83,7 @@ describe('transformer-compile-class', () => { expect(result.css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .uno-trmz0g{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;}" + .uno-trmz0g{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;}" `) }) @@ -100,7 +100,7 @@ describe('transformer-compile-class', () => { expect(result.css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .something-foo{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;}" + .something-foo{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;}" `) }) @@ -114,7 +114,7 @@ describe('transformer-compile-class', () => { expect(result.css).toMatchInlineSnapshot(` "/* layer: shortcuts */ - .uno-foo_bar-baz{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;}" + .uno-foo_bar-baz{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;}" `) }) diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts index f849d89334..3526b6570a 100644 --- a/test/transformer-directives.test.ts +++ b/test/transformer-directives.test.ts @@ -23,7 +23,7 @@ describe('transformer-directives', () => { hsl: 'hsl(210, 50%, 50%)', hsla: 'hsl(210, 50%, 50%, )', rgb: 'rgb(255, 0, 0)', - rgba: 'rgba(255, 0, 0, 0.5)', + rgba: 'rgba(255 0 0 / 0.5)', }, breakpoints: { xs: '320px', @@ -92,7 +92,7 @@ describe('transformer-directives', () => { } .btn:hover { --un-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--un-bg-opacity)); + background-color: rgb(255 255 255 / var(--un-bg-opacity)); } " `) @@ -109,7 +109,7 @@ describe('transformer-directives', () => { @media (min-width: 640px) { .btn:hover { --un-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--un-bg-opacity)); + background-color: rgb(255 255 255 / var(--un-bg-opacity)); } } " @@ -183,14 +183,14 @@ describe('transformer-directives', () => { ".btn { padding: 0.75rem; --un-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--un-bg-opacity)); + background-color: rgb(255 255 255 / var(--un-bg-opacity)); } .btn:hover { border-width: 1px; } .btn:hover { --un-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--un-bg-opacity)); + background-color: rgb(59 130 246 / var(--un-bg-opacity)); } " `) @@ -217,11 +217,11 @@ describe('transformer-directives', () => { .toMatchInlineSnapshot(` ".btn { --un-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--un-bg-opacity)); + background-color: rgb(255 255 255 / var(--un-bg-opacity)); } .dark .btn { --un-bg-opacity: 1; - background-color: rgba(0, 0, 0, var(--un-bg-opacity)); + background-color: rgb(0 0 0 / var(--un-bg-opacity)); } " `) @@ -467,11 +467,11 @@ div { }`) expect(result).toMatchInlineSnapshot(` "div { - color: rgba(239, 68, 68, 50%); - color: rgba(255, 0, 0, 0.5); - color: rgba(255 0 0/ 50%); - color: hsla(210, 50%, 50%, 0.6); - color: hsla(210, 50%, 50%, 60%); + color: rgb(239 68 68 / 50%); + color: rgb(255 0 0 / 0.5); + color: rgba(255 0 0 / 50%); + color: hsl(210 50% 50% / 0.6); + color: hsl(210 50% 50% / 60%); } " `) diff --git a/test/utils.test.ts b/test/utils.test.ts index 1fc0dc7bd7..64e193c56d 100644 --- a/test/utils.test.ts +++ b/test/utils.test.ts @@ -69,35 +69,35 @@ it('getColorString', () => { /* layer: default */ .text-amber { --un-text-opacity: 1; - color: rgba(251, 191, 36, var(--un-text-opacity)); + color: rgba(251 191 36 / var(--un-text-opacity)); }` const textAmberImportant = ` /* layer: default */ .\!text-amber { --un-text-opacity: 1 !important; - color: rgba(251, 191, 36, var(--un-text-opacity)) !important; + color: rgba(251 191 36 / var(--un-text-opacity)) !important; }` const bgAmber = ` /* layer: default */ .bg-amber { --un-bg-opacity: 1; - background-color: rgba(251, 191, 36, var(--un-bg-opacity)); + background-color: rgba(251 191 36 / var(--un-bg-opacity)); }` const bgAmberImportant = ` /* layer: default */ .\!bg-amber { --un-bg-opacity: 1 !important; - background-color: rgba(251, 191, 36, var(--un-bg-opacity)) !important; + background-color: rgba(251 191 36 / var(--un-bg-opacity)) !important; } ` - expect(getColorString(textAmber)).eql('rgba(251, 191, 36, 1)') - expect(getColorString(textAmberImportant)).eql('rgba(251, 191, 36, 1)') - expect(getColorString(bgAmber)).eql('rgba(251, 191, 36, 1)') - expect(getColorString(bgAmberImportant)).eql('rgba(251, 191, 36, 1)') + expect(getColorString(textAmber)).eql('rgba(251 191 36 / 1)') + expect(getColorString(textAmberImportant)).eql('rgba(251 191 36 / 1)') + expect(getColorString(bgAmber)).eql('rgba(251 191 36 / 1)') + expect(getColorString(bgAmberImportant)).eql('rgba(251 191 36 / 1)') }) it('addRemToPxComment', () => { From f8dd6f37876c1ae663751f1b98c80239bf9c76c9 Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Thu, 12 Oct 2023 11:59:55 +0800 Subject: [PATCH 3/5] chore: update --- docs/.vitepress/theme/vars.css | 12 ++++---- docs/config/shortcuts.md | 8 ++--- docs/config/theme.md | 2 +- docs/presets/mini.md | 6 ++-- docs/presets/wind.md | 2 +- docs/transformers/compile-class.md | 2 +- examples/sveltekit-scoped/README.md | 4 +-- examples/sveltekit/src/routes/Counter.svelte | 4 +-- examples/sveltekit/src/routes/Go.svelte | 4 +-- interactive/markdown.css | 4 +-- interactive/spa-loading-template.html | 2 +- packages/inspector/client/main.css | 2 +- packages/preset-mini/src/_rules/ring.ts | 4 +-- packages/preset-mini/src/_rules/shadow.ts | 6 ++-- packages/preset-mini/src/_theme/filters.ts | 14 ++++----- packages/preset-mini/src/_theme/font.ts | 12 ++++---- packages/preset-mini/src/_theme/misc.ts | 16 +++++----- packages/preset-mini/src/_utils/utilities.ts | 6 ++-- packages/preset-wind/src/rules/background.ts | 4 +-- packages/rule-utils/src/colors.ts | 3 ++ packages/shared-docs/src/utils.ts | 2 +- .../test/cases/preflights/OutputDev.svelte | 21 +++++++------ .../test/cases/preflights/OutputProd.svelte | 21 +++++++------ .../test/cases/prose/OutputDev.svelte | 16 +++++----- .../test/cases/prose/OutputProd.svelte | 16 +++++----- packages/transformer-compile-class/README.md | 2 +- packages/vscode/src/utils.ts | 16 +++++----- playground/src/main.css | 2 +- test/__snapshots__/cli.test.ts.snap | 2 +- test/__snapshots__/postcss.test.ts.snap | 30 +++++++++---------- test/__snapshots__/preflights.test.ts.snap | 8 ++--- test/assets/output/preset-mini-targets.css | 20 ++++++------- test/assets/output/preset-uno-targets-2.css | 2 +- test/assets/output/preset-uno-targets.css | 4 +-- test/assets/output/preset-web-fonts.css | 4 +-- test/assets/output/preset-wind-targets.css | 28 ++++++++--------- test/assets/output/runtime-preset-tagify.css | 2 +- test/color.test.ts | 26 ++++++++-------- test/layer.test.ts | 2 +- test/transformer-directives.test.ts | 2 +- test/utils.test.ts | 16 +++++----- 41 files changed, 180 insertions(+), 179 deletions(-) diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index b4cdd1e264..0a6483fb02 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -9,16 +9,16 @@ :root { --vp-c-gutter: var(--vp-c-divider); - --vp-code-block-bg: rgba(125 125 125 / 0.04); + --vp-code-block-bg: rgba(125, 125, 125, 0.04); --vp-code-tab-divider: var(--vp-c-divider); - --vp-code-copy-code-bg: rgba(125 125 125 / 0.1); - --vp-code-copy-code-hover-bg: rgba(125 125 125 / 0.2); - --vp-c-disabled-bg: rgba(125 125 125 / 0.2); + --vp-code-copy-code-bg: rgba(125, 125, 125, 0.1); + --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2); + --vp-c-disabled-bg: rgba(125, 125, 125, 0.2); --vp-code-tab-text-color: var(--vp-c-text-2); --vp-code-tab-active-text-color: var(--vp-c-text-1); --vp-code-tab-hover-text-color: var(--vp-c-text-1); --vp-code-copy-code-active-text: var(--vp-c-text-2); - --vp-c-text-dark-3: rgba(56 56 56 / 0.8); + --vp-c-text-dark-3: rgba(56, 56, 56, 0.8); --vp-c-brand-lightest: var(--vp-c-brand-1); --vp-c-highlight-bg: var(--vp-c-brand-light); @@ -26,7 +26,7 @@ } .dark { - --vp-code-block-bg: rgba(0 0 0 / 0.2); + --vp-code-block-bg: rgba(0, 0, 0, 0.2); --vp-c-text-code: #c0cec0; } diff --git a/docs/config/shortcuts.md b/docs/config/shortcuts.md index 2c6ed73b2a..30a156aa32 100644 --- a/docs/config/shortcuts.md +++ b/docs/config/shortcuts.md @@ -45,10 +45,10 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS: padding-left: 1rem; padding-right: 1rem; --un-bg-opacity: 1; - background-color: rgba(74 222 128 / var(--un-bg-opacity)); + background-color: rgba(74, 222, 128, var(--un-bg-opacity)); border-radius: 0.5rem; --un-text-opacity: 1; - color: rgba(220 252 231 / var(--un-text-opacity)); + color: rgba(220, 252, 231, var(--un-text-opacity)); } .btn-red { padding-top: 0.5rem; @@ -56,9 +56,9 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS: padding-left: 1rem; padding-right: 1rem; --un-bg-opacity: 1; - background-color: rgba(248 113 113 / var(--un-bg-opacity)); + background-color: rgba(248, 113, 113, var(--un-bg-opacity)); border-radius: 0.5rem; --un-text-opacity: 1; - color: rgba(254 226 226 / var(--un-text-opacity)); + color: rgba(254, 226, 226, var(--un-text-opacity)); } ``` diff --git a/docs/config/theme.md b/docs/config/theme.md index a88cd59a0a..a86f3ff0dd 100644 --- a/docs/config/theme.md +++ b/docs/config/theme.md @@ -17,7 +17,7 @@ theme: { colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { - 'primary': 'hsla(var(--hue 217) 78% / 51%)', //class="bg-brand-primary" + 'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" } }, } diff --git a/docs/presets/mini.md b/docs/presets/mini.md index d30ca77979..92582bbdce 100644 --- a/docs/presets/mini.md +++ b/docs/presets/mini.md @@ -63,7 +63,7 @@ will generate: ```css .dark .dark\:bg-red\:10 { - background-color: rgba(248 113 113 / 0.1); + background-color: rgba(248, 113, 113, 0.1); } ``` @@ -76,7 +76,7 @@ To opt-in media query based dark mode, you can use `@dark:` variant: ```css @media (prefers-color-scheme: dark) { .\@dark\:bg-red\:10 { - background-color: rgba(248 113 113 / 0.1); + background-color: rgba(248, 113, 113, 0.1); } } ``` @@ -125,7 +125,7 @@ presetMini({ colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { - 'primary': 'hsla(var(--hue 217) 78% / 51%)', //class="bg-brand-primary" + 'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" } }, } diff --git a/docs/presets/wind.md b/docs/presets/wind.md index 8abf4b873e..27e575bac3 100644 --- a/docs/presets/wind.md +++ b/docs/presets/wind.md @@ -91,7 +91,7 @@ The variant `@hover-text-red` will output: @media (hover: hover) and (pointer: fine) { .\@hover-text-red:hover { --un-text-opacity: 1; - color: rgba(248 113 113 / var(--un-text-opacity)); + color: rgba(248, 113, 113, var(--un-text-opacity)); } } ``` diff --git a/docs/transformers/compile-class.md b/docs/transformers/compile-class.md index 17dc74fee0..fedd4b4f79 100644 --- a/docs/transformers/compile-class.md +++ b/docs/transformers/compile-class.md @@ -68,7 +68,7 @@ Will be compiled to: } .uno-0qw2gr:hover { --un-text-opacity: 1; - color: rgba(248 113 113 / var(--un-text-opacity)); + color: rgba(248, 113, 113, var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { diff --git a/examples/sveltekit-scoped/README.md b/examples/sveltekit-scoped/README.md index c665be4109..958d7c71c6 100644 --- a/examples/sveltekit-scoped/README.md +++ b/examples/sveltekit-scoped/README.md @@ -57,7 +57,7 @@ will be transformed into this: diff --git a/examples/sveltekit/src/routes/Go.svelte b/examples/sveltekit/src/routes/Go.svelte index 318b7afbd0..9238e69346 100644 --- a/examples/sveltekit/src/routes/Go.svelte +++ b/examples/sveltekit/src/routes/Go.svelte @@ -30,7 +30,7 @@ font-size: inherit; padding: 1em 2em; color: #ff3e00; - background-color: rgba(255 62 0 / 0.1); + background-color: rgba(255, 62, 0, 0.1); border-radius: 2em; border: 2px solid rgba(255, 62, 0, 0); outline: none; @@ -43,6 +43,6 @@ border: 2px solid #ff3e00; } button:active { - background-color: rgba(255 62 0 / 0.2); + background-color: rgba(255, 62, 0, 0.2); } diff --git a/interactive/markdown.css b/interactive/markdown.css index 2a2a186da1..853a7ba85f 100644 --- a/interactive/markdown.css +++ b/interactive/markdown.css @@ -58,7 +58,7 @@ } mark { - background-color: rgba(187 128 9 / 0.15); + background-color: rgba(187, 128, 9, 0.15); color: #c9d1d9; } @@ -629,7 +629,7 @@ } table tr:nth-child(2n) { - background-color: rgba(156 163 175 / 0.02); + background-color: rgba(156, 163, 175, 0.02); } img { diff --git a/interactive/spa-loading-template.html b/interactive/spa-loading-template.html index 59c5f4dba3..a78ed85525 100644 --- a/interactive/spa-loading-template.html +++ b/interactive/spa-loading-template.html @@ -27,7 +27,7 @@ @media (prefers-color-scheme: dark) { html { - background-color: rgba(18 18 18 / 1); + background-color: rgba(18, 18, 18, 1); color-scheme: dark; } } diff --git a/packages/inspector/client/main.css b/packages/inspector/client/main.css index 61d959aac3..ada61f927e 100644 --- a/packages/inspector/client/main.css +++ b/packages/inspector/client/main.css @@ -23,7 +23,7 @@ html:not(.dark) { left: 0; top: 0; transition: opacity 0.4s; - background-color: rgba(125 125 125 / 0.1); + background-color: rgba(125, 125, 125, 0.1); opacity: 0; z-index: 1; } diff --git a/packages/preset-mini/src/_rules/ring.ts b/packages/preset-mini/src/_rules/ring.ts index e1c6865482..c5b3cd800e 100644 --- a/packages/preset-mini/src/_rules/ring.ts +++ b/packages/preset-mini/src/_rules/ring.ts @@ -8,8 +8,8 @@ export const ringBase = { '--un-ring-offset-width': '0px', '--un-ring-offset-color': '#fff', '--un-ring-width': '0px', - '--un-ring-color': 'rgba(147 197 253 / 0.5)', - '--un-shadow': '0 0 rgba(0 0 0 / 0)', + '--un-ring-color': 'rgba(147, 197, 253, 0.5)', + '--un-shadow': '0 0 rgba(0, 0, 0, 0)', } export const rings: Rule[] = [ diff --git a/packages/preset-mini/src/_rules/shadow.ts b/packages/preset-mini/src/_rules/shadow.ts index 1b631701db..925fe5f737 100644 --- a/packages/preset-mini/src/_rules/shadow.ts +++ b/packages/preset-mini/src/_rules/shadow.ts @@ -4,10 +4,10 @@ import { colorResolver, colorableShadows, h, hasParseableColor } from '../utils' import { varEmpty } from './static' export const boxShadowsBase = { - '--un-ring-offset-shadow': '0 0 rgba(0 0 0 / 0)', - '--un-ring-shadow': '0 0 rgba(0 0 0 / 0)', + '--un-ring-offset-shadow': '0 0 rgba(0, 0, 0, 0)', + '--un-ring-shadow': '0 0 rgba(0, 0, 0, 0)', '--un-shadow-inset': varEmpty, - '--un-shadow': '0 0 rgba(0 0 0 / 0)', + '--un-shadow': '0 0 rgba(0, 0, 0, 0)', } export const boxShadows: Rule[] = [ diff --git a/packages/preset-mini/src/_theme/filters.ts b/packages/preset-mini/src/_theme/filters.ts index 767c4175ce..69f228eacc 100644 --- a/packages/preset-mini/src/_theme/filters.ts +++ b/packages/preset-mini/src/_theme/filters.ts @@ -10,11 +10,11 @@ export const blur = { } export const dropShadow = { - 'DEFAULT': ['0 1px 2px rgba(0 0 0 / 0.1)', '0 1px 1px rgba(0 0 0 / 0.06)'], - 'sm': '0 1px 1px rgba(0 0 0 / 0.05)', - 'md': ['0 4px 3px rgba(0 0 0 / 0.07)', '0 2px 2px rgba(0 0 0 / 0.06)'], - 'lg': ['0 10px 8px rgba(0 0 0 / 0.04)', '0 4px 3px rgba(0 0 0 / 0.1)'], - 'xl': ['0 20px 13px rgba(0 0 0 / 0.03)', '0 8px 5px rgba(0 0 0 / 0.08)'], - '2xl': '0 25px 25px rgba(0 0 0 / 0.15)', - 'none': '0 0 rgba(0 0 0 / 0)', + 'DEFAULT': ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], + 'sm': '0 1px 1px rgba(0, 0, 0, 0.05)', + 'md': ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'], + 'lg': ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'], + 'xl': ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'], + '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)', + 'none': '0 0 rgba(0, 0, 0, 0)', } diff --git a/packages/preset-mini/src/_theme/font.ts b/packages/preset-mini/src/_theme/font.ts index 8553497b9e..a44ade2e28 100644 --- a/packages/preset-mini/src/_theme/font.ts +++ b/packages/preset-mini/src/_theme/font.ts @@ -73,12 +73,12 @@ export const textStrokeWidth: Theme['textStrokeWidth'] = { } satisfies Theme['textStrokeWidth'] export const textShadow = { - DEFAULT: ['0 0 1px rgba(0 0 0 / 0.2)', '0 0 1px rgba(1 0 5 / 0.1)'], - none: '0 0 rgba(0 0 0 / 0)', - sm: '1px 1px 3px rgba(36 37 47 / 0.25)', - md: ['0 1px 2px rgba(30 29 39 / 0.19)', '1px 2px 4px rgba(54 64 147 / 0.18)'], - lg: ['3px 3px 6px rgba(0 0 0 / 0.26)', '0 0 5px rgba(15 3 86 / 0.22)'], - xl: ['1px 1px 3px rgba(0 0 0 / 0.29)', '2px 4px 7px rgba(73 64 125 / 0.35)'], + DEFAULT: ['0 0 1px rgba(0, 0, 0, 0.2)', '0 0 1px rgba(1, 0, 5, 0.1)'], + none: '0 0 rgba(0, 0, 0, 0)', + sm: '1px 1px 3px rgba(36, 37, 47, 0.25)', + md: ['0 1px 2px rgba(30, 29, 39, 0.19)', '1px 2px 4px rgba(54, 64, 147, 0.18)'], + lg: ['3px 3px 6px rgba(0, 0, 0, 0.26)', '0 0 5px rgba(15, 3, 86, 0.22)'], + xl: ['1px 1px 3px rgba(0, 0, 0, 0.29)', '2px 4px 7px rgba(73, 64, 125, 0.35)'], } satisfies Theme['textShadow'] export const lineHeight = { diff --git a/packages/preset-mini/src/_theme/misc.ts b/packages/preset-mini/src/_theme/misc.ts index bce9b180b2..d3931dbf5d 100644 --- a/packages/preset-mini/src/_theme/misc.ts +++ b/packages/preset-mini/src/_theme/misc.ts @@ -59,14 +59,14 @@ export const borderRadius = { } satisfies Theme['borderRadius'] export const boxShadow = { - 'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0 0 0 / 0.1)'], - 'none': '0 0 rgba(0 0 0 / 0)', - 'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0 0 0 / 0.05)', - 'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0 0 0 / 0.1)'], - 'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0 0 0 / 0.1)'], - 'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0 0 0 / 0.1)'], - '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0 0 0 / 0.25)', - 'inner': 'inset 0 2px 4px 0 rgba(0 0 0 / 0.05)', + 'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0, 0, 0, 0.1)'], + 'none': '0 0 rgba(0, 0, 0, 0)', + 'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0, 0, 0, 0.05)', + 'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0, 0, 0, 0.1)'], + 'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0, 0, 0, 0.1)'], + 'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0, 0, 0, 0.1)'], + '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0, 0, 0, 0.25)', + 'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)', } satisfies Theme['boxShadow'] export const easing = { diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts index 43fb5fa86e..c043bbba18 100644 --- a/packages/preset-mini/src/_utils/utilities.ts +++ b/packages/preset-mini/src/_utils/utilities.ts @@ -155,15 +155,15 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef * * @example Resolving 'red-100' from theme: * colorResolver('background-color', 'background')('', 'red-100') - * return { '--un-background-opacity': '1', 'background-color': 'rgba(254 226 226 / var(--un-background-opacity))' } + * return { '--un-background-opacity': '1', 'background-color': 'rgba(254, 226, 226, var(--un-background-opacity))' } * * @example Resolving 'red-100/20' from theme: * colorResolver('background-color', 'background')('', 'red-100/20') - * return { 'background-color': 'rgba(204 251 241 / 0.22)' } + * return { 'background-color': 'rgba(204, 251, 241, 0.22)' } * * @example Resolving 'hex-124': * colorResolver('color', 'text')('', 'hex-124') - * return { '--un-text-opacity': '1', 'color': 'rgba(17 34 68 / var(--un-text-opacity))' } + * return { '--un-text-opacity': '1', 'color': 'rgba(17, 34, 68, var(--un-text-opacity))' } * * @param property - Property for the css value to be created. * @param varName - Base name for the opacity variable. diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index cb2503b661..5316c1f471 100644 --- a/packages/preset-wind/src/rules/background.ts +++ b/packages/preset-wind/src/rules/background.ts @@ -7,7 +7,7 @@ function bgGradientToValue(cssColor: CSSColorValue | undefined) { if (cssColor) return colorToString(cssColor, 0) - return 'rgba(255 255 255 / 0)' + return 'rgba(255, 255, 255, 0)' } function bgGradientColorValue(mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) { @@ -92,7 +92,7 @@ export const backgroundStyles: Rule[] = [ [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()], // images [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({ - 'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))))`, + 'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`, }), { autocomplete: ['bg-gradient-repeating', 'bg-gradient-(linear|radial|conic)', 'bg-gradient-repeating-(linear|radial|conic)'] }], // ignore any center position [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => { diff --git a/packages/rule-utils/src/colors.ts b/packages/rule-utils/src/colors.ts index 91538f524e..9f23339caa 100644 --- a/packages/rule-utils/src/colors.ts +++ b/packages/rule-utils/src/colors.ts @@ -56,6 +56,9 @@ export function colorToString(color: CSSColorValue | string, alphaOverride?: str type = type.toLowerCase() if (['hsla', 'rgba'].includes(type)) + return `${type}(${components.join(', ')}${alpha == null ? '' : `, ${alpha}`})` + + if (['rgb', 'hsl'].includes(type)) return `${type}(${components.join(' ')}${alpha == null ? '' : ` / ${alpha}`})` alpha = alpha == null ? '' : ` / ${alpha}` diff --git a/packages/shared-docs/src/utils.ts b/packages/shared-docs/src/utils.ts index abc5768a9b..c15ee63a94 100644 --- a/packages/shared-docs/src/utils.ts +++ b/packages/shared-docs/src/utils.ts @@ -9,7 +9,7 @@ export function extractColors(css: string) { if (Number.isNaN(r)) return '' if (!Number.isNaN(a)) - return `rgba(${r} ${g} ${b} / ${a})` + return `rgba(${r}, ${g}, ${b}, ${a})` return `rgb(${r}, ${g}, ${b})` }) .filter(Boolean) diff --git a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte index c1974e2939..35a5de1465 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -112,9 +112,8 @@ } :global(._shadow_32yp54) { --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)); + 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), var(--un-ring-shadow), var(--un-shadow); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte index 3aa5eec1be..c7c251df89 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -110,9 +110,8 @@ :global(.usp-ff1ijb) { margin-bottom: 0.25rem; --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)); + 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), var(--un-ring-shadow), var(--un-shadow); } diff --git a/packages/svelte-scoped/test/cases/prose/OutputDev.svelte b/packages/svelte-scoped/test/cases/prose/OutputDev.svelte index 34072b504e..6973ded07f 100644 --- a/packages/svelte-scoped/test/cases/prose/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/prose/OutputDev.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; diff --git a/packages/svelte-scoped/test/cases/prose/OutputProd.svelte b/packages/svelte-scoped/test/cases/prose/OutputProd.svelte index 34072b504e..6973ded07f 100644 --- a/packages/svelte-scoped/test/cases/prose/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/prose/OutputProd.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0 0 0 / 0); - --un-ring-shadow: 0 0 rgba(0 0 0 / 0); + --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0 0 0 / 0); + --un-shadow: 0 0 rgba(0, 0, 0, 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147 197 253 / 0.5); + --un-ring-color: rgba(147, 197, 253, 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; diff --git a/packages/transformer-compile-class/README.md b/packages/transformer-compile-class/README.md index d52512baaa..7c9b440366 100644 --- a/packages/transformer-compile-class/README.md +++ b/packages/transformer-compile-class/README.md @@ -52,7 +52,7 @@ Will be compiled to: } .uno-0qw2gr:hover { --un-text-opacity: 1; - color: rgba(248 113 113 / var(--un-text-opacity)); + color: rgba(248, 113, 113, var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { diff --git a/packages/vscode/src/utils.ts b/packages/vscode/src/utils.ts index 174744636b..f03cc133d5 100644 --- a/packages/vscode/src/utils.ts +++ b/packages/vscode/src/utils.ts @@ -93,10 +93,10 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * ```css *.dark [border="dark\:gray-700"] { * --un-border-opacity: 1; - * border-color: rgba(55 65 81 / var(--un-border-opacity)); + * border-color: rgba(55, 65, 81, var(--un-border-opacity)); *} * ``` - * return `rgba(55 65 81 / 1)` + * return `rgba(55, 65, 81, 1)` * * @example Input with no-value CSS var and its fallback value * ```css @@ -104,12 +104,12 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * background-color: hsla(217, 78%, 51%, var(--no-value, 0.5)); *} * ``` - * return `hsla(217 78% 51% / 0.5)` + * return `hsla(217, 78%, 51%, 0.5)` * * @example Input with no-value CSS var * ```css *.bg-brand-primary { - * background-color: hsla(217 78% 51% / var(--no-value)); + * background-color: hsla(217, 78%, 51%, var(--no-value)); *} * ``` * return `hsla(217, 78%, 51%)` @@ -118,7 +118,7 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * @returns The **first** CSS color string (hex, rgb[a], hsl[a]) or `undefined` */ export function getColorString(str: string) { - let colorString = str.match(cssColorRegex)?.[0] // e.g rgba(248 113 113 / var(--maybe-css-var)) + let colorString = str.match(cssColorRegex)?.[0] // e.g rgba(248, 113, 113, var(--maybe-css-var)) if (!colorString) return @@ -132,13 +132,13 @@ export function getColorString(str: string) { const fallback = match.groups?.fallback if (cssVarName && cssVars.get(cssVarName)) - // rgba(248 113 113 / var(--un-text-opacity)) => rgba(248 113 113 / 1) + // rgba(248, 113, 113, var(--un-text-opacity)) => rgba(248, 113, 113, 1) colorString = colorString.replaceAll(matchedString, cssVars.get(cssVarName) ?? matchedString) else if (fallback) - // rgba(248, 113, 113, var(--no-value, 0.5)) => rgba(248 113 113 / 0.5) + // rgba(248, 113, 113, var(--no-value, 0.5)) => rgba(248, 113, 113, 0.5) colorString = colorString.replaceAll(matchedString, fallback) - // rgba(248 113 113 / var(--no-value)) => rgba(248, 113, 113) + // rgba(248, 113, 113, var(--no-value)) => rgba(248, 113, 113) colorString = colorString.replaceAll(/,?\s+var\(--.*?\)/gm, '') } diff --git a/playground/src/main.css b/playground/src/main.css index f30054c82e..386d571cba 100644 --- a/playground/src/main.css +++ b/playground/src/main.css @@ -27,7 +27,7 @@ .splitpanes__splitter:before { content: ''; transition: opacity 0.4s; - background-color: rgba(125 125 125 / 0.1); + background-color: rgba(125, 125, 125, 0.1); @apply absolute z-1 top-0 left-0 op-0; } diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap index d1a7e8aa69..35e71094f6 100644 --- a/test/__snapshots__/cli.test.ts.snap +++ b/test/__snapshots__/cli.test.ts.snap @@ -17,7 +17,7 @@ exports[`cli > supports directives transformer 2`] = `".btn-center{@apply text-c exports[`cli > supports unocss.config.js 1`] = ` "/* layer: shortcuts */ -.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" +.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0, 0, 0, 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" `; exports[`cli > supports updating source files with transformed utilities ('directives transformer') 1`] = `""`; diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap index bb8d76bf52..ff4c3d8abb 100644 --- a/test/__snapshots__/postcss.test.ts.snap +++ b/test/__snapshots__/postcss.test.ts.snap @@ -15,7 +15,7 @@ exports[`postcss > @screen 1`] = ` exports[`postcss > @unocss 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} /* layer: shortcuts */ .container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;} @media (min-width: 640px){ @@ -223,21 +223,21 @@ exports[`postcss > @unocss 1`] = ` .bg-gradient-stops-\\\\[blue\\\\,pink\\\\], .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600\\\\/60{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / 0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500\\\\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-via-current, -.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} +.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600\\\\/40{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / 0.4) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} -.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} +.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500\\\\/30{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / 0.3) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-to-current, @@ -254,9 +254,9 @@ exports[`postcss > @unocss 1`] = ` .from-10\\\\%{--un-gradient-from-position:10%;} .to-90\\\\%{--un-gradient-to-position:90%;} .via-20\\\\%{--un-gradient-via-position:20%;} -.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} -.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} -.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} +.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} .bg-gradient-to-t{--un-gradient-shape:to top;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-to-tl{--un-gradient-shape:to top left;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-shape-\\\\[70deg\\\\], @@ -343,11 +343,11 @@ exports[`postcss > @unocss 1`] = ` .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\\\\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\[0_4px_3px_\\\\#000\\\\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0 / 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0, 0, 0, 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgb(252 165 165 / var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} @@ -422,7 +422,7 @@ exports[`postcss > @unocss 1`] = ` exports[`postcss > @unocss all layers 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" `; exports[`postcss > @unocss layers 1`] = ` @@ -430,7 +430,7 @@ exports[`postcss > @unocss layers 1`] = ` .test{padding:1.25rem;} /* layer: default */ .relative{position:relative;} -.p4{padding:1rem;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" +.p4{padding:1rem;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" `; exports[`postcss > theme() 1`] = `"div{color:#dc2626;background-color:rgb(220 38 38 / 50%)}"`; diff --git a/test/__snapshots__/preflights.test.ts.snap b/test/__snapshots__/preflights.test.ts.snap index 8b336d4363..4f38a4fb71 100644 --- a/test/__snapshots__/preflights.test.ts.snap +++ b/test/__snapshots__/preflights.test.ts.snap @@ -9,20 +9,20 @@ exports[`preflights > basic 1`] = ` exports[`preflights > preflight root can be customized with array 1`] = ` "/* layer: preflights */ -.scope-1{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}[data-scope-2]{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}" +.scope-1{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}[data-scope-2]{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}" `; exports[`preflights > preflight root can be customized with string 1`] = ` "/* layer: preflights */ -:root{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}" +:root{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}" `; exports[`preflights > preflight with empty variablePrefix 1`] = ` "/* layer: preflights */ -*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0 0 0 / 0);--ring-shadow:0 0 rgba(0 0 0 / 0);--shadow-inset: ;--shadow:0 0 rgba(0 0 0 / 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147 197 253 / 0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0 0 0 / 0);--ring-shadow:0 0 rgba(0 0 0 / 0);--shadow-inset: ;--shadow:0 0 rgba(0 0 0 / 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147 197 253 / 0.5);}" +*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--ring-shadow:0 0 rgba(0, 0, 0, 0);--shadow-inset: ;--shadow:0 0 rgba(0, 0, 0, 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--ring-shadow:0 0 rgba(0, 0, 0, 0);--shadow-inset: ;--shadow:0 0 rgba(0, 0, 0, 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147, 197, 253, 0.5);}" `; exports[`preflights > preflight with variablePrefix 1`] = ` "/* layer: preflights */ -*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--test-ring-shadow:0 0 rgba(0 0 0 / 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0 0 0 / 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--test-ring-shadow:0 0 rgba(0 0 0 / 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0 0 0 / 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147 197 253 / 0.5);}" +*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-shadow:0 0 rgba(0, 0, 0, 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-shadow:0 0 rgba(0, 0, 0, 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147, 197, 253, 0.5);}" `; diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css index 5db90ce0f6..f6c3e959ee 100644 --- a/test/assets/output/preset-mini-targets.css +++ b/test/assets/output/preset-mini-targets.css @@ -1,5 +1,5 @@ /* 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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);} +*,::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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);} /* layer: 1 */ .uno-layer-1\:translate-0{--un-translate-x:0;--un-translate-y:0;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 */ @@ -128,7 +128,7 @@ unocss .scope-\[unocss\]\:block{display:block;} .bg-\[\#153\]\/10, .bg-\[\#1533\]\/10{background-color:rgb(17 85 51 / 0.1);} .bg-\[\#1533\]{--un-bg-opacity:0.2;background-color:rgb(17 85 51 / var(--un-bg-opacity));} -.bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1 2 3 / var(--un-bg-opacity));} +.bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1, 2, 3, var(--un-bg-opacity));} .bg-\#452233\/40, .bg-hex-452233\/40{background-color:rgb(69 34 51 / 0.4);} .bg-red-100{--un-bg-opacity:1;background-color:rgb(254 226 226 / var(--un-bg-opacity));} @@ -419,10 +419,10 @@ unocss .scope-\[unocss\]\:block{display:block;} .text-stroke-blue-500{--un-text-stroke-opacity:1;-webkit-text-stroke-color:rgb(59 130 246 / var(--un-text-stroke-opacity));} .text-stroke-op-\$opacity-variable{--un-text-stroke-opacity:var(--opacity-variable);} .text-stroke-op-60{--un-text-stroke-opacity:0.6;} -.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgba(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);} +.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0, 0, 0, 0.2)),0 0 1px var(--un-text-shadow-color, rgba(1, 0, 5, 0.1));text-shadow:var(--un-text-shadow);} .text-shadow-\$var{text-shadow:var(--var);} -.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0 0 0 / 0.26)),0 0 5px var(--un-text-shadow-color, rgba(15 3 86 / 0.22));text-shadow:var(--un-text-shadow);} -.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0 0 0 / 0));text-shadow:var(--un-text-shadow);} +.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0, 0, 0, 0.26)),0 0 5px var(--un-text-shadow-color, rgba(15, 3, 86, 0.22));text-shadow:var(--un-text-shadow);} +.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0, 0, 0, 0));text-shadow:var(--un-text-shadow);} .text-shadow-color-red-300{--un-text-shadow-opacity:1;--un-text-shadow-color:rgb(252 165 165 / var(--un-text-shadow-opacity));} .text-shadow-color-op-\$opacity-variable{--un-text-shadow-opacity:var(--opacity-variable);} .text-shadow-color-op-30{--un-text-shadow-opacity:0.3;} @@ -519,16 +519,16 @@ unocss .scope-\[unocss\]\:block{display:block;} .oblique{font-style:oblique;} .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .backdrop\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(74 222 128 / var(--un-shadow-opacity));} -.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), var(--un-ring-shadow), var(--un-shadow);} +.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), var(--un-ring-shadow), var(--un-shadow);} .shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgb(255 255 255 / var(--un-shadow-opacity));} -.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237 0 0 / 1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237, 0, 0, 1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-\$variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-current{--un-shadow-color:currentColor;} .shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgb(34 197 94 / var(--un-shadow-opacity));} .shadow-green-900\/50{--un-shadow-color:rgb(20 83 45 / 0.5);} -.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), 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), var(--un-ring-shadow), var(--un-shadow);} .shadow-transparent{--un-shadow-color:transparent;} -.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), var(--un-ring-shadow), 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), var(--un-ring-shadow), var(--un-shadow);} .backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(220 252 231 / var(--un-shadow-opacity));} .shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);} .shadow-op-50{--un-shadow-opacity:0.5;} @@ -1047,4 +1047,4 @@ unocss .scope-\[unocss\]\:block{display:block;} /* layer: uno css */ .uno-layer-\[uno_css\]\:block{display:block;} /* layer: uno_css */ -.uno-layer-uno_css\:block{display:block;} \ No newline at end of file +.uno-layer-uno_css\:block{display:block;} diff --git a/test/assets/output/preset-uno-targets-2.css b/test/assets/output/preset-uno-targets-2.css index 37adcb7ff7..bea93decd8 100644 --- a/test/assets/output/preset-uno-targets-2.css +++ b/test/assets/output/preset-uno-targets-2.css @@ -5,5 +5,5 @@ section{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));} .body_main{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));} } @media (min-width: 768px){ -aside{--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), var(--un-ring-shadow), var(--un-shadow);} +aside{--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), var(--un-ring-shadow), var(--un-shadow);} } \ No newline at end of file diff --git a/test/assets/output/preset-uno-targets.css b/test/assets/output/preset-uno-targets.css index 48e5d9ae50..e19c675b12 100644 --- a/test/assets/output/preset-uno-targets.css +++ b/test/assets/output/preset-uno-targets.css @@ -3,8 +3,8 @@ .border-custom-b\/0{border-color:rgba(var(--custom), 0);} .border-custom-b\/10{border-color:rgba(var(--custom), 0.1);} .bg-custom-b{background-color:rgba(var(--custom), 1);} -.bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c) / var(--un-bg-opacity));} -.bg-custom-c\/10{background-color:rgba(var(--custom-c) / 0.1);} +.bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c), var(--un-bg-opacity));} +.bg-custom-c\/10{background-color:rgba(var(--custom-c), 0.1);} .bg-custom-d{background-color:hsl(var(--custom-d), 1);} .bg-custom-d\/20{background-color:hsl(var(--custom-d), 0.2);} .bg-custom-e{--un-bg-opacity:1;background-color:hsl(var(--custom-e) / var(--un-bg-opacity));} diff --git a/test/assets/output/preset-web-fonts.css b/test/assets/output/preset-web-fonts.css index 3131fc9cac..4319bb0a5e 100644 --- a/test/assets/output/preset-web-fonts.css +++ b/test/assets/output/preset-web-fonts.css @@ -1,9 +1,9 @@ /* layer: imports */ @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* 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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);} +*,::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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);} /* layer: default */ .font-lato{font-family:"Lato",sans-serif;} .font-lobster{font-family:"Lobster";} .font-mono{font-family:"Fira Code","Fira Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;} -.font-sans{font-family:"Roboto",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";} \ No newline at end of file +.font-sans{font-family:"Roboto",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";} diff --git a/test/assets/output/preset-wind-targets.css b/test/assets/output/preset-wind-targets.css index 266d3bdf2e..e966543e45 100644 --- a/test/assets/output/preset-wind-targets.css +++ b/test/assets/output/preset-wind-targets.css @@ -1,5 +1,5 @@ /* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} /* layer: _pre */ @media (prefers-contrast: less){ .uno-layer-_pre\:contrast-less\:bg-gray-3{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity));} @@ -187,21 +187,21 @@ .bg-gradient-stops-\[blue\,pink\], .stops-\[blue\,pink\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600\/60{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / 0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-via-current, -.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} +.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600\/40{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / 0.4) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} -.via-\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} +.via-\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500\/30{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / 0.3) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-to-current, @@ -218,9 +218,9 @@ .from-10\%{--un-gradient-from-position:10%;} .to-90\%{--un-gradient-to-position:90%;} .via-20\%{--un-gradient-via-position:20%;} -.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} -.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} -.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255 255 255 / 0))));} +.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} .bg-gradient-to-t{--un-gradient-shape:to top;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-to-tl{--un-gradient-shape:to top left;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-shape-\[70deg\], @@ -307,11 +307,11 @@ .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\[0_4px_3px_\#000\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0 0 0 / 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0 0 0 / 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0, 0, 0, 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgb(252 165 165 / var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} @@ -381,4 +381,4 @@ } @supports (display: grid){ .supports-grid\:block{display:block;} -} \ No newline at end of file +} diff --git a/test/assets/output/runtime-preset-tagify.css b/test/assets/output/runtime-preset-tagify.css index b9b26d7e10..6be4b120c3 100644 --- a/test/assets/output/runtime-preset-tagify.css +++ b/test/assets/output/runtime-preset-tagify.css @@ -6,4 +6,4 @@ scale-2{--un-scale-x:0.02;--un-scale-y:0.02;transform:translateX(var(--un-transl hover\:color-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} text-green5\:10{color:rgb(34 197 94 / 0.1);} text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} -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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file +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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file diff --git a/test/color.test.ts b/test/color.test.ts index 93d2f7abcb..6ccc96fbb3 100644 --- a/test/color.test.ts +++ b/test/color.test.ts @@ -21,13 +21,13 @@ describe('color utils', () => { it('parses css colors', () => { expect(parseCssColor('rgb(0,1,2)')).eql({ type: 'rgb', components: ['0', '1', '2'], alpha: undefined }) - expect(parseCssColor('rgba(0 1 2 / 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) - expect(parseCssColor('rgba(0 (1) 2 / 3)')).eql({ type: 'rgba', components: ['0', '(1)', '2'], alpha: '3' }) + expect(parseCssColor('rgba(0,1,2,3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) + expect(parseCssColor('rgba(0,(1),2,3)')).eql({ type: 'rgba', components: ['0', '(1)', '2'], alpha: '3' }) expect(parseCssColor('rgb(0)')).eql({ type: 'rgb', components: ['0'], alpha: undefined }) expect(parseCssColor('rgb(0,1)')).eql(undefined) - expect(parseCssColor('rgba(0 1 2)')).eql(undefined) - expect(parseCssColor('rgba(0,1 2 3 / 4)')).eql(undefined) - expect(parseCssColor('rgba(0 )1( 2 / 3)')).eql(undefined) + expect(parseCssColor('rgba(0,1,2)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: undefined }) + expect(parseCssColor('rgba(0,1,2,3,4)')).eql(undefined) + expect(parseCssColor('rgba(0,)1(,2,3)')).eql(undefined) expect(parseCssColor('rgba(0 1 2 / 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) expect(parseCssColor('rgba(0 1 2/ 3)')).eql({ type: 'rgba', components: ['0', '1', '2'], alpha: '3' }) @@ -78,15 +78,15 @@ describe('color utils', () => { const fn = (x: string) => colorToString(parseCssColor(x)!) expect(fn('rgb(0,1,2)')).eql('rgb(0 1 2)') - expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0 1 2 / 3)') - expect(fn('rgba(0 (1) 2 / 3)')).eql('rgba(0 (1) 2 / 3)') + expect(fn('rgba(0,1,2,3)')).eql('rgba(0, 1, 2, 3)') + expect(fn('rgba(0,(1),2,3)')).eql('rgba(0, (1), 2, 3)') - expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0 1 2 / 3)') - expect(fn('rgba(0 1 2/ 3)')).eql('rgba(0 1 2 / 3)') - expect(fn('rgba(0 1 2 /3)')).eql('rgba(0 1 2 / 3)') - expect(fn('rgba(0 1 2/3)')).eql('rgba(0 1 2 / 3)') + expect(fn('rgba(0 1 2 / 3)')).eql('rgba(0, 1, 2, 3)') + expect(fn('rgba(0 1 2/ 3)')).eql('rgba(0, 1, 2, 3)') + expect(fn('rgba(0 1 2 /3)')).eql('rgba(0, 1, 2, 3)') + expect(fn('rgba(0 1 2/3)')).eql('rgba(0, 1, 2, 3)') - expect(fn('color(rgba 0 1 2 / 3)')).eql('rgba(0 1 2 / 3)') + expect(fn('color(rgba 0 1 2 / 3)')).eql('rgba(0, 1, 2, 3)') expect(fn('color(fancy 0 1 2 3 4 5 / 6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') expect(fn('color(fancy 0 1 2 3 4 5 /6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') expect(fn('color(fancy 0 1 2 3 4 5/ 6)')).eql('color(fancy 0 1 2 3 4 5 / 6)') @@ -109,7 +109,7 @@ describe('color utils', () => { expect(colorableShadows('0 0 #0000', '--v')).eql(['0 0 var(--v, rgb(0 0 0 / 0))']) // with spaces - expect(colorableShadows('0 1px 3px 0 rgba(0, 0, 0, 0.2)', '--v')).eql(['0 1px 3px 0 var(--v, rgba(0 0 0 / 0.2))']) + expect(colorableShadows('0 1px 3px 0 rgba(0, 0, 0, 0.2)', '--v')).eql(['0 1px 3px 0 var(--v, rgba(0, 0, 0, 0.2))']) // full box-shadow expect(colorableShadows('var(--un-shadow-inset) 0 1px 3px 0 #0000', '--v')).eql(['var(--un-shadow-inset) 0 1px 3px 0 var(--v, rgb(0 0 0 / 0))']) diff --git a/test/layer.test.ts b/test/layer.test.ts index f089f880b5..35b6bedf3d 100644 --- a/test/layer.test.ts +++ b/test/layer.test.ts @@ -40,7 +40,7 @@ describe('layers', () => { "/* layer: imports */ @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Mono:wght@400;700&display=swap'); /* 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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);}::backdrop{--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 rgba(0 0 0 / 0);--un-ring-shadow:0 0 rgba(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147 197 253 / 0.5);} + *,::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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);} /* layer: default */ .font-mono{font-family:\\"Fira Code\\",\\"Fira Mono\\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}" `) diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts index 3526b6570a..e920c36942 100644 --- a/test/transformer-directives.test.ts +++ b/test/transformer-directives.test.ts @@ -469,7 +469,7 @@ div { "div { color: rgb(239 68 68 / 50%); color: rgb(255 0 0 / 0.5); - color: rgba(255 0 0 / 50%); + color: rgba(255, 0, 0, 50%); color: hsl(210 50% 50% / 0.6); color: hsl(210 50% 50% / 60%); } diff --git a/test/utils.test.ts b/test/utils.test.ts index 64e193c56d..1fc0dc7bd7 100644 --- a/test/utils.test.ts +++ b/test/utils.test.ts @@ -69,35 +69,35 @@ it('getColorString', () => { /* layer: default */ .text-amber { --un-text-opacity: 1; - color: rgba(251 191 36 / var(--un-text-opacity)); + color: rgba(251, 191, 36, var(--un-text-opacity)); }` const textAmberImportant = ` /* layer: default */ .\!text-amber { --un-text-opacity: 1 !important; - color: rgba(251 191 36 / var(--un-text-opacity)) !important; + color: rgba(251, 191, 36, var(--un-text-opacity)) !important; }` const bgAmber = ` /* layer: default */ .bg-amber { --un-bg-opacity: 1; - background-color: rgba(251 191 36 / var(--un-bg-opacity)); + background-color: rgba(251, 191, 36, var(--un-bg-opacity)); }` const bgAmberImportant = ` /* layer: default */ .\!bg-amber { --un-bg-opacity: 1 !important; - background-color: rgba(251 191 36 / var(--un-bg-opacity)) !important; + background-color: rgba(251, 191, 36, var(--un-bg-opacity)) !important; } ` - expect(getColorString(textAmber)).eql('rgba(251 191 36 / 1)') - expect(getColorString(textAmberImportant)).eql('rgba(251 191 36 / 1)') - expect(getColorString(bgAmber)).eql('rgba(251 191 36 / 1)') - expect(getColorString(bgAmberImportant)).eql('rgba(251 191 36 / 1)') + expect(getColorString(textAmber)).eql('rgba(251, 191, 36, 1)') + expect(getColorString(textAmberImportant)).eql('rgba(251, 191, 36, 1)') + expect(getColorString(bgAmber)).eql('rgba(251, 191, 36, 1)') + expect(getColorString(bgAmberImportant)).eql('rgba(251, 191, 36, 1)') }) it('addRemToPxComment', () => { From 96395a235c8f218d59e0e83dbb618c1f88ebf217 Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:41:42 +0800 Subject: [PATCH 4/5] chore: update --- docs/.vitepress/theme/vars.css | 12 ++++---- docs/config/shortcuts.md | 8 ++--- docs/config/theme.md | 2 +- docs/presets/mini.md | 6 ++-- docs/presets/wind.md | 2 +- docs/transformers/compile-class.md | 2 +- examples/sveltekit-scoped/README.md | 4 +-- examples/sveltekit/src/routes/Counter.svelte | 6 ++-- examples/sveltekit/src/routes/Go.svelte | 6 ++-- interactive/markdown.css | 6 ++-- interactive/spa-loading-template.html | 8 ++--- packages/inspector/client/main.css | 2 +- packages/preset-mini/src/_rules/ring.ts | 4 +-- packages/preset-mini/src/_rules/shadow.ts | 6 ++-- packages/preset-mini/src/_theme/filters.ts | 14 ++++----- packages/preset-mini/src/_theme/font.ts | 12 ++++---- packages/preset-mini/src/_theme/misc.ts | 16 +++++----- packages/preset-mini/src/_utils/utilities.ts | 8 ++--- packages/preset-wind/src/rules/background.ts | 4 +-- packages/rule-utils/src/colors.ts | 3 -- packages/shared-docs/src/utils.ts | 4 +-- .../transformApply/getUtils.test.ts | 16 ++++++---- .../transformClasses/index.test.ts | 24 +++++++-------- .../test-outputs/EverythingDev.svelte | 8 ++--- .../test-outputs/EverythingProd.svelte | 10 +++---- .../test/cases/basic/OutputDev.svelte | 2 +- .../test/cases/basic/OutputProd.svelte | 2 +- .../test/cases/needs-parent/OutputDev.svelte | 8 ++--- .../test/cases/needs-parent/OutputProd.svelte | 8 ++--- .../test/cases/preflights/OutputDev.svelte | 8 ++--- .../test/cases/preflights/OutputProd.svelte | 8 ++--- packages/transformer-compile-class/README.md | 2 +- packages/vscode/src/utils.ts | 20 ++++++------- playground/src/main.css | 2 +- test/__snapshots__/cli.test.ts.snap | 2 +- test/__snapshots__/postcss.test.ts.snap | 30 +++++++++---------- test/__snapshots__/preflights.test.ts.snap | 8 ++--- test/assets/output/preset-mini-targets.css | 16 +++++----- test/assets/output/preset-uno-targets-2.css | 2 +- test/assets/output/preset-web-fonts.css | 4 +-- test/assets/output/preset-wind-targets.css | 28 ++++++++--------- test/assets/output/runtime-preset-tagify.css | 2 +- test/layer.test.ts | 2 +- 43 files changed, 173 insertions(+), 174 deletions(-) diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 0a6483fb02..d850392c98 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -9,16 +9,16 @@ :root { --vp-c-gutter: var(--vp-c-divider); - --vp-code-block-bg: rgba(125, 125, 125, 0.04); + --vp-code-block-bg: rgb(125 125 125 / 0.04); --vp-code-tab-divider: var(--vp-c-divider); - --vp-code-copy-code-bg: rgba(125, 125, 125, 0.1); - --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2); - --vp-c-disabled-bg: rgba(125, 125, 125, 0.2); + --vp-code-copy-code-bg: rgb(125 125 125 / 0.1); + --vp-code-copy-code-hover-bg: rgb(125 125 125 / 0.2); + --vp-c-disabled-bg: rgb(125 125 125 / 0.2); --vp-code-tab-text-color: var(--vp-c-text-2); --vp-code-tab-active-text-color: var(--vp-c-text-1); --vp-code-tab-hover-text-color: var(--vp-c-text-1); --vp-code-copy-code-active-text: var(--vp-c-text-2); - --vp-c-text-dark-3: rgba(56, 56, 56, 0.8); + --vp-c-text-dark-3: rgb(56 56 56 / 0.8); --vp-c-brand-lightest: var(--vp-c-brand-1); --vp-c-highlight-bg: var(--vp-c-brand-light); @@ -26,7 +26,7 @@ } .dark { - --vp-code-block-bg: rgba(0, 0, 0, 0.2); + --vp-code-block-bg: rgb(0 0 0 / 0.2); --vp-c-text-code: #c0cec0; } diff --git a/docs/config/shortcuts.md b/docs/config/shortcuts.md index 30a156aa32..9fe8f0c6db 100644 --- a/docs/config/shortcuts.md +++ b/docs/config/shortcuts.md @@ -45,10 +45,10 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS: padding-left: 1rem; padding-right: 1rem; --un-bg-opacity: 1; - background-color: rgba(74, 222, 128, var(--un-bg-opacity)); + background-color: rgb(74 222 128 / var(--un-bg-opacity)); border-radius: 0.5rem; --un-text-opacity: 1; - color: rgba(220, 252, 231, var(--un-text-opacity)); + color: rgb(220 252 231 / var(--un-text-opacity)); } .btn-red { padding-top: 0.5rem; @@ -56,9 +56,9 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS: padding-left: 1rem; padding-right: 1rem; --un-bg-opacity: 1; - background-color: rgba(248, 113, 113, var(--un-bg-opacity)); + background-color: rgb(248 113 113 / var(--un-bg-opacity)); border-radius: 0.5rem; --un-text-opacity: 1; - color: rgba(254, 226, 226, var(--un-text-opacity)); + color: rgb(254 226 226 / var(--un-text-opacity)); } ``` diff --git a/docs/config/theme.md b/docs/config/theme.md index a86f3ff0dd..e0c3caa454 100644 --- a/docs/config/theme.md +++ b/docs/config/theme.md @@ -17,7 +17,7 @@ theme: { colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { - 'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" + 'primary': 'hsl(var(--hue 217) 78% / 51%)', //class="bg-brand-primary" } }, } diff --git a/docs/presets/mini.md b/docs/presets/mini.md index 92582bbdce..851dcda96a 100644 --- a/docs/presets/mini.md +++ b/docs/presets/mini.md @@ -63,7 +63,7 @@ will generate: ```css .dark .dark\:bg-red\:10 { - background-color: rgba(248, 113, 113, 0.1); + background-color: rgb(248 113 113 / 0.1); } ``` @@ -76,7 +76,7 @@ To opt-in media query based dark mode, you can use `@dark:` variant: ```css @media (prefers-color-scheme: dark) { .\@dark\:bg-red\:10 { - background-color: rgba(248, 113, 113, 0.1); + background-color: rgb(248 113 113 / 0.1); } } ``` @@ -125,7 +125,7 @@ presetMini({ colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { - 'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" + 'primary': 'hsl(var(--hue 217) 78% / 51%)', //class="bg-brand-primary" } }, } diff --git a/docs/presets/wind.md b/docs/presets/wind.md index 27e575bac3..a566aff1c0 100644 --- a/docs/presets/wind.md +++ b/docs/presets/wind.md @@ -91,7 +91,7 @@ The variant `@hover-text-red` will output: @media (hover: hover) and (pointer: fine) { .\@hover-text-red:hover { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } } ``` diff --git a/docs/transformers/compile-class.md b/docs/transformers/compile-class.md index fedd4b4f79..1be7c2580d 100644 --- a/docs/transformers/compile-class.md +++ b/docs/transformers/compile-class.md @@ -68,7 +68,7 @@ Will be compiled to: } .uno-0qw2gr:hover { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { diff --git a/examples/sveltekit-scoped/README.md b/examples/sveltekit-scoped/README.md index 958d7c71c6..ca6bf796bb 100644 --- a/examples/sveltekit-scoped/README.md +++ b/examples/sveltekit-scoped/README.md @@ -57,7 +57,7 @@ will be transformed into this: diff --git a/examples/sveltekit/src/routes/Go.svelte b/examples/sveltekit/src/routes/Go.svelte index 9238e69346..7ff62f81a1 100644 --- a/examples/sveltekit/src/routes/Go.svelte +++ b/examples/sveltekit/src/routes/Go.svelte @@ -30,9 +30,9 @@ font-size: inherit; padding: 1em 2em; color: #ff3e00; - background-color: rgba(255, 62, 0, 0.1); + background-color: rgb(255 62 0 / 0.1); border-radius: 2em; - border: 2px solid rgba(255, 62, 0, 0); + border: 2px solid rgb(255 62 0 / 0); outline: none; width: 200px; font-variant-numeric: tabular-nums; @@ -43,6 +43,6 @@ border: 2px solid #ff3e00; } button:active { - background-color: rgba(255, 62, 0, 0.2); + background-color: rgb(255 62 0 / 0.2); } diff --git a/interactive/markdown.css b/interactive/markdown.css index 853a7ba85f..674e8ecfbc 100644 --- a/interactive/markdown.css +++ b/interactive/markdown.css @@ -58,7 +58,7 @@ } mark { - background-color: rgba(187, 128, 9, 0.15); + background-color: rgb(187 128 9 / 0.15); color: #c9d1d9; } @@ -218,7 +218,7 @@ background-color: #161b22; --at-apply: border border-base; border-radius: 6px; - box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); + box-shadow: inset 0 -1px 0 rgb(110 118 129 / 0.4); } h1, @@ -629,7 +629,7 @@ } table tr:nth-child(2n) { - background-color: rgba(156, 163, 175, 0.02); + background-color: rgb(156 163 175 / 0.02); } img { diff --git a/interactive/spa-loading-template.html b/interactive/spa-loading-template.html index a78ed85525..7f3f3f0ff9 100644 --- a/interactive/spa-loading-template.html +++ b/interactive/spa-loading-template.html @@ -27,7 +27,7 @@ @media (prefers-color-scheme: dark) { html { - background-color: rgba(18, 18, 18, 1); + background-color: rgb(18 18 18 / 1); color-scheme: dark; } } @@ -57,7 +57,7 @@ } 100% { - fill: rgb(133, 133, 133); + fill: rgb(133 133 133); } } @@ -67,7 +67,7 @@ } 100% { - fill: rgb(204, 204, 204); + fill: rgb(204 204 204); } } @@ -77,7 +77,7 @@ } 100% { - fill: rgb(77, 77, 77); + fill: rgb(77 77 77); } } diff --git a/packages/inspector/client/main.css b/packages/inspector/client/main.css index ada61f927e..ff969b761b 100644 --- a/packages/inspector/client/main.css +++ b/packages/inspector/client/main.css @@ -23,7 +23,7 @@ html:not(.dark) { left: 0; top: 0; transition: opacity 0.4s; - background-color: rgba(125, 125, 125, 0.1); + background-color: rgb(125 125 125 / 0.1); opacity: 0; z-index: 1; } diff --git a/packages/preset-mini/src/_rules/ring.ts b/packages/preset-mini/src/_rules/ring.ts index c5b3cd800e..b49b018efd 100644 --- a/packages/preset-mini/src/_rules/ring.ts +++ b/packages/preset-mini/src/_rules/ring.ts @@ -8,8 +8,8 @@ export const ringBase = { '--un-ring-offset-width': '0px', '--un-ring-offset-color': '#fff', '--un-ring-width': '0px', - '--un-ring-color': 'rgba(147, 197, 253, 0.5)', - '--un-shadow': '0 0 rgba(0, 0, 0, 0)', + '--un-ring-color': 'rgb(147 197 253 / 0.5)', + '--un-shadow': '0 0 rgb(0 0 0 / 0)', } export const rings: Rule[] = [ diff --git a/packages/preset-mini/src/_rules/shadow.ts b/packages/preset-mini/src/_rules/shadow.ts index 925fe5f737..d8f8c18c02 100644 --- a/packages/preset-mini/src/_rules/shadow.ts +++ b/packages/preset-mini/src/_rules/shadow.ts @@ -4,10 +4,10 @@ import { colorResolver, colorableShadows, h, hasParseableColor } from '../utils' import { varEmpty } from './static' export const boxShadowsBase = { - '--un-ring-offset-shadow': '0 0 rgba(0, 0, 0, 0)', - '--un-ring-shadow': '0 0 rgba(0, 0, 0, 0)', + '--un-ring-offset-shadow': '0 0 rgb(0 0 0 / 0)', + '--un-ring-shadow': '0 0 rgb(0 0 0 / 0)', '--un-shadow-inset': varEmpty, - '--un-shadow': '0 0 rgba(0, 0, 0, 0)', + '--un-shadow': '0 0 rgb(0 0 0 / 0)', } export const boxShadows: Rule[] = [ diff --git a/packages/preset-mini/src/_theme/filters.ts b/packages/preset-mini/src/_theme/filters.ts index 69f228eacc..bdc24a4b80 100644 --- a/packages/preset-mini/src/_theme/filters.ts +++ b/packages/preset-mini/src/_theme/filters.ts @@ -10,11 +10,11 @@ export const blur = { } export const dropShadow = { - 'DEFAULT': ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], - 'sm': '0 1px 1px rgba(0, 0, 0, 0.05)', - 'md': ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'], - 'lg': ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'], - 'xl': ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'], - '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)', - 'none': '0 0 rgba(0, 0, 0, 0)', + 'DEFAULT': ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], + 'sm': '0 1px 1px rgb(0 0 0 / 0.05)', + 'md': ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], + 'lg': ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], + 'xl': ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], + '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', + 'none': '0 0 rgb(0 0 0 / 0)', } diff --git a/packages/preset-mini/src/_theme/font.ts b/packages/preset-mini/src/_theme/font.ts index a44ade2e28..e4e7803877 100644 --- a/packages/preset-mini/src/_theme/font.ts +++ b/packages/preset-mini/src/_theme/font.ts @@ -73,12 +73,12 @@ export const textStrokeWidth: Theme['textStrokeWidth'] = { } satisfies Theme['textStrokeWidth'] export const textShadow = { - DEFAULT: ['0 0 1px rgba(0, 0, 0, 0.2)', '0 0 1px rgba(1, 0, 5, 0.1)'], - none: '0 0 rgba(0, 0, 0, 0)', - sm: '1px 1px 3px rgba(36, 37, 47, 0.25)', - md: ['0 1px 2px rgba(30, 29, 39, 0.19)', '1px 2px 4px rgba(54, 64, 147, 0.18)'], - lg: ['3px 3px 6px rgba(0, 0, 0, 0.26)', '0 0 5px rgba(15, 3, 86, 0.22)'], - xl: ['1px 1px 3px rgba(0, 0, 0, 0.29)', '2px 4px 7px rgba(73, 64, 125, 0.35)'], + DEFAULT: ['0 0 1px rgb(0 0 0 / 0.2)', '0 0 1px rgb(1 0 5 / 0.1)'], + none: '0 0 rgb(0 0 0 / 0)', + sm: '1px 1px 3px rgb(36 37 47 / 0.25)', + md: ['0 1px 2px rgb(30 29 39 / 0.19)', '1px 2px 4px rgb(54 64 147 / 0.18)'], + lg: ['3px 3px 6px rgb(0 0 0 / 0.26)', '0 0 5px rgb(15 3 86 / 0.22)'], + xl: ['1px 1px 3px rgb(0 0 0 / 0.29)', '2px 4px 7px rgb(73 64 125 / 0.35)'], } satisfies Theme['textShadow'] export const lineHeight = { diff --git a/packages/preset-mini/src/_theme/misc.ts b/packages/preset-mini/src/_theme/misc.ts index d3931dbf5d..78597af1ff 100644 --- a/packages/preset-mini/src/_theme/misc.ts +++ b/packages/preset-mini/src/_theme/misc.ts @@ -59,14 +59,14 @@ export const borderRadius = { } satisfies Theme['borderRadius'] export const boxShadow = { - 'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0, 0, 0, 0.1)'], - 'none': '0 0 rgba(0, 0, 0, 0)', - 'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0, 0, 0, 0.05)', - 'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0, 0, 0, 0.1)'], - 'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0, 0, 0, 0.1)'], - 'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0, 0, 0, 0.1)'], - '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0, 0, 0, 0.25)', - 'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)', + 'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgb(0 0 0 / 0.1)'], + 'none': '0 0 rgb(0 0 0 / 0)', + 'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgb(0 0 0 / 0.05)', + 'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgb(0 0 0 / 0.1)'], + 'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgb(0 0 0 / 0.1)'], + 'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgb(0 0 0 / 0.1)'], + '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgb(0 0 0 / 0.25)', + 'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', } satisfies Theme['boxShadow'] export const easing = { diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts index c043bbba18..2895e18da4 100644 --- a/packages/preset-mini/src/_utils/utilities.ts +++ b/packages/preset-mini/src/_utils/utilities.ts @@ -70,7 +70,7 @@ export function splitShorthand(body: string, type: string) { * 'red' // From theme, if 'red' is available * 'red-100' // From theme, plus scale * 'red-100/20' // From theme, plus scale/opacity - * '[rgb(100,2,3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity + * '[rgb(100 2 3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity * * @param body - Color string to be parsed. * @param theme - {@link Theme} object. @@ -155,15 +155,15 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef * * @example Resolving 'red-100' from theme: * colorResolver('background-color', 'background')('', 'red-100') - * return { '--un-background-opacity': '1', 'background-color': 'rgba(254, 226, 226, var(--un-background-opacity))' } + * return { '--un-background-opacity': '1', 'background-color': 'rgb(254 226 226 / var(--un-background-opacity))' } * * @example Resolving 'red-100/20' from theme: * colorResolver('background-color', 'background')('', 'red-100/20') - * return { 'background-color': 'rgba(204, 251, 241, 0.22)' } + * return { 'background-color': 'rgb(204 251 241 / 0.22)' } * * @example Resolving 'hex-124': * colorResolver('color', 'text')('', 'hex-124') - * return { '--un-text-opacity': '1', 'color': 'rgba(17, 34, 68, var(--un-text-opacity))' } + * return { '--un-text-opacity': '1', 'color': 'rgb(17 34 68 / var(--un-text-opacity))' } * * @param property - Property for the css value to be created. * @param varName - Base name for the opacity variable. diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index 5316c1f471..1072f3648a 100644 --- a/packages/preset-wind/src/rules/background.ts +++ b/packages/preset-wind/src/rules/background.ts @@ -7,7 +7,7 @@ function bgGradientToValue(cssColor: CSSColorValue | undefined) { if (cssColor) return colorToString(cssColor, 0) - return 'rgba(255, 255, 255, 0)' + return 'rgb(255 255 255 / 0)' } function bgGradientColorValue(mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) { @@ -92,7 +92,7 @@ export const backgroundStyles: Rule[] = [ [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()], // images [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({ - 'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`, + 'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))))`, }), { autocomplete: ['bg-gradient-repeating', 'bg-gradient-(linear|radial|conic)', 'bg-gradient-repeating-(linear|radial|conic)'] }], // ignore any center position [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => { diff --git a/packages/rule-utils/src/colors.ts b/packages/rule-utils/src/colors.ts index 9f23339caa..5fd5cd1df8 100644 --- a/packages/rule-utils/src/colors.ts +++ b/packages/rule-utils/src/colors.ts @@ -58,9 +58,6 @@ export function colorToString(color: CSSColorValue | string, alphaOverride?: str if (['hsla', 'rgba'].includes(type)) return `${type}(${components.join(', ')}${alpha == null ? '' : `, ${alpha}`})` - if (['rgb', 'hsl'].includes(type)) - return `${type}(${components.join(' ')}${alpha == null ? '' : ` / ${alpha}`})` - alpha = alpha == null ? '' : ` / ${alpha}` if (cssColorFunctions.includes(type)) return `${type}(${components.join(' ')}${alpha})` diff --git a/packages/shared-docs/src/utils.ts b/packages/shared-docs/src/utils.ts index c15ee63a94..8e878584b5 100644 --- a/packages/shared-docs/src/utils.ts +++ b/packages/shared-docs/src/utils.ts @@ -9,8 +9,8 @@ export function extractColors(css: string) { if (Number.isNaN(r)) return '' if (!Number.isNaN(a)) - return `rgba(${r}, ${g}, ${b}, ${a})` - return `rgb(${r}, ${g}, ${b})` + return `rgb(${r} ${g} ${b} / ${a})` + return `rgb(${r} ${g} ${b})` }) .filter(Boolean) } diff --git a/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts b/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts index a1d0cb64c9..a076bc5473 100644 --- a/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts +++ b/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts @@ -64,19 +64,23 @@ describe('getUtils', async () => { expect(result).toMatchInlineSnapshot(` [ [ - 84, - ".\\\\-:hover", - "margin-right:0.25rem;font-weight:500;", + 744, + ".\\\\-", + "font-weight:500;", undefined, { + "autocomplete": [ + "(font|fw)-(100|200|300|400|500|600|700|800|900)", + "(font|fw)-$fontWeight", + ], "layer": undefined, - "sort": 24, + "sort": undefined, }, undefined, - true, + undefined, ], ] `) - expect(warnOnce).toHaveBeenCalledTimes(2) + expect(warnOnce).toHaveBeenCalledTimes(3) }) }) diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts index b4351e19cf..8a9d4001b8 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts @@ -47,7 +47,7 @@ describe('transform', () => { " @@ -58,7 +58,7 @@ describe('transform', () => { " @@ -251,28 +251,26 @@ describe('transform', () => { Hello`.trim()) expect(result).toMatchInlineSnapshot(` "HelloHello " @@ -348,7 +346,7 @@ describe('transform', () => { " diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte index 8c3f7bc869..46ecf47d7f 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte @@ -59,11 +59,11 @@ } :global(._bg-red-500_7dkb0w) { --un-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--un-bg-opacity)); + background-color: rgba(239, 68, 68, var(--un-bg-opacity)); } :global(.dark ._dark\:hover\:bg-green-500_7dkb0w:hover) { --un-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--un-bg-opacity)); + background-color: rgba(34, 197, 94, var(--un-bg-opacity)); } :global(._text-center_7dkb0w) { text-align: center; @@ -74,11 +74,11 @@ } :global(._text-orange-400_7dkb0w) { --un-text-opacity: 1; - color: rgb(251 146 60 / var(--un-text-opacity)); + color: rgba(251, 146, 60, var(--un-text-opacity)); } :global(._hover\:text-red_7dkb0w:hover) { --un-text-opacity: 1; - color: rgb(248 113 113 / var(--un-text-opacity)); + color: rgba(248, 113, 113, var(--un-text-opacity)); } @media (min-width: 640px) { :global(._sm\:text-left_7dkb0w) { diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte index 7625f4ec01..ea3188979b 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte @@ -32,7 +32,7 @@ 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)); --un-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--un-bg-opacity)); + background-color: rgba(239, 68, 68, var(--un-bg-opacity)); } :global(.uno-rdvmaz > :not([hidden]) ~ :not([hidden])) { --un-space-x-reverse: 0; @@ -44,7 +44,7 @@ } :global(.dark .uno-uovm2y:hover) { --un-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--un-bg-opacity)); + background-color: rgba(34, 197, 94, var(--un-bg-opacity)); } :global(.uno-rdvmaz) { text-align: center; @@ -55,15 +55,15 @@ } :global(.uno-y37ej3) { --un-text-opacity: 1; - color: rgb(251 146 60 / var(--un-text-opacity)); + color: rgba(251, 146, 60, var(--un-text-opacity)); } :global(.uno-deus5r:hover) { --un-text-opacity: 1; - color: rgb(248 113 113 / var(--un-text-opacity)); + color: rgba(248, 113, 113, var(--un-text-opacity)); } :global(.uno-wt89uz:hover) { --un-text-opacity: 1; - color: rgb(248 113 113 / var(--un-text-opacity)); + color: rgba(248, 113, 113, var(--un-text-opacity)); } @media (min-width: 640px) { :global(.uno-rdvmaz) { diff --git a/packages/svelte-scoped/test/cases/basic/OutputDev.svelte b/packages/svelte-scoped/test/cases/basic/OutputDev.svelte index f99c585b9a..5d7d51962d 100644 --- a/packages/svelte-scoped/test/cases/basic/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/basic/OutputDev.svelte @@ -3,7 +3,7 @@ diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte index 31a2ee8616..8b745a426e 100644 --- a/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte @@ -24,19 +24,19 @@ button { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--un-bg-opacity)); + background-color: rgba(254, 226, 226, var(--un-bg-opacity)); padding: 0.75rem; } button:hover { --un-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--un-bg-opacity)); + background-color: rgba(254, 202, 202, var(--un-bg-opacity)); } :global(.dark) button { --un-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--un-bg-opacity)); + background-color: rgba(185, 28, 28, var(--un-bg-opacity)); } :global(.dark) button:hover { --un-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--un-bg-opacity)); + background-color: rgba(220, 38, 38, var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte index abfa7d9875..0032b7243e 100644 --- a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte @@ -24,19 +24,19 @@ button { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--un-bg-opacity)); + background-color: rgba(254, 226, 226, var(--un-bg-opacity)); padding: 0.75rem; } button:hover { --un-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--un-bg-opacity)); + background-color: rgba(254, 202, 202, var(--un-bg-opacity)); } :global(.dark) button { --un-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--un-bg-opacity)); + background-color: rgba(185, 28, 28, var(--un-bg-opacity)); } :global(.dark) button:hover { --un-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--un-bg-opacity)); + background-color: rgba(220, 38, 38, var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte index 35a5de1465..d7f3ec7a33 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte @@ -120,19 +120,19 @@ div { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--un-bg-opacity)); + background-color: rgba(254, 226, 226, var(--un-bg-opacity)); padding: 0.75rem; } div:hover { --un-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--un-bg-opacity)); + background-color: rgba(254, 202, 202, var(--un-bg-opacity)); } :global(.dark) div { --un-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--un-bg-opacity)); + background-color: rgba(185, 28, 28, var(--un-bg-opacity)); } :global(.dark) div:hover { --un-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--un-bg-opacity)); + background-color: rgba(220, 38, 38, var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte index c7c251df89..3980111a06 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte @@ -118,19 +118,19 @@ div { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--un-bg-opacity)); + background-color: rgba(254, 226, 226, var(--un-bg-opacity)); padding: 0.75rem; } div:hover { --un-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--un-bg-opacity)); + background-color: rgba(254, 202, 202, var(--un-bg-opacity)); } :global(.dark) div { --un-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--un-bg-opacity)); + background-color: rgba(185, 28, 28, var(--un-bg-opacity)); } :global(.dark) div:hover { --un-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--un-bg-opacity)); + background-color: rgba(220, 38, 38, var(--un-bg-opacity)); } diff --git a/packages/transformer-compile-class/README.md b/packages/transformer-compile-class/README.md index 7c9b440366..b602ca1a45 100644 --- a/packages/transformer-compile-class/README.md +++ b/packages/transformer-compile-class/README.md @@ -52,7 +52,7 @@ Will be compiled to: } .uno-0qw2gr:hover { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { diff --git a/packages/vscode/src/utils.ts b/packages/vscode/src/utils.ts index f03cc133d5..77abc7d766 100644 --- a/packages/vscode/src/utils.ts +++ b/packages/vscode/src/utils.ts @@ -93,32 +93,32 @@ const cssColorRegex = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\(.*\) * ```css *.dark [border="dark\:gray-700"] { * --un-border-opacity: 1; - * border-color: rgba(55, 65, 81, var(--un-border-opacity)); + * border-color: rgb(55 65 81 / var(--un-border-opacity)); *} * ``` - * return `rgba(55, 65, 81, 1)` + * return `rgb(55 65 81 / 1)` * * @example Input with no-value CSS var and its fallback value * ```css *.bg-brand-primary { - * background-color: hsla(217, 78%, 51%, var(--no-value, 0.5)); + * background-color: hsl(217 78% 51% / var(--no-value, 0.5)); *} * ``` - * return `hsla(217, 78%, 51%, 0.5)` + * return `hsl(217 78% 51% / 0.5)` * * @example Input with no-value CSS var * ```css *.bg-brand-primary { - * background-color: hsla(217, 78%, 51%, var(--no-value)); + * background-color: hsl(217 78% 51% / var(--no-value)); *} * ``` - * return `hsla(217, 78%, 51%)` + * return `rgb(217 78% 51%)` * * @param str - CSS string * @returns The **first** CSS color string (hex, rgb[a], hsl[a]) or `undefined` */ export function getColorString(str: string) { - let colorString = str.match(cssColorRegex)?.[0] // e.g rgba(248, 113, 113, var(--maybe-css-var)) + let colorString = str.match(cssColorRegex)?.[0] // e.g rgb(248 113 113 / var(--maybe-css-var)) if (!colorString) return @@ -132,13 +132,13 @@ export function getColorString(str: string) { const fallback = match.groups?.fallback if (cssVarName && cssVars.get(cssVarName)) - // rgba(248, 113, 113, var(--un-text-opacity)) => rgba(248, 113, 113, 1) + // rgb(248 113 113 / var(--un-text-opacity)) => rgb(248 113 113 / 1) colorString = colorString.replaceAll(matchedString, cssVars.get(cssVarName) ?? matchedString) else if (fallback) - // rgba(248, 113, 113, var(--no-value, 0.5)) => rgba(248, 113, 113, 0.5) + // rgb(248 113 113 / var(--no-value, 0.5)) => rgb(248 113 113 / 0.5) colorString = colorString.replaceAll(matchedString, fallback) - // rgba(248, 113, 113, var(--no-value)) => rgba(248, 113, 113) + // rgb(248 113 113 / var(--no-value)) => rgba(248 113 113) colorString = colorString.replaceAll(/,?\s+var\(--.*?\)/gm, '') } diff --git a/playground/src/main.css b/playground/src/main.css index 386d571cba..478002a503 100644 --- a/playground/src/main.css +++ b/playground/src/main.css @@ -27,7 +27,7 @@ .splitpanes__splitter:before { content: ''; transition: opacity 0.4s; - background-color: rgba(125, 125, 125, 0.1); + background-color: rgb(125 125 125 / 0.1); @apply absolute z-1 top-0 left-0 op-0; } diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap index 35e71094f6..fddc4e9000 100644 --- a/test/__snapshots__/cli.test.ts.snap +++ b/test/__snapshots__/cli.test.ts.snap @@ -17,7 +17,7 @@ exports[`cli > supports directives transformer 2`] = `".btn-center{@apply text-c exports[`cli > supports unocss.config.js 1`] = ` "/* layer: shortcuts */ -.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0, 0, 0, 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" +.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}" `; exports[`cli > supports updating source files with transformed utilities ('directives transformer') 1`] = `""`; diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap index ff4c3d8abb..f59db00362 100644 --- a/test/__snapshots__/postcss.test.ts.snap +++ b/test/__snapshots__/postcss.test.ts.snap @@ -15,7 +15,7 @@ exports[`postcss > @screen 1`] = ` exports[`postcss > @unocss 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} /* layer: shortcuts */ .container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;} @media (min-width: 640px){ @@ -223,21 +223,21 @@ exports[`postcss > @unocss 1`] = ` .bg-gradient-stops-\\\\[blue\\\\,pink\\\\], .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600\\\\/60{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / 0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500\\\\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-via-current, -.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} +.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600\\\\/40{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / 0.4) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} -.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} +.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500\\\\/30{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / 0.3) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-to-current, @@ -254,9 +254,9 @@ exports[`postcss > @unocss 1`] = ` .from-10\\\\%{--un-gradient-from-position:10%;} .to-90\\\\%{--un-gradient-to-position:90%;} .via-20\\\\%{--un-gradient-via-position:20%;} -.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))));} +.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))));} +.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))));} .bg-gradient-to-t{--un-gradient-shape:to top;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-to-tl{--un-gradient-shape:to top left;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-shape-\\\\[70deg\\\\], @@ -343,11 +343,11 @@ exports[`postcss > @unocss 1`] = ` .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\\\\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgb(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\[0_4px_3px_\\\\#000\\\\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\\\\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0, 0, 0, 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgb(0 0 0 / 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgb(0 0 0 / 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgb(252 165 165 / var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} @@ -422,7 +422,7 @@ exports[`postcss > @unocss 1`] = ` exports[`postcss > @unocss all layers 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" `; exports[`postcss > @unocss layers 1`] = ` @@ -430,7 +430,7 @@ exports[`postcss > @unocss layers 1`] = ` .test{padding:1.25rem;} /* layer: default */ .relative{position:relative;} -.p4{padding:1rem;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" +.p4{padding:1rem;}/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* layer: shortcuts */.test{padding:1.25rem;}/* layer: default */.relative{position:relative;}.p4{padding:1rem;}/* layer: my-layer */.example{color:red;}" `; exports[`postcss > theme() 1`] = `"div{color:#dc2626;background-color:rgb(220 38 38 / 50%)}"`; diff --git a/test/__snapshots__/preflights.test.ts.snap b/test/__snapshots__/preflights.test.ts.snap index 4f38a4fb71..3efd3cf26f 100644 --- a/test/__snapshots__/preflights.test.ts.snap +++ b/test/__snapshots__/preflights.test.ts.snap @@ -9,20 +9,20 @@ exports[`preflights > basic 1`] = ` exports[`preflights > preflight root can be customized with array 1`] = ` "/* layer: preflights */ -.scope-1{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}[data-scope-2]{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}" +.scope-1{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}[data-scope-2]{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}" `; exports[`preflights > preflight root can be customized with string 1`] = ` "/* layer: preflights */ -:root{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}" +:root{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}" `; exports[`preflights > preflight with empty variablePrefix 1`] = ` "/* layer: preflights */ -*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--ring-shadow:0 0 rgba(0, 0, 0, 0);--shadow-inset: ;--shadow:0 0 rgba(0, 0, 0, 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--ring-shadow:0 0 rgba(0, 0, 0, 0);--shadow-inset: ;--shadow:0 0 rgba(0, 0, 0, 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgba(147, 197, 253, 0.5);}" +*,::before,::after{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgb(0 0 0 / 0);--ring-shadow:0 0 rgb(0 0 0 / 0);--shadow-inset: ;--shadow:0 0 rgb(0 0 0 / 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgb(147 197 253 / 0.5);}::backdrop{--rotate:0;--rotate-x:0;--rotate-y:0;--rotate-z:0;--scale-x:1;--scale-y:1;--scale-z:1;--skew-x:0;--skew-y:0;--translate-x:0;--translate-y:0;--translate-z:0;--ring-offset-shadow:0 0 rgb(0 0 0 / 0);--ring-shadow:0 0 rgb(0 0 0 / 0);--shadow-inset: ;--shadow:0 0 rgb(0 0 0 / 0);--ring-inset: ;--ring-offset-width:0px;--ring-offset-color:#fff;--ring-width:0px;--ring-color:rgb(147 197 253 / 0.5);}" `; exports[`preflights > preflight with variablePrefix 1`] = ` "/* layer: preflights */ -*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-shadow:0 0 rgba(0, 0, 0, 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-shadow:0 0 rgba(0, 0, 0, 0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0, 0, 0, 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147, 197, 253, 0.5);}" +*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--test-ring-shadow:0 0 rgb(0 0 0 / 0);--test-shadow-inset: ;--test-shadow:0 0 rgb(0 0 0 / 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgb(147 197 253 / 0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--test-ring-shadow:0 0 rgb(0 0 0 / 0);--test-shadow-inset: ;--test-shadow:0 0 rgb(0 0 0 / 0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgb(147 197 253 / 0.5);}" `; diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css index f6c3e959ee..19067336d1 100644 --- a/test/assets/output/preset-mini-targets.css +++ b/test/assets/output/preset-mini-targets.css @@ -1,5 +1,5 @@ /* 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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);} +*,::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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}::backdrop{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);} /* layer: 1 */ .uno-layer-1\:translate-0{--un-translate-x:0;--un-translate-y:0;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 */ @@ -419,10 +419,10 @@ unocss .scope-\[unocss\]\:block{display:block;} .text-stroke-blue-500{--un-text-stroke-opacity:1;-webkit-text-stroke-color:rgb(59 130 246 / var(--un-text-stroke-opacity));} .text-stroke-op-\$opacity-variable{--un-text-stroke-opacity:var(--opacity-variable);} .text-stroke-op-60{--un-text-stroke-opacity:0.6;} -.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0, 0, 0, 0.2)),0 0 1px var(--un-text-shadow-color, rgba(1, 0, 5, 0.1));text-shadow:var(--un-text-shadow);} +.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgb(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgb(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);} .text-shadow-\$var{text-shadow:var(--var);} -.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0, 0, 0, 0.26)),0 0 5px var(--un-text-shadow-color, rgba(15, 3, 86, 0.22));text-shadow:var(--un-text-shadow);} -.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0, 0, 0, 0));text-shadow:var(--un-text-shadow);} +.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgb(0 0 0 / 0.26)),0 0 5px var(--un-text-shadow-color, rgb(15 3 86 / 0.22));text-shadow:var(--un-text-shadow);} +.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgb(0 0 0 / 0));text-shadow:var(--un-text-shadow);} .text-shadow-color-red-300{--un-text-shadow-opacity:1;--un-text-shadow-color:rgb(252 165 165 / var(--un-text-shadow-opacity));} .text-shadow-color-op-\$opacity-variable{--un-text-shadow-opacity:var(--opacity-variable);} .text-shadow-color-op-30{--un-text-shadow-opacity:0.3;} @@ -519,16 +519,16 @@ unocss .scope-\[unocss\]\:block{display:block;} .oblique{font-style:oblique;} .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .backdrop\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(74 222 128 / var(--un-shadow-opacity));} -.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), var(--un-ring-shadow), var(--un-shadow);} +.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgb(255 255 255 / var(--un-shadow-opacity));} .shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237, 0, 0, 1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-\$variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-current{--un-shadow-color:currentColor;} .shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgb(34 197 94 / var(--un-shadow-opacity));} .shadow-green-900\/50{--un-shadow-color:rgb(20 83 45 / 0.5);} -.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0, 0, 0, 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-transparent{--un-shadow-color:transparent;} -.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), var(--un-ring-shadow), var(--un-shadow);} +.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .backdrop-element\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgb(220 252 231 / var(--un-shadow-opacity));} .shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);} .shadow-op-50{--un-shadow-opacity:0.5;} @@ -1047,4 +1047,4 @@ unocss .scope-\[unocss\]\:block{display:block;} /* layer: uno css */ .uno-layer-\[uno_css\]\:block{display:block;} /* layer: uno_css */ -.uno-layer-uno_css\:block{display:block;} +.uno-layer-uno_css\:block{display:block;} \ No newline at end of file diff --git a/test/assets/output/preset-uno-targets-2.css b/test/assets/output/preset-uno-targets-2.css index bea93decd8..c9500d9448 100644 --- a/test/assets/output/preset-uno-targets-2.css +++ b/test/assets/output/preset-uno-targets-2.css @@ -5,5 +5,5 @@ section{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));} .body_main{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));} } @media (min-width: 768px){ -aside{--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), var(--un-ring-shadow), var(--un-shadow);} +aside{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} } \ No newline at end of file diff --git a/test/assets/output/preset-web-fonts.css b/test/assets/output/preset-web-fonts.css index 4319bb0a5e..8ed8805018 100644 --- a/test/assets/output/preset-web-fonts.css +++ b/test/assets/output/preset-web-fonts.css @@ -1,9 +1,9 @@ /* layer: imports */ @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* 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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);} +*,::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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}::backdrop{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);} /* layer: default */ .font-lato{font-family:"Lato",sans-serif;} .font-lobster{font-family:"Lobster";} .font-mono{font-family:"Fira Code","Fira Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;} -.font-sans{font-family:"Roboto",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";} +.font-sans{font-family:"Roboto",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";} \ No newline at end of file diff --git a/test/assets/output/preset-wind-targets.css b/test/assets/output/preset-wind-targets.css index e966543e45..93d818c313 100644 --- a/test/assets/output/preset-wind-targets.css +++ b/test/assets/output/preset-wind-targets.css @@ -1,5 +1,5 @@ /* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} +*,::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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} /* layer: _pre */ @media (prefers-contrast: less){ .uno-layer-_pre\:contrast-less\:bg-gray-3{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity));} @@ -187,21 +187,21 @@ .bg-gradient-stops-\[blue\,pink\], .stops-\[blue\,pink\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600\/60{--un-gradient-from-position:0%;--un-gradient-from:rgb(22 163 74 / 0.6) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(22 163 74 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgba(255, 255, 255, 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .from-green-500\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(34 197 94 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(34 197 94 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-via-current, -.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} +.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-green-600\/40{--un-gradient-via-position:50%;--un-gradient-to:rgb(22 163 74 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(22 163 74 / 0.4) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} -.via-\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} +.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);} +.via-\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} .via-green-500\/30{--un-gradient-via-position:50%;--un-gradient-to:rgb(34 197 94 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(34 197 94 / 0.3) var(--un-gradient-via-position), var(--un-gradient-to);} .bg-gradient-to-current, @@ -218,9 +218,9 @@ .from-10\%{--un-gradient-from-position:10%;} .to-90\%{--un-gradient-to-position:90%;} .via-20\%{--un-gradient-via-position:20%;} -.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} -.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));} +.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))));} +.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))));} +.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))));} .bg-gradient-to-t{--un-gradient-shape:to top;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-to-tl{--un-gradient-shape:to top left;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .bg-gradient-shape-\[70deg\], @@ -307,11 +307,11 @@ .backdrop-contrast-125{--un-backdrop-contrast:contrast(1.25);-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);} .contrast-\$variable{--un-contrast:contrast(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .contrast-125{--un-contrast:contrast(1.25);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgb(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\[0_4px_3px_\#000\]{--un-drop-shadow:drop-shadow(0 4px 3px #000);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-\$variable{--un-drop-shadow:drop-shadow(var(--variable));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgba(0, 0, 0, 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgba(0, 0, 0, 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-none{--un-drop-shadow:drop-shadow(0 0 var(--un-drop-shadow-color, rgb(0 0 0 / 0)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} +.drop-shadow-sm{--un-drop-shadow:drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgb(0 0 0 / 0.05)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .drop-shadow-color-red-300{--un-drop-shadow-opacity:1;--un-drop-shadow-color:rgb(252 165 165 / var(--un-drop-shadow-opacity));} .drop-shadow-color-op-30{--un-drop-shadow-opacity:0.3;} .backdrop-grayscale{--un-backdrop-grayscale:grayscale(1);-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);} @@ -381,4 +381,4 @@ } @supports (display: grid){ .supports-grid\:block{display:block;} -} +} \ No newline at end of file diff --git a/test/assets/output/runtime-preset-tagify.css b/test/assets/output/runtime-preset-tagify.css index 6be4b120c3..0d4e1f06f6 100644 --- a/test/assets/output/runtime-preset-tagify.css +++ b/test/assets/output/runtime-preset-tagify.css @@ -6,4 +6,4 @@ scale-2{--un-scale-x:0.02;--un-scale-y:0.02;transform:translateX(var(--un-transl hover\:color-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} text-green5\:10{color:rgb(34 197 94 / 0.1);} text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} -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), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file +shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} \ No newline at end of file diff --git a/test/layer.test.ts b/test/layer.test.ts index 35b6bedf3d..f08949cb73 100644 --- a/test/layer.test.ts +++ b/test/layer.test.ts @@ -40,7 +40,7 @@ describe('layers', () => { "/* layer: imports */ @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Mono:wght@400;700&display=swap'); /* 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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);}::backdrop{--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 rgba(0, 0, 0, 0);--un-ring-shadow:0 0 rgba(0, 0, 0, 0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0, 0, 0, 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147, 197, 253, 0.5);} + *,::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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);}::backdrop{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);} /* layer: default */ .font-mono{font-family:\\"Fira Code\\",\\"Fira Mono\\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}" `) From f6e17d98babf9fd034043048dd996538ee8677a0 Mon Sep 17 00:00:00 2001 From: Simon He <57086651+Simon-He95@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:53:49 +0800 Subject: [PATCH 5/5] fix: test --- .../transformApply/getUtils.test.ts | 16 ++++------ .../transformClasses/index.test.ts | 24 ++++++++------- .../test-outputs/EverythingDev.svelte | 8 ++--- .../test-outputs/EverythingProd.svelte | 10 +++---- .../test/cases/basic/OutputDev.svelte | 2 +- .../test/cases/basic/OutputProd.svelte | 2 +- .../test/cases/needs-parent/OutputDev.svelte | 8 ++--- .../test/cases/needs-parent/OutputProd.svelte | 8 ++--- .../test/cases/preflights/OutputDev.svelte | 29 ++++++++++--------- .../test/cases/preflights/OutputProd.svelte | 29 ++++++++++--------- .../test/cases/prose/OutputDev.svelte | 16 +++++----- .../test/cases/prose/OutputProd.svelte | 16 +++++----- 12 files changed, 84 insertions(+), 84 deletions(-) diff --git a/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts b/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts index a076bc5473..a1d0cb64c9 100644 --- a/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts +++ b/packages/svelte-scoped/src/_preprocess/transformApply/getUtils.test.ts @@ -64,23 +64,19 @@ describe('getUtils', async () => { expect(result).toMatchInlineSnapshot(` [ [ - 744, - ".\\\\-", - "font-weight:500;", + 84, + ".\\\\-:hover", + "margin-right:0.25rem;font-weight:500;", undefined, { - "autocomplete": [ - "(font|fw)-(100|200|300|400|500|600|700|800|900)", - "(font|fw)-$fontWeight", - ], "layer": undefined, - "sort": undefined, + "sort": 24, }, undefined, - undefined, + true, ], ] `) - expect(warnOnce).toHaveBeenCalledTimes(3) + expect(warnOnce).toHaveBeenCalledTimes(2) }) }) diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts index 8a9d4001b8..b4351e19cf 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts @@ -47,7 +47,7 @@ describe('transform', () => { " @@ -58,7 +58,7 @@ describe('transform', () => { " @@ -251,26 +251,28 @@ describe('transform', () => { Hello`.trim()) expect(result).toMatchInlineSnapshot(` "HelloHello " @@ -346,7 +348,7 @@ describe('transform', () => { " diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte index 46ecf47d7f..8c3f7bc869 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte @@ -59,11 +59,11 @@ } :global(._bg-red-500_7dkb0w) { --un-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--un-bg-opacity)); + background-color: rgb(239 68 68 / var(--un-bg-opacity)); } :global(.dark ._dark\:hover\:bg-green-500_7dkb0w:hover) { --un-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--un-bg-opacity)); + background-color: rgb(34 197 94 / var(--un-bg-opacity)); } :global(._text-center_7dkb0w) { text-align: center; @@ -74,11 +74,11 @@ } :global(._text-orange-400_7dkb0w) { --un-text-opacity: 1; - color: rgba(251, 146, 60, var(--un-text-opacity)); + color: rgb(251 146 60 / var(--un-text-opacity)); } :global(._hover\:text-red_7dkb0w:hover) { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { :global(._sm\:text-left_7dkb0w) { diff --git a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte index ea3188979b..7625f4ec01 100644 --- a/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte +++ b/packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte @@ -32,7 +32,7 @@ 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)); --un-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--un-bg-opacity)); + background-color: rgb(239 68 68 / var(--un-bg-opacity)); } :global(.uno-rdvmaz > :not([hidden]) ~ :not([hidden])) { --un-space-x-reverse: 0; @@ -44,7 +44,7 @@ } :global(.dark .uno-uovm2y:hover) { --un-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--un-bg-opacity)); + background-color: rgb(34 197 94 / var(--un-bg-opacity)); } :global(.uno-rdvmaz) { text-align: center; @@ -55,15 +55,15 @@ } :global(.uno-y37ej3) { --un-text-opacity: 1; - color: rgba(251, 146, 60, var(--un-text-opacity)); + color: rgb(251 146 60 / var(--un-text-opacity)); } :global(.uno-deus5r:hover) { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } :global(.uno-wt89uz:hover) { --un-text-opacity: 1; - color: rgba(248, 113, 113, var(--un-text-opacity)); + color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { :global(.uno-rdvmaz) { diff --git a/packages/svelte-scoped/test/cases/basic/OutputDev.svelte b/packages/svelte-scoped/test/cases/basic/OutputDev.svelte index 5d7d51962d..f99c585b9a 100644 --- a/packages/svelte-scoped/test/cases/basic/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/basic/OutputDev.svelte @@ -3,7 +3,7 @@ diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte index 8b745a426e..31a2ee8616 100644 --- a/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte @@ -24,19 +24,19 @@ button { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } button:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) button { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) button:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte index 0032b7243e..abfa7d9875 100644 --- a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte @@ -24,19 +24,19 @@ button { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } button:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) button { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) button:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte index d7f3ec7a33..fe79e134fa 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputDev.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -112,27 +112,28 @@ } :global(._shadow_32yp54) { --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)); + var(--un-shadow-color, rgb(0 0 0 / 0.1)), + var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / + 0.1)); box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow); } div { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } div:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) div { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) div:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte index 3980111a06..61afc147a4 100644 --- a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -110,27 +110,28 @@ :global(.usp-ff1ijb) { margin-bottom: 0.25rem; --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)); + var(--un-shadow-color, rgb(0 0 0 / 0.1)), + var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / + 0.1)); box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow); } div { border-radius: 0.25rem; --un-bg-opacity: 1; - background-color: rgba(254, 226, 226, var(--un-bg-opacity)); + background-color: rgb(254 226 226 / var(--un-bg-opacity)); padding: 0.75rem; } div:hover { --un-bg-opacity: 1; - background-color: rgba(254, 202, 202, var(--un-bg-opacity)); + background-color: rgb(254 202 202 / var(--un-bg-opacity)); } :global(.dark) div { --un-bg-opacity: 1; - background-color: rgba(185, 28, 28, var(--un-bg-opacity)); + background-color: rgb(185 28 28 / var(--un-bg-opacity)); } :global(.dark) div:hover { --un-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--un-bg-opacity)); + background-color: rgb(220 38 38 / var(--un-bg-opacity)); } diff --git a/packages/svelte-scoped/test/cases/prose/OutputDev.svelte b/packages/svelte-scoped/test/cases/prose/OutputDev.svelte index 6973ded07f..a8015610df 100644 --- a/packages/svelte-scoped/test/cases/prose/OutputDev.svelte +++ b/packages/svelte-scoped/test/cases/prose/OutputDev.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; diff --git a/packages/svelte-scoped/test/cases/prose/OutputProd.svelte b/packages/svelte-scoped/test/cases/prose/OutputProd.svelte index 6973ded07f..a8015610df 100644 --- a/packages/svelte-scoped/test/cases/prose/OutputProd.svelte +++ b/packages/svelte-scoped/test/cases/prose/OutputProd.svelte @@ -27,15 +27,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ; @@ -79,15 +79,15 @@ --un-numeric-fraction: ; --un-border-spacing-x: 0; --un-border-spacing-y: 0; - --un-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --un-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --un-shadow-inset: ; - --un-shadow: 0 0 rgba(0, 0, 0, 0); + --un-shadow: 0 0 rgb(0 0 0 / 0); --un-ring-inset: ; --un-ring-offset-width: 0px; --un-ring-offset-color: #fff; --un-ring-width: 0px; - --un-ring-color: rgba(147, 197, 253, 0.5); + --un-ring-color: rgb(147 197 253 / 0.5); --un-blur: ; --un-brightness: ; --un-contrast: ;