fix(preset-mini): properly normalize subtraction followed by a variab…

…le (#2115)
unocss · Jan 27, 2023 · 3616166 · 3616166
1 parent 9951446
commit 3616166
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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',