fix(preset-mini): fix wrong match/replace from #3399 (#3404)

Co-authored-by: Chris <1633711653@qq.com>

packages/preset-mini/src/_variants/negative.ts

@@ -2,6 +2,7 @@ import type { Variant } from '@unocss/core'
 import { getStringComponent } from '@unocss/rule-utils'
 import { CONTROL_MINI_NO_NEGATIVE, cssMathFnRE } from '../utils'
 
+const anchoredNumberRE = /^-?[0-9.]+(?:[a-z]+|%)?$/
 const numberRE = /-?[0-9.]+(?:[a-z]+|%)?/
 
 const ignoreProps = [
@@ -23,7 +24,7 @@ function negateFunctionBody(value: string) {
   if (match) {
     const [fnBody, rest] = getStringComponent(match[2], '(', ')', ' ') ?? []
     if (fnBody) {
-      const body = numberRE.test(fnBody)
+      const body = anchoredNumberRE.test(fnBody.slice(1, -1))
         ? fnBody.replace(numberRE, i => i.startsWith('-') ? i.slice(1) : `-${i}`)
         : `(calc(${fnBody} * -1))`
       return `${match[1]}${body}${rest ? ` ${rest}` : ''}`
@@ -61,7 +62,7 @@ export const variantNegative: Variant = {
             changed = true
             return
           }
-          if (numberRE.test(value)) {
+          if (anchoredNumberRE.test(value)) {
             v[1] = value.replace(numberRE, i => i.startsWith('-') ? i.slice(1) : `-${i}`)
             changed = true
           }

test/__snapshots__/postcss.test.ts.snap

@@ -349,7 +349,7 @@ exports[`postcss > @unocss 1`] = `
 .grayscale-90{--un-grayscale:grayscale(0.9);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);}
 .-backdrop-hue-rotate-90{--un-backdrop-hue-rotate:hue-rotate(-90deg);-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);}
 .-hue-rotate--90{--un-hue-rotate:hue-rotate(90deg);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);}
-.-hue-rotate-\\[var\\(--for-hue\\,0\\.5turn\\)\\]{--un-hue-rotate:hue-rotate(var(--for-hue,-0.5turn));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);}
+.-hue-rotate-\\[var\\(--for-hue\\,0\\.5turn\\)\\]{--un-hue-rotate:hue-rotate(calc((var(--for-hue,0.5turn)) * -1));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);}
 .-hue-rotate-90{--un-hue-rotate:hue-rotate(-90deg);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);}
 .backdrop-hue-rotate-0{--un-backdrop-hue-rotate:hue-rotate(0);-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-hue-rotate-360{--un-backdrop-hue-rotate:hue-rotate(360deg);-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);}