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: ;