Skip to content

Commit 8b2473f

Browse files
adamwathanadamwathan
authored
Merge pull request #1584 from tailwindcss/stack-divide-utilities
Add `space` and `divide` utilities
2 parents 3584791 + 0f54a60 commit 8b2473f

File tree

11 files changed

+1377
-1
lines changed

11 files changed

+1377
-1
lines changed

‎__tests__/fixtures/tailwind-output-important.css‎

Lines changed: 568 additions & 0 deletions
Large diffs are not rendered by default.

‎__tests__/fixtures/tailwind-output.css‎

Lines changed: 568 additions & 0 deletions
Large diffs are not rendered by default.

‎__tests__/plugins/divideColor.test.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import invokePlugin from '../util/invokePlugin'
2+
import plugin from '../../src/plugins/divideColor'
3+
4+
test('generating divide color utilities', () => {
5+
const config = {
6+
theme: {
7+
divideColor: {
8+
default: 'orange', // This should be ignored
9+
purple: 'purple',
10+
white: {
11+
25: 'rgba(255,255,255,.25)',
12+
50: 'rgba(255,255,255,.5)',
13+
75: 'rgba(255,255,255,.75)',
14+
default: '#fff',
15+
},
16+
red: {
17+
1: 'rgb(33,0,0)',
18+
2: 'rgb(67,0,0)',
19+
3: 'rgb(100,0,0)',
20+
},
21+
green: {
22+
1: 'rgb(0,33,0)',
23+
2: 'rgb(0,67,0)',
24+
3: 'rgb(0,100,0)',
25+
},
26+
blue: {
27+
1: 'rgb(0,0,33)',
28+
2: 'rgb(0,0,67)',
29+
3: 'rgb(0,0,100)',
30+
},
31+
},
32+
},
33+
variants: {
34+
divideColor: ['responsive'],
35+
},
36+
}
37+
38+
const { utilities } = invokePlugin(plugin(), config)
39+
40+
expect(utilities).toEqual([
41+
[
42+
{
43+
'.divide-purple > :not(template) ~ :not(template)': {
44+
'border-color': 'purple',
45+
},
46+
'.divide-white-25 > :not(template) ~ :not(template)': {
47+
'border-color': 'rgba(255,255,255,.25)',
48+
},
49+
'.divide-white-50 > :not(template) ~ :not(template)': {
50+
'border-color': 'rgba(255,255,255,.5)',
51+
},
52+
'.divide-white-75 > :not(template) ~ :not(template)': {
53+
'border-color': 'rgba(255,255,255,.75)',
54+
},
55+
'.divide-white > :not(template) ~ :not(template)': {
56+
'border-color': '#fff',
57+
},
58+
'.divide-red-1 > :not(template) ~ :not(template)': {
59+
'border-color': 'rgb(33,0,0)',
60+
},
61+
'.divide-red-2 > :not(template) ~ :not(template)': {
62+
'border-color': 'rgb(67,0,0)',
63+
},
64+
'.divide-red-3 > :not(template) ~ :not(template)': {
65+
'border-color': 'rgb(100,0,0)',
66+
},
67+
'.divide-green-1 > :not(template) ~ :not(template)': {
68+
'border-color': 'rgb(0,33,0)',
69+
},
70+
'.divide-green-2 > :not(template) ~ :not(template)': {
71+
'border-color': 'rgb(0,67,0)',
72+
},
73+
'.divide-green-3 > :not(template) ~ :not(template)': {
74+
'border-color': 'rgb(0,100,0)',
75+
},
76+
'.divide-blue-1 > :not(template) ~ :not(template)': {
77+
'border-color': 'rgb(0,0,33)',
78+
},
79+
'.divide-blue-2 > :not(template) ~ :not(template)': {
80+
'border-color': 'rgb(0,0,67)',
81+
},
82+
'.divide-blue-3 > :not(template) ~ :not(template)': {
83+
'border-color': 'rgb(0,0,100)',
84+
},
85+
},
86+
['responsive'],
87+
],
88+
])
89+
})

‎__tests__/plugins/divideWidth.test.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import invokePlugin from '../util/invokePlugin'
2+
import plugin from '../../src/plugins/divideWidth'
3+
4+
test('generating divide width utilities', () => {
5+
const config = {
6+
theme: {
7+
divideWidth: {
8+
default: '1px',
9+
'2': '2px',
10+
'4': '4px',
11+
'8': '8px',
12+
},
13+
},
14+
variants: {
15+
divideWidth: ['responsive'],
16+
},
17+
}
18+
19+
const { utilities } = invokePlugin(plugin(), config)
20+
21+
expect(utilities).toEqual([
22+
[
23+
{
24+
'.divide-y-2 > :not(template) ~ :not(template)': { 'border-top-width': '2px' },
25+
'.divide-x-2 > :not(template) ~ :not(template)': { 'border-left-width': '2px' },
26+
'.divide-y-4 > :not(template) ~ :not(template)': { 'border-top-width': '4px' },
27+
'.divide-x-4 > :not(template) ~ :not(template)': { 'border-left-width': '4px' },
28+
'.divide-y-8 > :not(template) ~ :not(template)': { 'border-top-width': '8px' },
29+
'.divide-x-8 > :not(template) ~ :not(template)': { 'border-left-width': '8px' },
30+
'.divide-y > :not(template) ~ :not(template)': { 'border-top-width': '1px' },
31+
'.divide-x > :not(template) ~ :not(template)': { 'border-left-width': '1px' },
32+
},
33+
['responsive'],
34+
],
35+
])
36+
})

‎__tests__/plugins/space.test.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import invokePlugin from '../util/invokePlugin'
2+
import plugin from '../../src/plugins/space'
3+
4+
test('generating space utilities', () => {
5+
const config = {
6+
theme: {
7+
space: {
8+
'1': '1px',
9+
'2': '2px',
10+
'4': '4px',
11+
'8': '8px',
12+
},
13+
},
14+
variants: {
15+
space: ['responsive'],
16+
},
17+
}
18+
19+
const { utilities } = invokePlugin(plugin(), config)
20+
21+
expect(utilities).toEqual([
22+
[
23+
{
24+
'.space-y-1 > :not(template) ~ :not(template)': { 'margin-top': '1px' },
25+
'.space-x-1 > :not(template) ~ :not(template)': { 'margin-left': '1px' },
26+
'.space-y-2 > :not(template) ~ :not(template)': { 'margin-top': '2px' },
27+
'.space-x-2 > :not(template) ~ :not(template)': { 'margin-left': '2px' },
28+
'.space-y-4 > :not(template) ~ :not(template)': { 'margin-top': '4px' },
29+
'.space-x-4 > :not(template) ~ :not(template)': { 'margin-left': '4px' },
30+
'.space-y-8 > :not(template) ~ :not(template)': { 'margin-top': '8px' },
31+
'.space-x-8 > :not(template) ~ :not(template)': { 'margin-left': '8px' },
32+
},
33+
['responsive'],
34+
],
35+
])
36+
})

‎__tests__/util/invokePlugin.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ export default function(plugin, config) {
2424
plugin(pluginApi)
2525

2626
return {
27-
utilities: addedUtilities,
27+
utilities: addedUtilities.map(([utilities, variants]) => [
28+
_.merge({}, ..._.castArray(utilities)),
29+
variants,
30+
]),
2831
}
2932
}

‎src/corePlugins.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import preflight from './plugins/preflight'
22
import container from './plugins/container'
3+
import space from './plugins/space'
4+
import divideWidth from './plugins/divideWidth'
5+
import divideColor from './plugins/divideColor'
36
import accessibility from './plugins/accessibility'
47
import appearance from './plugins/appearance'
58
import backgroundAttachment from './plugins/backgroundAttachment'
@@ -96,6 +99,9 @@ export default function({ corePlugins: corePluginConfig }) {
9699
return configurePlugins(corePluginConfig, {
97100
preflight,
98101
container,
102+
space,
103+
divideWidth,
104+
divideColor,
99105
accessibility,
100106
appearance,
101107
backgroundAttachment,

‎src/plugins/divideColor.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import _ from 'lodash'
2+
import flattenColorPalette from '../util/flattenColorPalette'
3+
4+
export default function() {
5+
return function({ addUtilities, e, theme, variants }) {
6+
const colors = flattenColorPalette(theme('divideColor'))
7+
8+
const utilities = _.fromPairs(
9+
_.map(_.omit(colors, 'default'), (value, modifier) => {
10+
return [
11+
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
12+
{
13+
'border-color': value,
14+
},
15+
]
16+
})
17+
)
18+
19+
addUtilities(utilities, variants('divideColor'))
20+
}
21+
}

‎src/plugins/divideWidth.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import _ from 'lodash'
2+
3+
export default function() {
4+
return function({ addUtilities, e, theme, variants }) {
5+
const generators = [
6+
(value, modifier) => ({
7+
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
8+
'border-top-width': `${value}`,
9+
},
10+
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
11+
'border-left-width': `${value}`,
12+
},
13+
}),
14+
]
15+
16+
const utilities = _.flatMap(generators, generator => {
17+
return _.flatMap(theme('divideWidth'), (value, modifier) => {
18+
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
19+
})
20+
})
21+
22+
addUtilities(utilities, variants('divideWidth'))
23+
}
24+
}

‎src/plugins/space.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import _ from 'lodash'
2+
3+
export default function() {
4+
return function({ addUtilities, e, theme, variants }) {
5+
const generators = [
6+
(size, modifier) => ({
7+
[`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
8+
'margin-top': `${size}`,
9+
},
10+
[`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
11+
'margin-left': `${size}`,
12+
},
13+
}),
14+
]
15+
16+
const utilities = _.flatMap(generators, generator => {
17+
return _.flatMap(theme('space'), generator)
18+
})
19+
20+
addUtilities(utilities, variants('space'))
21+
}
22+
}

0 commit comments

Comments
 (0)