fix: add whitespaces around operators in arbitrary calc (#390)

windicss · Jul 12, 2021 · 1c70709 · 1c70709
1 parent 728d187
commit 1c70709
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/src/lib/utilities/handler.ts b/src/lib/utilities/handler.ts
@@ -155,7 +155,10 @@ export function createHandler(handlers: Handlers = { static: true }): HandlerCre
       handleSquareBrackets: handlers.bracket ? (callback) => {
         if (handler.value) return handler;
         if (handler._amount[0] === '[' && handler._amount[handler._amount.length-1] === ']') {
-          const value = handler._amount.slice(1, -1).replace(/_/g, ' '); // replace _ to space
+          let value = handler._amount.slice(1, -1).replace(/_/g, ' '); // replace _ to space
+          if (value.indexOf('calc(') > -1) {
+            value = value.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ');
+          }
           handler.value = callback
             ? callback(value)
             : value;

diff --git a/test/processor/__snapshots__/interpret.test.ts.yml b/test/processor/__snapshots__/interpret.test.ts.yml
@@ -188,8 +188,8 @@ Tools / interpret square brackets / square brackets / 0: |-
   }
   .space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
-    margin-right: calc(calc(20%-1cm) * var(--tw-space-x-reverse));
-    margin-left: calc(calc(20%-1cm) * calc(1 - var(--tw-space-x-reverse)));
+    margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
+    margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
   }
   .bg-\[\#234\] {
     --tw-bg-opacity: 1;
@@ -284,7 +284,7 @@ Tools / interpret square brackets / square brackets / 0: |-
     height: 3.23rem;
   }
   .h-\[calc\(100\%\+1rem\)\] {
-    height: calc(100%+1rem);
+    height: calc(100% + 1rem);
   }
   .h-\[var\(--width\)\] {
     height: var(--width);
@@ -332,7 +332,7 @@ Tools / interpret square brackets / square brackets / 0: |-
     max-height: 3.23rem;
   }
   .max-h-\[calc\(100\%\+1rem\)\] {
-    max-height: calc(100%+1rem);
+    max-height: calc(100% + 1rem);
   }
   .max-h-\[var\(--width\)\] {
     max-height: var(--width);
@@ -341,7 +341,7 @@ Tools / interpret square brackets / square brackets / 0: |-
     max-width: 3.23rem;
   }
   .max-w-\[calc\(100\%\+1rem\)\] {
-    max-width: calc(100%+1rem);
+    max-width: calc(100% + 1rem);
   }
   .max-w-\[var\(--width\)\] {
     max-width: var(--width);
@@ -350,7 +350,7 @@ Tools / interpret square brackets / square brackets / 0: |-
     min-height: 3.23rem;
   }
   .min-h-\[calc\(100\%\+1rem\)\] {
-    min-height: calc(100%+1rem);
+    min-height: calc(100% + 1rem);
   }
   .min-h-\[var\(--width\)\] {
     min-height: var(--width);
@@ -359,7 +359,7 @@ Tools / interpret square brackets / square brackets / 0: |-
     min-width: 3.23rem;
   }
   .min-w-\[calc\(100\%\+1rem\)\] {
-    min-width: calc(100%+1rem);
+    min-width: calc(100% + 1rem);
   }
   .min-w-\[var\(--width\)\] {
     min-width: var(--width);
@@ -477,11 +477,20 @@ Tools / interpret square brackets / square brackets / 0: |-
     width: 3.23rem;
   }
   .w-\[calc\(100\%\+1rem\)\] {
-    width: calc(100%+1rem);
+    width: calc(100% + 1rem);
   }
   .w-\[var\(--width\)\] {
     width: var(--width);
   }
+  .w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
+    width: calc(var(--10-10px,calc(-20px - (-30px - -40px))) - 50px);
+  }
+  .w-\[calc\(var\(--10-10px\)\+20px\)\] {
+    width: calc(var(--10-10px) + 20px);
+  }
+  .w-\[calc\(var\(--test\)\+1px\)\] {
+    width: calc(var(--test) + 1px);
+  }
   .gap-\[4rem\] {
     grid-gap: 4rem;
     gap: 4rem;

diff --git a/test/processor/interpret.test.ts b/test/processor/interpret.test.ts
@@ -47,6 +47,9 @@ describe('Interpretation Mode', () => {
       max-w-[3.23rem] max-w-[calc(100%+1rem)] max-w-[var(--width)] max-h-[3.23rem] max-h-[calc(100%+1rem)] max-h-[var(--width)]
       min-h-[3.23rem] min-h-[calc(100%+1rem)] min-h-[var(--width)]
       min-w-[3.23rem] min-w-[calc(100%+1rem)] min-w-[var(--width)]
+      w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]
+      w-[calc(var(--10-10px)+20px)]
+      w-[calc(var(--test)+1px)]
       opacity-[var(--opacity)]
       outline-[var(--outline)]
       placeholder-[var(--placeholder)] placeholder-opacity-[var(--placeholder)]