wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add variants support to container plugin

Browse source
This commit is contained in:
Adam Wathan 2020-07-15 14:13:27 -04:00
parent 9310efb26a
commit b9327729b5
2 changed files with 58 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

52
__tests__/containerPlugin.test.js
View file

@ -21,7 +21,7 @@ function config(overrides) {
})
}
test.only('options are not required', () => {
test('options are not required', () => {
const { components } = processPlugins([container()], config())
expect(css(components)).toMatchCss(`
@ -45,7 +45,7 @@ test.only('options are not required', () => {
`)
})
test.only('screens can be passed explicitly', () => {
test('screens can be passed explicitly', () => {
const { components } = processPlugins(
[container()],
config({
@ -72,7 +72,7 @@ test.only('screens can be passed explicitly', () => {
`)
})
test.only('screens are ordered ascending by min-width', () => {
test('screens are ordered ascending by min-width', () => {
const { components } = processPlugins(
[container()],
config({
@ -99,7 +99,7 @@ test.only('screens are ordered ascending by min-width', () => {
`)
})
test.only('screens are deduplicated by min-width', () => {
test('screens are deduplicated by min-width', () => {
const { components } = processPlugins(
[container()],
config({
@ -130,7 +130,7 @@ test.only('screens are deduplicated by min-width', () => {
`)
})
test.only('the container can be centered by default', () => {
test('the container can be centered by default', () => {
const { components } = processPlugins(
[container()],
config({
@ -167,7 +167,7 @@ test.only('the container can be centered by default', () => {
`)
})
test.only('horizontal padding can be included by default', () => {
test('horizontal padding can be included by default', () => {
const { components } = processPlugins(
[container()],
config({
@ -204,7 +204,7 @@ test.only('horizontal padding can be included by default', () => {
`)
})
test.only('responsive horizontal padding can be included by default', () => {
test('responsive horizontal padding can be included by default', () => {
const { components } = processPlugins(
[container()],
config({
@ -258,7 +258,7 @@ test.only('responsive horizontal padding can be included by default', () => {
`)
})
test.only('setting all options at once', () => {
test('setting all options at once', () => {
const { components } = processPlugins(
[container()],
config({
@ -292,3 +292,39 @@ test.only('setting all options at once', () => {
}
`)
})
test('container can use variants', () => {
const { components } = processPlugins(
[container()],
config({
theme: {
container: {
screens: ['400px', '500px'],
},
},
variants: {
container: ['responsive', 'hover'],
},
})
)
expect(css(components)).toMatchCss(`
@layer components {
@variants responsive, hover {
.container {
width: 100%
}
@media (min-width: 400px) {
.container {
max-width: 400px
}
}
@media (min-width: 500px) {
.container {
max-width: 500px
}
}
}
}
`)
})

25
src/plugins/container.js
View file

@ -63,7 +63,7 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) {
}
module.exports = function() {
return function({ addComponents, theme }) {
return function({ addComponents, theme, variants }) {
const screens = theme('container.screens', theme('screens'))
const minWidths = extractMinWidths(screens)
const paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'))
@ -96,15 +96,18 @@ module.exports = function() {
})
.value()
addComponents([
{
'.container': Object.assign(
{ width: '100%' },
theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
generatePaddingFor(0)
),
},
...atRules,
])
addComponents(
[
{
'.container': Object.assign(
{ width: '100%' },
theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
generatePaddingFor(0)
),
},
...atRules,
],
variants('container')
)
}
}