feat: negate math function values (unocss/unocss#1688)

MellowCo · Oct 28, 2022 · 2f80e00 · 2f80e00
1 parent 2d12989
commit 2f80e00
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/src/variants/negative.ts b/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
           }

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -223,7 +223,10 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .mxy{margin:32rpx;}
 .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:0rpx;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1000,6 +1000,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]',

diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -24,6 +24,9 @@ const uno = createGenerator({
         camelCase: '#234',
       },
     },
+    spacing: {
+      safe: 'max(env(safe-area-inset-left), env(safe-area-inset-right))',
+    },
   },
 })