Add totally arbitrary value support for min/max height/width

tailwindlabs · Mar 19, 2021 · 6e55976 · 6e55976
1 parent c9263a1
commit 6e55976
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 16 deletions.
diff --git a/src/corePlugins/maxHeight.js b/src/corePlugins/maxHeight.js
@@ -1,10 +1,9 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'max-h': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['maxHeight'])
+      let value = asValue(modifier, theme['maxHeight'])
 
       if (value === undefined) {
         return []

diff --git a/src/corePlugins/maxWidth.js b/src/corePlugins/maxWidth.js
@@ -1,10 +1,9 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'max-w': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['maxWidth'])
+      let value = asValue(modifier, theme['maxWidth'])
 
       if (value === undefined) {
         return []

diff --git a/src/corePlugins/minHeight.js b/src/corePlugins/minHeight.js
@@ -1,10 +1,9 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'min-h': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['minHeight'])
+      let value = asValue(modifier, theme['minHeight'])
 
       if (value === undefined) {
         return []

diff --git a/src/corePlugins/minWidth.js b/src/corePlugins/minWidth.js
@@ -1,10 +1,9 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'min-w': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['minWidth'])
+      let value = asValue(modifier, theme['minWidth'])
 
       if (value === undefined) {
         return []

diff --git a/tests/08-arbitrary-values.test.css b/tests/08-arbitrary-values.test.css
@@ -25,6 +25,24 @@
 .h-\[var\(--height\)\] {
   height: var(--height);
 }
+.max-h-\[3\.23rem\] {
+  max-height: 3.23rem;
+}
+.max-h-\[calc\(100\%\+1rem\)\] {
+  max-height: calc(100% + 1rem);
+}
+.max-h-\[var\(--height\)\] {
+  max-height: var(--height);
+}
+.min-h-\[3\.23rem\] {
+  min-height: 3.23rem;
+}
+.min-h-\[calc\(100\%\+1rem\)\] {
+  min-height: calc(100% + 1rem);
+}
+.min-h-\[var\(--height\)\] {
+  min-height: var(--height);
+}
 .w-\[3\.23rem\] {
   width: 3.23rem;
 }
@@ -34,6 +52,24 @@
 .w-\[var\(--width\)\] {
   width: var(--width);
 }
+.min-w-\[3\.23rem\] {
+  min-width: 3.23rem;
+}
+.min-w-\[calc\(100\%\+1rem\)\] {
+  min-width: calc(100% + 1rem);
+}
+.min-w-\[var\(--width\)\] {
+  min-width: var(--width);
+}
+.max-w-\[3\.23rem\] {
+  max-width: 3.23rem;
+}
+.max-w-\[calc\(100\%\+1rem\)\] {
+  max-width: calc(100% + 1rem);
+}
+.max-w-\[var\(--width\)\] {
+  max-width: var(--width);
+}
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
 }

diff --git a/tests/08-arbitrary-values.test.html b/tests/08-arbitrary-values.test.html
@@ -17,9 +17,21 @@
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
     <div class="w-[var(--width)]"></div>
+    <div class="min-w-[3.23rem]"></div>
+    <div class="min-w-[calc(100%+1rem)]"></div>
+    <div class="min-w-[var(--width)]"></div>
+    <div class="max-w-[3.23rem]"></div>
+    <div class="max-w-[calc(100%+1rem)]"></div>
+    <div class="max-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="min-h-[3.23rem]"></div>
+    <div class="min-h-[calc(100%+1rem)]"></div>
+    <div class="min-h-[var(--height)]"></div>
+    <div class="max-h-[3.23rem]"></div>
+    <div class="max-h-[calc(100%+1rem)]"></div>
+    <div class="max-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>