Add support for completely arbitrary width/height

Author: adamwathan

src/corePlugins/height.js

@@ -1,9 +1,9 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
 module.exports = function ({ matchUtilities, jit: { theme } }) {
   matchUtilities({
     h: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['height'])
+      let value = asValue(modifier, theme['height'])
 
       if (value === undefined) {
         return []

src/corePlugins/width.js

@@ -1,9 +1,9 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
 module.exports = function ({ matchUtilities, jit: { theme } }) {
   matchUtilities({
     w: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['width'])
+      let value = asValue(modifier, theme['width'])
 
       if (value === undefined) {
         return []

src/pluginUtils.js

@@ -111,7 +111,8 @@ function asValue(modifier, lookup = {}, { validate = () => true, transform = (v)
     return undefined
   }
 
-  return transform(value)
+  // add spaces around operators inside calc() that do not follow an operator or (
+  return transform(value).replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
 }
 
 function asUnit(modifier, units, lookup = {}) {
@@ -124,8 +125,7 @@ function asUnit(modifier, units, lookup = {}) {
       )
     },
     transform: (value) => {
-      // add spaces around operators inside calc() that do not follow an operator or (
-      return value.replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
+      return value
     },
   })
 }

tests/08-arbitrary-values.test.css

@@ -16,12 +16,24 @@
 .mt-\[clamp\(30px\2c 100px\)\] {
   margin-top: clamp(30px, 100px);
 }
+.h-\[3\.23rem\] {
+  height: 3.23rem;
+}
+.h-\[calc\(100\%\+1rem\)\] {
+  height: calc(100% + 1rem);
+}
+.h-\[var\(--height\)\] {
+  height: var(--height);
+}
 .w-\[3\.23rem\] {
   width: 3.23rem;
 }
 .w-\[calc\(100\%\+1rem\)\] {
   width: calc(100% + 1rem);
 }
+.w-\[var\(--width\)\] {
+  width: var(--width);
+}
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
 }

tests/08-arbitrary-values.test.html

@@ -16,6 +16,10 @@
     <div class="border-[2.5px]"></div>
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
+    <div class="w-[var(--width)]"></div>
+    <div class="h-[3.23rem]"></div>
+    <div class="h-[calc(100%+1rem)]"></div>
+    <div class="h-[var(--height)]"></div>
     <div class="space-x-[20cm]"></div>
     <div class="space-x-[calc(20%-1cm)]"></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>