feat(preset-mini): negate math function values

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

@@ -1,12 +1,21 @@
 import type { Variant } from '@unocss/core'
-import { CONTROL_MINI_NO_NEGATIVE } from '../utils'
+import { CONTROL_MINI_NO_NEGATIVE, getComponent } from '../utils'
 
 const numberRE = /[0-9.]+(?:[a-z]+|%)?/
 
 const ignoreProps = [
   /opacity|color|flex/,
 ]
 
+const negateFunctions = (value: string) => {
+  const match = value.match(/^(calc|clamp|max|min)\s*(\(.*)/)
+  if (match) {
+    const [fnBody, rest] = getComponent(match[2], '(', ')', ' ') ?? []
+    if (fnBody)
+      return `calc(${match[1]}${fnBody} * -1)${rest ? ` ${rest}` : ''}`
+  }
+}
+
 export const variantNegative: Variant = {
   name: 'negative',
   match(matcher) {
@@ -25,7 +34,12 @@ export const variantNegative: Variant = {
             return
           if (ignoreProps.some(i => v[0].match(i)))
             return
-          if (numberRE.test(value)) {
+          const negated = negateFunctions(value)
+          if (negated) {
+            v[1] = negated
+            changed = true
+          }
+          else if (numberRE.test(value)) {
             v[1] = value.replace(numberRE, i => `-${i}`)
             changed = true
           }

test/__snapshots__/preset-mini.test.ts.snap

@@ -116,7 +116,10 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .mxy{margin:1rem;}
 .my-auto{margin-top:auto;margin-bottom:auto;}
 .my-revert-layer{margin-top:revert-layer;margin-bottom:revert-layer;}
+.-\\\\!mb-safe{margin-bottom:calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) * -1) !important;}
 .-mb-px{margin-bottom:-1px;}
+.-mt-safe{margin-top:calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) * -1);}
+.\\\\!-ms-safe{margin-inline-start:calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) * -1) !important;}
 .mt-\\\\[-10\\\\.2\\\\%\\\\]{margin-top:-10.2%;}
 .mt-\\\\$height{margin-top:var(--height);}
 .next\\\\:mt-0+*{margin-top:0rem;}

test/__snapshots__/preset-wind.test.ts.snap

@@ -191,7 +191,7 @@ exports[`preset-wind > targets 1`] = `
 .break-inside-revert{break-inside:revert;}
 .break-after-column{break-after:column;}
 .break-after-unset{break-after:unset;}
-.-space-x-4>: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));}
+.-space-x-4>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(calc(1rem * calc(1 - var(--un-space-x-reverse))) * -1);margin-right:calc(calc(1rem * var(--un-space-x-reverse)) * -1);}
 .space-x-\\\\$space>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(var(--space) * calc(1 - var(--un-space-x-reverse)));margin-right:calc(var(--space) * var(--un-space-x-reverse));}
 .space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.5rem * var(--un-space-x-reverse));}
 .space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}

test/assets/preset-mini-targets.ts

@@ -869,6 +869,9 @@ export const presetMiniTargets: string[] = [
   'important:p-3',
   'sm:important:p-3',
   'p3!',
+  '-mt-safe',
+  '-!mb-safe',
+  '!-ms-safe',
 
   // variants class
   'all-[.target]-[combinator:test-2]',

test/preset-mini.test.ts

@@ -23,6 +23,9 @@ const uno = createGenerator({
         camelCase: '#234',
       },
     },
+    spacing: {
+      safe: 'max(env(safe-area-inset-left), env(safe-area-inset-right))',
+    },
   },
 })