From b9327729b52ce436d654ce4033135bd151b49230 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 15 Jul 2020 14:13:27 -0400 Subject: [PATCH 1/2] Add variants support to container plugin --- __tests__/containerPlugin.test.js | 52 ++++++++++++++++++++++++++----- src/plugins/container.js | 25 ++++++++------- 2 files changed, 58 insertions(+), 19 deletions(-) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index ece318e290b0..68d0486bbdb3 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -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 + } + } + } + } + `) +}) diff --git a/src/plugins/container.js b/src/plugins/container.js index e3ad7803780f..440f323d6c6a 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -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') + ) } } From f16919e87bfebd5cf1b996a57a64b5c70c666a48 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 15 Jul 2020 14:14:30 -0400 Subject: [PATCH 2/2] Generate responsive variants for container by default --- __tests__/fixtures/tailwind-output-ie11.css | 112 ++++++++++++++++++ .../fixtures/tailwind-output-important.css | 112 ++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 112 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 112 ++++++++++++++++++ stubs/defaultConfig.stub.js | 1 + 5 files changed, 449 insertions(+) diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 2ff31ec314a6..760a22cf86e5 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -10956,6 +10956,34 @@ video { } @media (min-width: 640px) { + .sm\:container { + width: 100%; + } + + @media (min-width: 640px) { + .sm\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .sm\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .sm\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .sm\:container { + max-width: 1280px; + } + } + .sm\:space-y-0 > :not(template) ~ :not(template) { margin-top: 0; } @@ -21308,6 +21336,34 @@ video { } @media (min-width: 768px) { + .md\:container { + width: 100%; + } + + @media (min-width: 640px) { + .md\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .md\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .md\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .md\:container { + max-width: 1280px; + } + } + .md\:space-y-0 > :not(template) ~ :not(template) { margin-top: 0; } @@ -31660,6 +31716,34 @@ video { } @media (min-width: 1024px) { + .lg\:container { + width: 100%; + } + + @media (min-width: 640px) { + .lg\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .lg\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .lg\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .lg\:container { + max-width: 1280px; + } + } + .lg\:space-y-0 > :not(template) ~ :not(template) { margin-top: 0; } @@ -42012,6 +42096,34 @@ video { } @media (min-width: 1280px) { + .xl\:container { + width: 100%; + } + + @media (min-width: 640px) { + .xl\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .xl\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .xl\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .xl\:container { + max-width: 1280px; + } + } + .xl\:space-y-0 > :not(template) ~ :not(template) { margin-top: 0; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index ed825c0a4b00..0949bc69edae 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -14342,6 +14342,34 @@ video { } @media (min-width: 640px) { + .sm\:container { + width: 100%; + } + + @media (min-width: 640px) { + .sm\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .sm\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .sm\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .sm\:container { + max-width: 1280px; + } + } + .sm\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0 !important; margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important; @@ -28080,6 +28108,34 @@ video { } @media (min-width: 768px) { + .md\:container { + width: 100%; + } + + @media (min-width: 640px) { + .md\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .md\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .md\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .md\:container { + max-width: 1280px; + } + } + .md\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0 !important; margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important; @@ -41818,6 +41874,34 @@ video { } @media (min-width: 1024px) { + .lg\:container { + width: 100%; + } + + @media (min-width: 640px) { + .lg\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .lg\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .lg\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .lg\:container { + max-width: 1280px; + } + } + .lg\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0 !important; margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important; @@ -55556,6 +55640,34 @@ video { } @media (min-width: 1280px) { + .xl\:container { + width: 100%; + } + + @media (min-width: 640px) { + .xl\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .xl\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .xl\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .xl\:container { + max-width: 1280px; + } + } + .xl\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0 !important; margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important; diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 059e6bc824a2..cc84a1b6e569 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -11894,6 +11894,34 @@ video { } @media (min-width: 640px) { + .sm\:container { + width: 100%; + } + + @media (min-width: 640px) { + .sm\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .sm\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .sm\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .sm\:container { + max-width: 1280px; + } + } + .sm\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); @@ -23184,6 +23212,34 @@ video { } @media (min-width: 768px) { + .md\:container { + width: 100%; + } + + @media (min-width: 640px) { + .md\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .md\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .md\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .md\:container { + max-width: 1280px; + } + } + .md\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); @@ -34474,6 +34530,34 @@ video { } @media (min-width: 1024px) { + .lg\:container { + width: 100%; + } + + @media (min-width: 640px) { + .lg\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .lg\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .lg\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .lg\:container { + max-width: 1280px; + } + } + .lg\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); @@ -45764,6 +45848,34 @@ video { } @media (min-width: 1280px) { + .xl\:container { + width: 100%; + } + + @media (min-width: 640px) { + .xl\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .xl\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .xl\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .xl\:container { + max-width: 1280px; + } + } + .xl\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index d76dd1e914ba..97596e0bc334 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -14342,6 +14342,34 @@ video { } @media (min-width: 640px) { + .sm\:container { + width: 100%; + } + + @media (min-width: 640px) { + .sm\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .sm\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .sm\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .sm\:container { + max-width: 1280px; + } + } + .sm\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); @@ -28080,6 +28108,34 @@ video { } @media (min-width: 768px) { + .md\:container { + width: 100%; + } + + @media (min-width: 640px) { + .md\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .md\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .md\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .md\:container { + max-width: 1280px; + } + } + .md\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); @@ -41818,6 +41874,34 @@ video { } @media (min-width: 1024px) { + .lg\:container { + width: 100%; + } + + @media (min-width: 640px) { + .lg\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .lg\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .lg\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .lg\:container { + max-width: 1280px; + } + } + .lg\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); @@ -55556,6 +55640,34 @@ video { } @media (min-width: 1280px) { + .xl\:container { + width: 100%; + } + + @media (min-width: 640px) { + .xl\:container { + max-width: 640px; + } + } + + @media (min-width: 768px) { + .xl\:container { + max-width: 768px; + } + } + + @media (min-width: 1024px) { + .xl\:container { + max-width: 1024px; + } + } + + @media (min-width: 1280px) { + .xl\:container { + max-width: 1280px; + } + } + .xl\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--space-y-reverse))); diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 27b93a403180..bab7b16d4434 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -643,6 +643,7 @@ module.exports = { borderWidth: ['responsive'], boxShadow: ['responsive', 'hover', 'focus'], boxSizing: ['responsive'], + container: ['responsive'], cursor: ['responsive'], display: ['responsive'], divideColor: ['responsive'],