fix: missing spaces around arithmetic operators

tw-in-js · Oct 3, 2022 · f74163b · f74163b
1 parent d22ddb9
commit f74163b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/.changeset/tricky-kids-glow.md b/.changeset/tricky-kids-glow.md
@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+fix missing spaces around arithmetic operators
diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json
@@ -1991,6 +1991,9 @@
   "h-[calc(100%-theme(spacing.16))]": ".h-\\[calc\\(100\\%-theme\\(spacing\\.16\\)\\)\\]{height:calc(100% - 4rem)}",
   "h-[calc(100%-theme('spacing.16'))]": ".h-\\[calc\\(100\\%-theme\\(\\'spacing\\.16\\'\\)\\)\\]{height:calc(100% - 4rem)}",
   "h-[calc(100%-theme(\"spacing.16\"))]": ".h-\\[calc\\(100\\%-theme\\(\\\"spacing\\.16\\\"\\)\\)\\]{height:calc(100% - 4rem)}",
+  "h-[min(1+2)]": ".h-\\[min\\(1\\+2\\)\\]{height:min(1 + 2)}",
+  "h-[max(1+2)]": ".h-\\[max\\(1\\+2\\)\\]{height:max(1 + 2)}",
+  "h-[clamp(1+2,1+3,1+4)]": ".h-\\[clamp\\(1\\+2\\,1\\+3\\,1\\+4\\)\\]{height:clamp(1 + 2,1 + 3,1 + 4)}",
   "bg-gradient-to-r from-[#FF0000_50%] to-[#CCCC00_85%]": [
     ".bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}",
     ".from-\\[\\#FF0000_50\\%\\]{--tw-gradient-from:#FF0000 50%;--tw-gradient-to:#0000;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}",

diff --git a/packages/twind/src/rules.ts b/packages/twind/src/rules.ts
@@ -266,22 +266,23 @@ export function normalize(value: string): string {
     )
   }
 
-  // Convert `_` to ` `, except for escaped underscores `\_`
-  value = value
-    .replace(
-      /(^|[^\\])_+/g,
-      (fullMatch, characterBefore: string) =>
-        characterBefore + ' '.repeat(fullMatch.length - characterBefore.length),
-    )
-    .replace(/\\_/g, '_')
-
-  if (value.includes('calc(')) {
-    // Add spaces around operators inside calc() that do not follow an operator or '('.
-    value = value.replace(
-      /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
-      '$1 $2 ',
-    )
-  }
-
-  return value
+  return (
+    value
+      // Convert `_` to ` `, except for escaped underscores `\_`
+      .replace(
+        /(^|[^\\])_+/g,
+        (fullMatch, characterBefore: string) =>
+          characterBefore + ' '.repeat(fullMatch.length - characterBefore.length),
+      )
+      .replace(/\\_/g, '_')
+
+      // Add spaces around operators inside math functions like calc() that do not follow an operator
+      // or '('.
+      .replace(/(calc|min|max|clamp)\(.+\)/g, (match) =>
+        match.replace(
+          /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
+          '$1 $2 ',
+        ),
+      )
+  )
 }