fix(preset-wind4): add cssvar fallback value

fixes #4745

Author: zyyv

packages-presets/preset-wind4/src/rules/typography.ts

@@ -280,7 +280,7 @@ const fontVariantNumericProperties = [
   defineProperty('--un-numeric-fraction'),
 ]
 const baseFontVariantNumeric = {
-  'font-variant-numeric': 'var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)',
+  'font-variant-numeric': 'var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,)',
 }
 
 export const fontVariantNumeric: Rule<Theme>[] = [

packages-presets/preset-wind4/src/utils/utilities.ts

@@ -422,8 +422,8 @@ export function defineProperty(
   }
   if (initialValue != null) {
     value['initial-value'] = initialValue as keyof CSSObjectInput
-    propertyTracking(property, String(initialValue))
   }
+  propertyTracking(property, initialValue ? String(initialValue) : 'initial')
   return value
 }
 // #endregion

test/assets/output/preset-wind4-targets.css

@@ -1,5 +1,5 @@
 /* layer: properties */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-content:"";--un-bg-opacity:100%;--un-line-opacity:100%;--un-ring-opacity:100%;--un-shadow-opacity:100%;--un-fill-opacity:100%;--un-stroke-opacity:100%;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-rotate-x:rotateX(0);--un-rotate-y:rotateY(0);--un-rotate-z:rotateZ(0);--un-skew-x:skewX(0);--un-skew-y:skewY(0);--un-text-stroke-opacity:100%;--un-text-shadow-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-accent-opacity:100%;--un-caret-opacity:100%;--un-drop-shadow-opacity:100%;--un-outline-opacity:100%;--un-outline-style:solid;--un-border-opacity:100%;--un-text-opacity:100%;--un-ring-offset-opacity:100%;--un-from-opacity:100%;--un-to-opacity:100%;--un-via-opacity:100%;--un-stops-opacity:100%;--un-divide-y-reverse:0;--un-border-style:solid;--un-divide-x-reverse:0;--un-divide-opacity:100%;--un-space-x-reverse:0;--un-space-y-reverse:0;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-border-inline-start-opacity:100%;--un-border-inline-end-opacity:100%;--un-border-block-opacity:100%;--un-border-inline-opacity:100%;--un-border-top-opacity:100%;--un-border-bottom-opacity:100%;--un-placeholder-opacity:100%;}}
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-content:"";--un-bg-opacity:100%;--un-line-opacity:100%;--un-ring-opacity:100%;--un-shadow-opacity:100%;--un-contain-size:initial;--un-contain-layout:initial;--un-contain-paint:initial;--un-contain-style:initial;--un-fill-opacity:100%;--un-stroke-opacity:100%;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-rotate-x:rotateX(0);--un-rotate-y:rotateY(0);--un-rotate-z:rotateZ(0);--un-skew-x:skewX(0);--un-skew-y:skewY(0);--un-ease:initial;--un-leading:initial;--un-text-stroke-opacity:100%;--un-text-shadow-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-accent-opacity:100%;--un-caret-opacity:100%;--un-drop-shadow-opacity:100%;--un-outline-opacity:100%;--un-outline-style:solid;--un-border-opacity:100%;--un-text-opacity:100%;--un-ring-offset-opacity:100%;--un-from-opacity:100%;--un-to-opacity:100%;--un-via-opacity:100%;--un-stops-opacity:100%;--un-divide-y-reverse:initial;--un-border-style:solid;--un-divide-x-reverse:initial;--un-divide-opacity:100%;--un-space-x-reverse:initial;--un-space-y-reverse:initial;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-border-inline-start-opacity:100%;--un-border-inline-end-opacity:100%;--un-border-block-opacity:100%;--un-border-inline-opacity:100%;--un-border-top-opacity:100%;--un-border-bottom-opacity:100%;--un-placeholder-opacity:100%;}}
 @property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
 @property --un-leading{syntax:"*";inherits:false;}
 @property --un-text-stroke-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@@ -1578,8 +1578,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .touch-manipulation{touch-action:manipulation;}
 .touch-none{touch-action:none;}
 .touch-initial{touch-action:initial;}
-.lining-nums{--un-numeric-figure:lining-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}
-.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}
+.lining-nums{--un-numeric-figure:lining-nums;font-variant-numeric:var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,);}
+.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,);}
 .normal-nums{font-variant-numeric:normal;}
 .view-transition-foo{view-transition-name:foo;}
 .view-transition-none{view-transition-name:none;}