Skip to content

Commit daea662

Browse files
adamwathanadamwathan
authored
Merge pull request #852 from tailwindcss/global-variants
Support configuring a single list of variants to apply to all relevant plugins
2 parents 43f63bf + f0bc35a commit daea662

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+255
-128
lines changed

‎__tests__/plugins/backgroundColor.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
4040
const pluginApi = {
4141
config: (key, defaultValue) => _.get(config, key, defaultValue),
4242
e: escapeClassName,
43+
variants: (path, defaultValue) => {
44+
if (_.isArray(config.variants)) {
45+
return config.variants
46+
}
47+
48+
return _.get(config.variants, path, defaultValue)
49+
},
4350
addUtilities(utilities, variants) {
4451
addedUtilities.push({
4552
utilities,

‎__tests__/plugins/borderColor.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
4040
const pluginApi = {
4141
config: (key, defaultValue) => _.get(config, key, defaultValue),
4242
e: escapeClassName,
43+
variants: (path, defaultValue) => {
44+
if (_.isArray(config.variants)) {
45+
return config.variants
46+
}
47+
48+
return _.get(config.variants, path, defaultValue)
49+
},
4350
addUtilities(utilities, variants) {
4451
addedUtilities.push({
4552
utilities,

‎__tests__/plugins/fill.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
4040
const pluginApi = {
4141
config: (key, defaultValue) => _.get(config, key, defaultValue),
4242
e: escapeClassName,
43+
variants: (path, defaultValue) => {
44+
if (_.isArray(config.variants)) {
45+
return config.variants
46+
}
47+
48+
return _.get(config.variants, path, defaultValue)
49+
},
4350
addUtilities(utilities, variants) {
4451
addedUtilities.push({
4552
utilities,

‎__tests__/plugins/stroke.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
4040
const pluginApi = {
4141
config: (key, defaultValue) => _.get(config, key, defaultValue),
4242
e: escapeClassName,
43+
variants: (path, defaultValue) => {
44+
if (_.isArray(config.variants)) {
45+
return config.variants
46+
}
47+
48+
return _.get(config.variants, path, defaultValue)
49+
},
4350
addUtilities(utilities, variants) {
4451
addedUtilities.push({
4552
utilities,

‎__tests__/plugins/textColor.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
4040
const pluginApi = {
4141
config: (key, defaultValue) => _.get(config, key, defaultValue),
4242
e: escapeClassName,
43+
variants: (path, defaultValue) => {
44+
if (_.isArray(config.variants)) {
45+
return config.variants
46+
}
47+
48+
return _.get(config.variants, path, defaultValue)
49+
},
4350
addUtilities(utilities, variants) {
4451
addedUtilities.push({
4552
utilities,

‎__tests__/processPlugins.test.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -657,6 +657,91 @@ test('plugins can access the current config', () => {
657657
`)
658658
})
659659

660+
test('plugins can access the variants config directly', () => {
661+
const { components, utilities } = processPlugins(
662+
[
663+
function({ addUtilities, variants }) {
664+
addUtilities(
665+
{
666+
'.object-fill': {
667+
'object-fit': 'fill',
668+
},
669+
'.object-contain': {
670+
'object-fit': 'contain',
671+
},
672+
'.object-cover': {
673+
'object-fit': 'cover',
674+
},
675+
},
676+
variants('objectFit')
677+
)
678+
},
679+
],
680+
makeConfig({
681+
variants: {
682+
objectFit: ['responsive', 'focus', 'hover'],
683+
},
684+
})
685+
)
686+
687+
expect(components.length).toBe(0)
688+
expect(css(utilities)).toMatchCss(`
689+
@variants responsive, focus, hover {
690+
.object-fill {
691+
object-fit: fill
692+
}
693+
.object-contain {
694+
object-fit: contain
695+
}
696+
.object-cover {
697+
object-fit: cover
698+
}
699+
}
700+
`)
701+
})
702+
703+
test('plugins apply all global variants when variants are configured globally', () => {
704+
const { components, utilities } = processPlugins(
705+
[
706+
function({ addUtilities, variants }) {
707+
addUtilities(
708+
{
709+
'.object-fill': {
710+
'object-fit': 'fill',
711+
},
712+
},
713+
variants('objectFit')
714+
)
715+
addUtilities(
716+
{
717+
'.rotate-90deg': {
718+
transform: 'rotate(90deg)',
719+
},
720+
},
721+
variants('rotate')
722+
)
723+
},
724+
],
725+
makeConfig({
726+
variants: ['responsive', 'focus', 'hover'],
727+
})
728+
)
729+
730+
expect(components.length).toBe(0)
731+
expect(css(utilities)).toMatchCss(`
732+
@variants responsive, focus, hover {
733+
.object-fill {
734+
object-fit: fill
735+
}
736+
}
737+
@variants responsive, focus, hover {
738+
.rotate-90deg {
739+
transform: rotate(90deg)
740+
}
741+
}
742+
`)
743+
})
744+
660745
test('plugins can provide fallbacks to keys missing from the config', () => {
661746
const { components, utilities } = processPlugins(
662747
[

‎src/plugins/alignContent.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.content-center': {
@@ -18,7 +18,7 @@ export default function() {
1818
'align-content': 'space-around',
1919
},
2020
},
21-
config('variants.alignContent')
21+
variants('alignContent')
2222
)
2323
}
2424
}

‎src/plugins/alignItems.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.items-start': {
@@ -18,7 +18,7 @@ export default function() {
1818
'align-items': 'stretch',
1919
},
2020
},
21-
config('variants.alignItems')
21+
variants('alignItems')
2222
)
2323
}
2424
}

‎src/plugins/alignSelf.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.self-auto': {
@@ -18,7 +18,7 @@ export default function() {
1818
'align-self': 'stretch',
1919
},
2020
},
21-
config('variants.alignSelf')
21+
variants('alignSelf')
2222
)
2323
}
2424
}

‎src/plugins/appearance.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.appearance-none': { appearance: 'none' },
66
},
7-
config('variants.appearance')
7+
variants('appearance')
88
)
99
}
1010
}

‎src/plugins/backgroundAttachment.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.bg-fixed': { 'background-attachment': 'fixed' },
66
'.bg-local': { 'background-attachment': 'local' },
77
'.bg-scroll': { 'background-attachment': 'scroll' },
88
},
9-
config('variants.backgroundAttachment')
9+
variants('backgroundAttachment')
1010
)
1111
}
1212
}

‎src/plugins/backgroundColor.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import _ from 'lodash'
22
import flattenColorPalette from '../util/flattenColorPalette'
33

44
export default function() {
5-
return function({ addUtilities, e, config }) {
5+
return function({ addUtilities, e, config, variants }) {
66
const utilities = _.fromPairs(
77
_.map(flattenColorPalette(config('theme.backgroundColor')), (value, modifier) => {
88
return [
@@ -14,6 +14,6 @@ export default function() {
1414
})
1515
)
1616

17-
addUtilities(utilities, config('variants.backgroundColor'))
17+
addUtilities(utilities, variants('backgroundColor'))
1818
}
1919
}

‎src/plugins/backgroundPosition.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash'
22

33
export default function() {
4-
return function({ addUtilities, e, config }) {
4+
return function({ addUtilities, e, config, variants }) {
55
const utilities = _.fromPairs(
66
_.map(config('theme.backgroundPosition'), (value, modifier) => {
77
return [
@@ -13,6 +13,6 @@ export default function() {
1313
})
1414
)
1515

16-
addUtilities(utilities, config('variants.backgroundPosition'))
16+
addUtilities(utilities, variants('backgroundPosition'))
1717
}
1818
}

‎src/plugins/backgroundRepeat.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.bg-repeat': { 'background-repeat': 'repeat' },
66
'.bg-no-repeat': { 'background-repeat': 'no-repeat' },
77
'.bg-repeat-x': { 'background-repeat': 'repeat-x' },
88
'.bg-repeat-y': { 'background-repeat': 'repeat-y' },
99
},
10-
config('variants.backgroundRepeat')
10+
variants('backgroundRepeat')
1111
)
1212
}
1313
}

‎src/plugins/backgroundSize.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash'
22

33
export default function() {
4-
return function({ addUtilities, e, config }) {
4+
return function({ addUtilities, e, config, variants }) {
55
const utilities = _.fromPairs(
66
_.map(config('theme.backgroundSize'), (value, modifier) => {
77
return [
@@ -13,6 +13,6 @@ export default function() {
1313
})
1414
)
1515

16-
addUtilities(utilities, config('variants.backgroundSize'))
16+
addUtilities(utilities, variants('backgroundSize'))
1717
}
1818
}

‎src/plugins/borderCollapse.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.border-collapse': { 'border-collapse': 'collapse' },
66
'.border-separate': { 'border-collapse': 'separate' },
77
},
8-
config('variants.borderCollapse')
8+
variants('borderCollapse')
99
)
1010
}
1111
}

‎src/plugins/borderColor.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import _ from 'lodash'
22
import flattenColorPalette from '../util/flattenColorPalette'
33

44
export default function() {
5-
return function({ addUtilities, e, config }) {
5+
return function({ addUtilities, e, config, variants }) {
66
const colors = flattenColorPalette(config('theme.borderColor'))
77

88
const utilities = _.fromPairs(
@@ -16,6 +16,6 @@ export default function() {
1616
})
1717
)
1818

19-
addUtilities(utilities, config('variants.borderColor'))
19+
addUtilities(utilities, variants('borderColor'))
2020
}
2121
}

‎src/plugins/borderRadius.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash'
22

33
export default function() {
4-
return function({ addUtilities, e, config }) {
4+
return function({ addUtilities, e, config, variants }) {
55
const generators = [
66
(value, modifier) => ({
77
[`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
@@ -38,6 +38,6 @@ export default function() {
3838
})
3939
})
4040

41-
addUtilities(utilities, config('variants.borderRadius'))
41+
addUtilities(utilities, variants('borderRadius'))
4242
}
4343
}

‎src/plugins/borderStyle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default function() {
2-
return function({ addUtilities, config }) {
2+
return function({ addUtilities, variants }) {
33
addUtilities(
44
{
55
'.border-solid': {
@@ -15,7 +15,7 @@ export default function() {
1515
'border-style': 'none',
1616
},
1717
},
18-
config('variants.borderStyle')
18+
variants('borderStyle')
1919
)
2020
}
2121
}

‎src/plugins/borderWidth.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash'
22

33
export default function() {
4-
return function({ addUtilities, e, config }) {
4+
return function({ addUtilities, e, config, variants }) {
55
const generators = [
66
(value, modifier) => ({
77
[`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
@@ -20,6 +20,6 @@ export default function() {
2020
})
2121
})
2222

23-
addUtilities(utilities, config('variants.borderWidth'))
23+
addUtilities(utilities, variants('borderWidth'))
2424
}
2525
}

0 commit comments

Comments
 (0)