From 3616166565097fadb18b95dc747ea7c06559abd2 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 27 Jan 2023 16:29:42 +0300
Subject: [PATCH] fix(preset-mini): properly normalize subtraction followed by
 a variable (#2115)

---
 packages/preset-mini/src/_utils/handlers/handlers.ts | 11 +++++++++--
 test/__snapshots__/preset-mini.test.ts.snap          |  3 +++
 test/assets/preset-mini-targets.ts                   |  3 +++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/preset-mini/src/_utils/handlers/handlers.ts b/packages/preset-mini/src/_utils/handlers/handlers.ts
index 914c687766..cf5d9af88d 100644
--- a/packages/preset-mini/src/_utils/handlers/handlers.ts
+++ b/packages/preset-mini/src/_utils/handlers/handlers.ts
@@ -140,8 +140,15 @@ function bracketWithType(str: string, requiredType?: string) {
       .replace(/(url\(.*?\))/g, v => v.replace(/_/g, '\\_'))
       .replace(/(^|[^\\])_/g, '$1 ')
       .replace(/\\_/g, '_')
-      .replace(/(?:calc|clamp|max|min)\((.*)/g, (v) => {
-        return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+      .replace(/(?:calc|clamp|max|min)\((.*)/g, (match) => {
+        const vars: string[] = []
+        return match
+          .replace(/var\((--.+?)[,)]/g, (match, g1) => {
+            vars.push(g1)
+            return match.replace(g1, '--v')
+          })
+          .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+          .replace('--v', () => vars.shift()!)
       })
   }
 }
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index 04b869beca..741b5de4ce 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -690,6 +690,9 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .min-w-none{min-width:none;}
 .min-w-revert-layer{min-width:revert-layer;}
 .size-w-10{width:2.5rem;}
+.w-\\\\[calc\\\\(1-\\\\(\\\\(12-3\\\\)\\\\*0\\\\.5\\\\)\\\\)\\\\]{width:calc(1 - ((12 - 3) * 0.5));}
+.w-\\\\[calc\\\\(1-\\\\(var\\\\(--something\\\\)\\\\*0\\\\.5\\\\)\\\\)\\\\]{width:calc(1 - (var(--something) * 0.5));}
+.w-\\\\[calc\\\\(1-var\\\\(--something\\\\)\\\\*0\\\\.5\\\\)\\\\]{width:calc(1 - var(--something) * 0.5);}
 .w-\\\\[calc\\\\(calc\\\\(100px\\\\*10\\\\)-4rem\\\\)\\\\]{width:calc(calc(100px * 10) - 4rem);}
 .w-1{width:0.25rem;}
 .w-1\\\\/4{width:25%;}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
index 03c9a68767..df815bfa91 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -506,6 +506,9 @@ export const presetMiniTargets: string[] = [
   'h-$var',
   'h-[calc(1000px-4rem)]',
   'w-[calc(calc(100px*10)-4rem)]',
+  'w-[calc(1-var(--something)*0.5)]',
+  'w-[calc(1-(var(--something)*0.5))]',
+  'w-[calc(1-((12-3)*0.5))]',
   'size-w-10',
   'size-h-[calc(1000px-4rem)]',
   'size-min-w-full',