Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Commit 09e7830

Browse files
adamwathanadamwathan
committed
Add initial dynamic value support
1 parent 4ca1c2f commit 09e7830

33 files changed

+257
-173
lines changed

‎src/corePlugins/backgroundColor.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').
33
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
44
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
55
const toColorValue = require('tailwindcss/lib/util/toColorValue').default
6+
const { asColor } = require('../pluginUtils')
67

78
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
89
let colorPalette = flattenColorPalette(theme.backgroundColor)
910

1011
addUtilities({
1112
bg: [
1213
(modifier, { theme }) => {
13-
let value = colorPalette[modifier]
14+
let value = asColor(modifier, colorPalette)
1415

1516
if (value === undefined) {
1617
return []

‎src/corePlugins/borderColor.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,21 @@ const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').
33
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
44
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
55
const toColorValue = require('tailwindcss/lib/util/toColorValue').default
6+
const { asColor } = require('../pluginUtils')
67

78
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
89
let colorPalette = flattenColorPalette(theme.borderColor)
910

1011
addUtilities({
1112
border: [
1213
(modifier, { theme }) => {
13-
if (modifier === 'DEFAULT' || colorPalette[modifier] === undefined) {
14+
if (modifier === 'DEFAULT') {
15+
return []
16+
}
17+
18+
let value = asColor(modifier, colorPalette)
19+
20+
if (value === undefined) {
1421
return []
1522
}
1623

‎src/corePlugins/borderRadius.js‎

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
const nameClass = require('tailwindcss/lib/util/nameClass').default
2-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2+
const { asLength } = require('../pluginUtils')
33

44
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
55
addUtilities({
66
rounded: [
77
(modifier, { theme }) => {
8-
if (modifier === '' || theme.borderRadius[modifier] === undefined) {
8+
let value = asLength(modifier, theme['borderRadius'])
9+
10+
if (value === undefined) {
911
return []
1012
}
1113

12-
return [[nameClass('rounded', modifier), { 'border-radius': theme.borderRadius[modifier] }]]
14+
return [[nameClass('rounded', modifier), { 'border-radius': value }]]
1315
},
1416
],
1517
})
1618
addUtilities({
1719
'rounded-t': [
1820
(modifier, { theme }) => {
19-
let transformValue = transformThemeValue('borderRadius')
20-
let value = transformValue(theme.borderRadius[modifier])
21+
let value = asLength(modifier, theme['borderRadius'])
2122

22-
if (modifier === '' || value === undefined) {
23+
if (value === undefined) {
2324
return []
2425
}
26+
2527
return [
2628
[
2729
nameClass('rounded-t', modifier),
@@ -32,10 +34,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
3234
],
3335
'rounded-r': [
3436
(modifier, { theme }) => {
35-
let transformValue = transformThemeValue('borderRadius')
36-
let value = transformValue(theme.borderRadius[modifier])
37+
let value = asLength(modifier, theme['borderRadius'])
3738

38-
if (modifier === '' || value === undefined) {
39+
if (value === undefined) {
3940
return []
4041
}
4142

@@ -49,10 +50,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
4950
],
5051
'rounded-b': [
5152
(modifier, { theme }) => {
52-
let transformValue = transformThemeValue('borderRadius')
53-
let value = transformValue(theme.borderRadius[modifier])
53+
let value = asLength(modifier, theme['borderRadius'])
5454

55-
if (modifier === '' || value === undefined) {
55+
if (value === undefined) {
5656
return []
5757
}
5858

@@ -66,10 +66,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
6666
],
6767
'rounded-l': [
6868
(modifier, { theme }) => {
69-
let transformValue = transformThemeValue('borderRadius')
70-
let value = transformValue(theme.borderRadius[modifier])
69+
let value = asLength(modifier, theme['borderRadius'])
7170

72-
if (modifier === '' || value === undefined) {
71+
if (value === undefined) {
7372
return []
7473
}
7574

@@ -85,10 +84,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
8584
addUtilities({
8685
'rounded-tl': [
8786
(modifier, { theme }) => {
88-
let transformValue = transformThemeValue('borderRadius')
89-
let value = transformValue(theme.borderRadius[modifier])
87+
let value = asLength(modifier, theme['borderRadius'])
9088

91-
if (modifier === '' || value === undefined) {
89+
if (value === undefined) {
9290
return []
9391
}
9492

@@ -97,10 +95,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
9795
],
9896
'rounded-tr': [
9997
(modifier, { theme }) => {
100-
let transformValue = transformThemeValue('borderRadius')
101-
let value = transformValue(theme.borderRadius[modifier])
98+
let value = asLength(modifier, theme['borderRadius'])
10299

103-
if (modifier === '' || value === undefined) {
100+
if (value === undefined) {
104101
return []
105102
}
106103

@@ -109,10 +106,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
109106
],
110107
'rounded-br': [
111108
(modifier, { theme }) => {
112-
let transformValue = transformThemeValue('borderRadius')
113-
let value = transformValue(theme.borderRadius[modifier])
109+
let value = asLength(modifier, theme['borderRadius'])
114110

115-
if (modifier === '' || value === undefined) {
111+
if (value === undefined) {
116112
return []
117113
}
118114

@@ -121,10 +117,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
121117
],
122118
'rounded-bl': [
123119
(modifier, { theme }) => {
124-
let transformValue = transformThemeValue('borderRadius')
125-
let value = transformValue(theme.borderRadius[modifier])
120+
let value = asLength(modifier, theme['borderRadius'])
126121

127-
if (modifier === '' || value === undefined) {
122+
if (value === undefined) {
128123
return []
129124
}
130125

‎src/corePlugins/borderWidth.js‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
const nameClass = require('tailwindcss/lib/util/nameClass').default
2-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2+
const { asLength } = require('../pluginUtils')
33

44
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
55
addUtilities({
66
border: [
77
(modifier, { theme }) => {
8-
let transformValue = transformThemeValue('borderWidth')
9-
let value = transformValue(theme.borderWidth[modifier])
8+
let value = asLength(modifier, theme['borderWidth'])
109

11-
if (modifier === '' || value === undefined) {
10+
if (value === undefined) {
1211
return []
1312
}
1413

@@ -19,10 +18,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
1918
addUtilities({
2019
'border-t': [
2120
(modifier, { theme }) => {
22-
let transformValue = transformThemeValue('borderWidth')
23-
let value = transformValue(theme.borderWidth[modifier])
21+
let value = asLength(modifier, theme['borderWidth'])
2422

25-
if (modifier === '' || value === undefined) {
23+
if (value === undefined) {
2624
return []
2725
}
2826

@@ -31,10 +29,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
3129
],
3230
'border-r': [
3331
(modifier, { theme }) => {
34-
let transformValue = transformThemeValue('borderWidth')
35-
let value = transformValue(theme.borderWidth[modifier])
32+
let value = asLength(modifier, theme['borderWidth'])
3633

37-
if (modifier === '' || value === undefined) {
34+
if (value === undefined) {
3835
return []
3936
}
4037

@@ -43,10 +40,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
4340
],
4441
'border-b': [
4542
(modifier, { theme }) => {
46-
let transformValue = transformThemeValue('borderWidth')
47-
let value = transformValue(theme.borderWidth[modifier])
43+
let value = asLength(modifier, theme['borderWidth'])
4844

49-
if (modifier === '' || value === undefined) {
45+
if (value === undefined) {
5046
return []
5147
}
5248

@@ -55,10 +51,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
5551
],
5652
'border-l': [
5753
(modifier, { theme }) => {
58-
let transformValue = transformThemeValue('borderWidth')
59-
let value = transformValue(theme.borderWidth[modifier])
54+
let value = asLength(modifier, theme['borderWidth'])
6055

61-
if (modifier === '' || value === undefined) {
56+
if (value === undefined) {
6257
return []
6358
}
6459

‎src/corePlugins/divideColor.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').
33
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
44
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
55
const toColorValue = require('tailwindcss/lib/util/toColorValue').default
6+
const { asColor } = require('../pluginUtils')
67

78
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
89
let colorPalette = flattenColorPalette(theme.divideColor)
@@ -11,7 +12,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
1112
addUtilities({
1213
divide: [
1314
(modifier, { theme }) => {
14-
if (modifier === '' || colorPalette[modifier] === undefined) {
15+
let value = asColor(modifier, colorPalette)
16+
17+
if (value === undefined) {
1518
return []
1619
}
1720

‎src/corePlugins/divideWidth.js‎

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

44
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
55
addUtilities({
66
'divide-x': [
77
(modifier, { theme }) => {
8-
let transformValue = transformThemeValue('divideWidth')
9-
let value = transformValue(theme.divideWidth[modifier])
8+
let value = asLength(modifier, theme['divideWidth'])
109

1110
if (value === undefined) {
1211
return []
@@ -26,8 +25,7 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
2625
],
2726
'divide-y': [
2827
(modifier, { theme }) => {
29-
let transformValue = transformThemeValue('divideWidth')
30-
let value = transformValue(theme.divideWidth[modifier])
28+
let value = asLength(modifier, theme['divideWidth'])
3129

3230
if (value === undefined) {
3331
return []

‎src/corePlugins/fill.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,21 @@ const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').
33
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
44
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
55
const toColorValue = require('tailwindcss/lib/util/toColorValue').default
6+
const { asColor } = require('../pluginUtils')
67

78
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
89
let colorPalette = flattenColorPalette(theme.fill)
910

1011
addUtilities({
1112
fill: [
1213
(modifier, { theme }) => {
13-
if (modifier === '' || colorPalette[modifier] === undefined) {
14+
let value = asColor(modifier, colorPalette)
15+
16+
if (value === undefined) {
1417
return []
1518
}
1619

17-
return [[nameClass('fill', modifier), { fill: toColorValue(colorPalette[modifier]) }]]
20+
return [[nameClass('fill', modifier), { fill: toColorValue(value) }]]
1821
},
1922
],
2023
})

‎src/corePlugins/fontSize.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const nameClass = require('tailwindcss/lib/util/nameClass').default
2+
const { asLength } = require('../pluginUtils')
23

34
function isPlainObject(value) {
45
return typeof value === 'object' && value !== null
@@ -11,7 +12,18 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
1112
let value = theme.fontSize[modifier]
1213

1314
if (value === undefined) {
14-
return []
15+
value = asLength(modifier, {})
16+
17+
return value === undefined
18+
? []
19+
: [
20+
[
21+
nameClass('text', modifier),
22+
{
23+
'font-size': value,
24+
},
25+
],
26+
]
1527
}
1628

1729
let [fontSize, options] = Array.isArray(value) ? value : [value]

‎src/corePlugins/gap.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
const nameClass = require('tailwindcss/lib/util/nameClass').default
2-
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
2+
const { asLength } = require('../pluginUtils')
33

44
module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
55
addUtilities({
66
gap: [
77
(modifier, { theme }) => {
8-
let transformValue = transformThemeValue('gap')
9-
let value = transformValue(theme.gap[modifier])
8+
let value = asLength(modifier, theme['gap'])
109

11-
if (modifier === '' || value === undefined) {
10+
if (value === undefined) {
1211
return []
1312
}
1413

@@ -19,10 +18,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
1918
addUtilities({
2019
'gap-x': [
2120
(modifier, { theme }) => {
22-
let transformValue = transformThemeValue('gap')
23-
let value = transformValue(theme.gap[modifier])
21+
let value = asLength(modifier, theme['gap'])
2422

25-
if (modifier === '' || value === undefined) {
23+
if (value === undefined) {
2624
return []
2725
}
2826

@@ -31,10 +29,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
3129
],
3230
'gap-y': [
3331
(modifier, { theme }) => {
34-
let transformValue = transformThemeValue('gap')
35-
let value = transformValue(theme.gap[modifier])
32+
let value = asLength(modifier, theme['gap'])
3633

37-
if (modifier === '' || value === undefined) {
34+
if (value === undefined) {
3835
return []
3936
}
4037

0 commit comments

Comments
 (0)