fix(preset-wind4): fix ring offset size rule (#4741)

zyyv · web-flow · commit 34b5c48170ea · 2025-06-16T10:50:25.000+08:00
diff --git a/packages-presets/preset-wind4/src/rules/ring.ts b/packages-presets/preset-wind4/src/rules/ring.ts
@@ -37,8 +37,8 @@ export const rings: Rule<Theme>[] = [
   [/^inset-ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-inset-ring-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'inset-ring-(op|opacity)-<percent>' }],
 
   // offset
-  [/^ring-offset(?:-(.+))?$/, ([, d]) => {
-    const v = h.bracket.px(d || '1')
+  [/^ring-offset(?:-(?:width-|size-)?(.+))?$/, ([, d]) => {
+    const v = h.bracket.cssvar.px(d || '1')
     if (v != null) {
       return {
         '--un-ring-offset-width': v,
@@ -48,7 +48,6 @@ export const rings: Rule<Theme>[] = [
   }, { autocomplete: 'ring-offset-$colors' }],
   [/^ring-offset-(.+)$/, colorResolver(`--un-ring-offset-color`, 'ring-offset'), { autocomplete: 'ring-offset-$colors' }],
   [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-ring-offset-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'ring-offset-(op|opacity)-<percent>' }],
-  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d]) => ({ '--un-ring-offset-width': h.bracket.cssvar.px(d) })],
 
   // style
   ['ring-inset', { '--un-ring-inset': 'inset' }],
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -22,6 +22,7 @@
 @property --un-contain-style{syntax:"*";inherits:false;}
 @property --un-content{syntax:"*";inherits:false;initial-value:"";}
 @property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-ring-offset-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
 @property --un-shadow-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
 @property --un-inset-ring-color{syntax:"*";inherits:false;}
 @property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@@ -1006,12 +1007,12 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .ring-op-\$opacity-variable{--un-ring-opacity:var(--opacity-variable);}
 .ring-op-5{--un-ring-opacity:5%;}
 .ring-offset{--un-ring-offset-width:1px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);}
+.ring-offset-4{--un-ring-offset-width:4px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);}
+.ring-offset-size-\$variable,
+.ring-offset-width-\$variable{--un-ring-offset-width:var(--variable);--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);}
+.ring-offset-\$variable{--un-ring-offset-color:color-mix(in oklab, var(--variable) var(--un-ring-offset-opacity), transparent) /* var(--variable) */;}
 .ring-offset-op-\$opacity-variable{--un-ring-offset-opacity:var(--opacity-variable);}
 .ring-offset-op-5{--un-ring-offset-opacity:5%;}
-.ring-offset-\$variable,
-.ring-offset-size-\$variable,
-.ring-offset-width-\$variable{--un-ring-offset-width:var(--variable);}
-.ring-offset-4{--un-ring-offset-width:4px;}
 .ring-inset{--un-ring-inset:inset;}
 .shadow{--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-\[\#fff\]{--un-shadow-color:color-mix(in oklab, #fff var(--un-shadow-opacity), transparent) /* #fff */;}
