Skip to content

Commit 6e55976

Browse files
adamwathanadamwathan
committed
Add totally arbitrary value support for min/max height/width
1 parent c9263a1 commit 6e55976

File tree

6 files changed

+60
-16
lines changed

6 files changed

+60
-16
lines changed

‎src/corePlugins/maxHeight.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2-
const { asLength, nameClass } = require('../pluginUtils')
1+
const { asValue, nameClass } = require('../pluginUtils')
32

4-
module.exports = function ({ matchUtilities, jit: { theme } }) {
3+
module.exports = function ({ matchUtilities }) {
54
matchUtilities({
65
'max-h': (modifier, { theme }) => {
7-
let value = asLength(modifier, theme['maxHeight'])
6+
let value = asValue(modifier, theme['maxHeight'])
87

98
if (value === undefined) {
109
return []

‎src/corePlugins/maxWidth.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2-
const { asLength, nameClass } = require('../pluginUtils')
1+
const { asValue, nameClass } = require('../pluginUtils')
32

4-
module.exports = function ({ matchUtilities, jit: { theme } }) {
3+
module.exports = function ({ matchUtilities }) {
54
matchUtilities({
65
'max-w': (modifier, { theme }) => {
7-
let value = asLength(modifier, theme['maxWidth'])
6+
let value = asValue(modifier, theme['maxWidth'])
87

98
if (value === undefined) {
109
return []

‎src/corePlugins/minHeight.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2-
const { asLength, nameClass } = require('../pluginUtils')
1+
const { asValue, nameClass } = require('../pluginUtils')
32

4-
module.exports = function ({ matchUtilities, jit: { theme } }) {
3+
module.exports = function ({ matchUtilities }) {
54
matchUtilities({
65
'min-h': (modifier, { theme }) => {
7-
let value = asLength(modifier, theme['minHeight'])
6+
let value = asValue(modifier, theme['minHeight'])
87

98
if (value === undefined) {
109
return []

‎src/corePlugins/minWidth.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2-
const { asLength, nameClass } = require('../pluginUtils')
1+
const { asValue, nameClass } = require('../pluginUtils')
32

4-
module.exports = function ({ matchUtilities, jit: { theme } }) {
3+
module.exports = function ({ matchUtilities }) {
54
matchUtilities({
65
'min-w': (modifier, { theme }) => {
7-
let value = asLength(modifier, theme['minWidth'])
6+
let value = asValue(modifier, theme['minWidth'])
87

98
if (value === undefined) {
109
return []

‎tests/08-arbitrary-values.test.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,24 @@
2525
.h-\[var\(--height\)\] {
2626
height: var(--height);
2727
}
28+
.max-h-\[3\.23rem\] {
29+
max-height: 3.23rem;
30+
}
31+
.max-h-\[calc\(100\%\+1rem\)\] {
32+
max-height: calc(100% + 1rem);
33+
}
34+
.max-h-\[var\(--height\)\] {
35+
max-height: var(--height);
36+
}
37+
.min-h-\[3\.23rem\] {
38+
min-height: 3.23rem;
39+
}
40+
.min-h-\[calc\(100\%\+1rem\)\] {
41+
min-height: calc(100% + 1rem);
42+
}
43+
.min-h-\[var\(--height\)\] {
44+
min-height: var(--height);
45+
}
2846
.w-\[3\.23rem\] {
2947
width: 3.23rem;
3048
}
@@ -34,6 +52,24 @@
3452
.w-\[var\(--width\)\] {
3553
width: var(--width);
3654
}
55+
.min-w-\[3\.23rem\] {
56+
min-width: 3.23rem;
57+
}
58+
.min-w-\[calc\(100\%\+1rem\)\] {
59+
min-width: calc(100% + 1rem);
60+
}
61+
.min-w-\[var\(--width\)\] {
62+
min-width: var(--width);
63+
}
64+
.max-w-\[3\.23rem\] {
65+
max-width: 3.23rem;
66+
}
67+
.max-w-\[calc\(100\%\+1rem\)\] {
68+
max-width: calc(100% + 1rem);
69+
}
70+
.max-w-\[var\(--width\)\] {
71+
max-width: var(--width);
72+
}
3773
.rotate-\[23deg\] {
3874
--tw-rotate: 23deg;
3975
}

‎tests/08-arbitrary-values.test.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,21 @@
1717
<div class="w-[3.23rem]"></div>
1818
<div class="w-[calc(100%+1rem)]"></div>
1919
<div class="w-[var(--width)]"></div>
20+
<div class="min-w-[3.23rem]"></div>
21+
<div class="min-w-[calc(100%+1rem)]"></div>
22+
<div class="min-w-[var(--width)]"></div>
23+
<div class="max-w-[3.23rem]"></div>
24+
<div class="max-w-[calc(100%+1rem)]"></div>
25+
<div class="max-w-[var(--width)]"></div>
2026
<div class="h-[3.23rem]"></div>
2127
<div class="h-[calc(100%+1rem)]"></div>
2228
<div class="h-[var(--height)]"></div>
29+
<div class="min-h-[3.23rem]"></div>
30+
<div class="min-h-[calc(100%+1rem)]"></div>
31+
<div class="min-h-[var(--height)]"></div>
32+
<div class="max-h-[3.23rem]"></div>
33+
<div class="max-h-[calc(100%+1rem)]"></div>
34+
<div class="max-h-[var(--height)]"></div>
2335
<div class="space-x-[20cm]"></div>
2436
<div class="space-x-[calc(20%-1cm)]"></div>
2537
<div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>

0 commit comments

Comments
 (0)