fix(preset-uno): insert spaces in calc, close #180

unocss · Nov 29, 2021 · 32489e4 · 32489e4
1 parent a4dac59
commit 32489e4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/packages/preset-uno/src/utils/handlers/handlers.ts b/packages/preset-uno/src/utils/handlers/handlers.ts
@@ -52,8 +52,14 @@ export function fraction(str: string) {
 }
 
 export function bracket(str: string) {
-  if (str && str[0] === '[' && str[str.length - 1] === ']')
-    return str.slice(1, -1).replace(/_/g, ' ')
+  if (str && str[0] === '[' && str[str.length - 1] === ']') {
+    return str
+      .slice(1, -1)
+      .replace(/_/g, ' ')
+      .replace(/calc\((.*)/g, (v) => {
+        return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+      })
+  }
 }
 
 export function cssvar(str: string) {

diff --git a/test/__snapshots__/preset-uno.test.ts.snap b/test/__snapshots__/preset-uno.test.ts.snap
@@ -217,6 +217,7 @@ exports[`targets 1`] = `
 .gap-4{grid-gap:1rem;gap:1rem;}
 .gap-x-1{grid-column-gap:0.25rem;column-gap:0.25rem;}
 .-gap-y-5{grid-row-gap:-1.25rem;row-gap:-1.25rem;}
+.h-\\\\[calc\\\\(1000px-4rem\\\\)\\\\]{height:calc(1000px - 4rem);}
 .h-\\\\$var{height:var(--var);}
 .h-1{height:0.25rem;}
 .h-1\\\\/4{height:25%;}
@@ -235,6 +236,7 @@ exports[`targets 1`] = `
 .min-w-full{min-width:100%;}
 .min-w-lg{min-width:32rem;}
 .min-w-none{min-width:none;}
+.w-\\\\[calc\\\\(calc\\\\(100px\\\\*10\\\\)-4rem\\\\)\\\\]{width:calc(calc(100px * 10) - 4rem);}
 .w-1{width:0.25rem;}
 .w-1\\\\/4{width:25%;}
 .w-21{width:5.25rem;}

diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts
@@ -268,6 +268,25 @@ const targets = [
   'mt-$height',
   'pt-$title2',
   'space-x-$space',
+  'outline-solid',
+  'outline-color-red-1',
+  'outline-width-10px',
+  'outline-inset',
+  'outline-110',
+  'outline-blue-2',
+  'outline-none',
+  'placeholder-color-red-1',
+  'placeholder-transparent',
+  'placeholder-opacity-60',
+  'select-none',
+  'ws-nowrap',
+  'b-2',
+  'v-top',
+  'v-mid',
+  'disabled:op50',
+  'h-[calc(1000px-4rem)]',
+  'w-[calc(calc(100px*10)-4rem)]',
+  // animation
   'animate-none',
   '!animate-ping',
   'animate-pulse',
@@ -288,22 +307,6 @@ const targets = [
   'animate-count-2.4',
   'animate-iteration-count-2',
   'animate-iteration-count-2-4-infinity',
-  'outline-solid',
-  'outline-color-red-1',
-  'outline-width-10px',
-  'outline-inset',
-  'outline-110',
-  'outline-blue-2',
-  'outline-none',
-  'placeholder-color-red-1',
-  'placeholder-transparent',
-  'placeholder-opacity-60',
-  'select-none',
-  'ws-nowrap',
-  'b-2',
-  'v-top',
-  'v-mid',
-  'disabled:op50',
   // grid
   'grid-cols-$1',
   'grid-cols-[1fr,2fr,100px,min-content]',