Skip to content

Commit 50de485

Browse files
adamwathanadamwathan
authored
Merge pull request #2032 from tailwindcss/container-variants
Add variants support to container plugin
2 parents 9310efb + f16919e commit 50de485

File tree

7 files changed

+507
-19
lines changed

7 files changed

+507
-19
lines changed

‎__tests__/containerPlugin.test.js

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function config(overrides) {
2121
})
2222
}
2323

24-
test.only('options are not required', () => {
24+
test('options are not required', () => {
2525
const { components } = processPlugins([container()], config())
2626

2727
expect(css(components)).toMatchCss(`
@@ -45,7 +45,7 @@ test.only('options are not required', () => {
4545
`)
4646
})
4747

48-
test.only('screens can be passed explicitly', () => {
48+
test('screens can be passed explicitly', () => {
4949
const { components } = processPlugins(
5050
[container()],
5151
config({
@@ -72,7 +72,7 @@ test.only('screens can be passed explicitly', () => {
7272
`)
7373
})
7474

75-
test.only('screens are ordered ascending by min-width', () => {
75+
test('screens are ordered ascending by min-width', () => {
7676
const { components } = processPlugins(
7777
[container()],
7878
config({
@@ -99,7 +99,7 @@ test.only('screens are ordered ascending by min-width', () => {
9999
`)
100100
})
101101

102-
test.only('screens are deduplicated by min-width', () => {
102+
test('screens are deduplicated by min-width', () => {
103103
const { components } = processPlugins(
104104
[container()],
105105
config({
@@ -130,7 +130,7 @@ test.only('screens are deduplicated by min-width', () => {
130130
`)
131131
})
132132

133-
test.only('the container can be centered by default', () => {
133+
test('the container can be centered by default', () => {
134134
const { components } = processPlugins(
135135
[container()],
136136
config({
@@ -167,7 +167,7 @@ test.only('the container can be centered by default', () => {
167167
`)
168168
})
169169

170-
test.only('horizontal padding can be included by default', () => {
170+
test('horizontal padding can be included by default', () => {
171171
const { components } = processPlugins(
172172
[container()],
173173
config({
@@ -204,7 +204,7 @@ test.only('horizontal padding can be included by default', () => {
204204
`)
205205
})
206206

207-
test.only('responsive horizontal padding can be included by default', () => {
207+
test('responsive horizontal padding can be included by default', () => {
208208
const { components } = processPlugins(
209209
[container()],
210210
config({
@@ -258,7 +258,7 @@ test.only('responsive horizontal padding can be included by default', () => {
258258
`)
259259
})
260260

261-
test.only('setting all options at once', () => {
261+
test('setting all options at once', () => {
262262
const { components } = processPlugins(
263263
[container()],
264264
config({
@@ -292,3 +292,39 @@ test.only('setting all options at once', () => {
292292
}
293293
`)
294294
})
295+
296+
test('container can use variants', () => {
297+
const { components } = processPlugins(
298+
[container()],
299+
config({
300+
theme: {
301+
container: {
302+
screens: ['400px', '500px'],
303+
},
304+
},
305+
variants: {
306+
container: ['responsive', 'hover'],
307+
},
308+
})
309+
)
310+
311+
expect(css(components)).toMatchCss(`
312+
@layer components {
313+
@variants responsive, hover {
314+
.container {
315+
width: 100%
316+
}
317+
@media (min-width: 400px) {
318+
.container {
319+
max-width: 400px
320+
}
321+
}
322+
@media (min-width: 500px) {
323+
.container {
324+
max-width: 500px
325+
}
326+
}
327+
}
328+
}
329+
`)
330+
})

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10956,6 +10956,34 @@ video {
1095610956
}
1095710957

1095810958
@media (min-width: 640px) {
10959+
.sm\:container {
10960+
width: 100%;
10961+
}
10962+
10963+
@media (min-width: 640px) {
10964+
.sm\:container {
10965+
max-width: 640px;
10966+
}
10967+
}
10968+
10969+
@media (min-width: 768px) {
10970+
.sm\:container {
10971+
max-width: 768px;
10972+
}
10973+
}
10974+
10975+
@media (min-width: 1024px) {
10976+
.sm\:container {
10977+
max-width: 1024px;
10978+
}
10979+
}
10980+
10981+
@media (min-width: 1280px) {
10982+
.sm\:container {
10983+
max-width: 1280px;
10984+
}
10985+
}
10986+
1095910987
.sm\:space-y-0 > :not(template) ~ :not(template) {
1096010988
margin-top: 0;
1096110989
}
@@ -21308,6 +21336,34 @@ video {
2130821336
}
2130921337

2131021338
@media (min-width: 768px) {
21339+
.md\:container {
21340+
width: 100%;
21341+
}
21342+
21343+
@media (min-width: 640px) {
21344+
.md\:container {
21345+
max-width: 640px;
21346+
}
21347+
}
21348+
21349+
@media (min-width: 768px) {
21350+
.md\:container {
21351+
max-width: 768px;
21352+
}
21353+
}
21354+
21355+
@media (min-width: 1024px) {
21356+
.md\:container {
21357+
max-width: 1024px;
21358+
}
21359+
}
21360+
21361+
@media (min-width: 1280px) {
21362+
.md\:container {
21363+
max-width: 1280px;
21364+
}
21365+
}
21366+
2131121367
.md\:space-y-0 > :not(template) ~ :not(template) {
2131221368
margin-top: 0;
2131321369
}
@@ -31660,6 +31716,34 @@ video {
3166031716
}
3166131717

3166231718
@media (min-width: 1024px) {
31719+
.lg\:container {
31720+
width: 100%;
31721+
}
31722+
31723+
@media (min-width: 640px) {
31724+
.lg\:container {
31725+
max-width: 640px;
31726+
}
31727+
}
31728+
31729+
@media (min-width: 768px) {
31730+
.lg\:container {
31731+
max-width: 768px;
31732+
}
31733+
}
31734+
31735+
@media (min-width: 1024px) {
31736+
.lg\:container {
31737+
max-width: 1024px;
31738+
}
31739+
}
31740+
31741+
@media (min-width: 1280px) {
31742+
.lg\:container {
31743+
max-width: 1280px;
31744+
}
31745+
}
31746+
3166331747
.lg\:space-y-0 > :not(template) ~ :not(template) {
3166431748
margin-top: 0;
3166531749
}
@@ -42012,6 +42096,34 @@ video {
4201242096
}
4201342097

4201442098
@media (min-width: 1280px) {
42099+
.xl\:container {
42100+
width: 100%;
42101+
}
42102+
42103+
@media (min-width: 640px) {
42104+
.xl\:container {
42105+
max-width: 640px;
42106+
}
42107+
}
42108+
42109+
@media (min-width: 768px) {
42110+
.xl\:container {
42111+
max-width: 768px;
42112+
}
42113+
}
42114+
42115+
@media (min-width: 1024px) {
42116+
.xl\:container {
42117+
max-width: 1024px;
42118+
}
42119+
}
42120+
42121+
@media (min-width: 1280px) {
42122+
.xl\:container {
42123+
max-width: 1280px;
42124+
}
42125+
}
42126+
4201542127
.xl\:space-y-0 > :not(template) ~ :not(template) {
4201642128
margin-top: 0;
4201742129
}

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14342,6 +14342,34 @@ video {
1434214342
}
1434314343

1434414344
@media (min-width: 640px) {
14345+
.sm\:container {
14346+
width: 100%;
14347+
}
14348+
14349+
@media (min-width: 640px) {
14350+
.sm\:container {
14351+
max-width: 640px;
14352+
}
14353+
}
14354+
14355+
@media (min-width: 768px) {
14356+
.sm\:container {
14357+
max-width: 768px;
14358+
}
14359+
}
14360+
14361+
@media (min-width: 1024px) {
14362+
.sm\:container {
14363+
max-width: 1024px;
14364+
}
14365+
}
14366+
14367+
@media (min-width: 1280px) {
14368+
.sm\:container {
14369+
max-width: 1280px;
14370+
}
14371+
}
14372+
1434514373
.sm\:space-y-0 > :not(template) ~ :not(template) {
1434614374
--space-y-reverse: 0 !important;
1434714375
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
@@ -28080,6 +28108,34 @@ video {
2808028108
}
2808128109

2808228110
@media (min-width: 768px) {
28111+
.md\:container {
28112+
width: 100%;
28113+
}
28114+
28115+
@media (min-width: 640px) {
28116+
.md\:container {
28117+
max-width: 640px;
28118+
}
28119+
}
28120+
28121+
@media (min-width: 768px) {
28122+
.md\:container {
28123+
max-width: 768px;
28124+
}
28125+
}
28126+
28127+
@media (min-width: 1024px) {
28128+
.md\:container {
28129+
max-width: 1024px;
28130+
}
28131+
}
28132+
28133+
@media (min-width: 1280px) {
28134+
.md\:container {
28135+
max-width: 1280px;
28136+
}
28137+
}
28138+
2808328139
.md\:space-y-0 > :not(template) ~ :not(template) {
2808428140
--space-y-reverse: 0 !important;
2808528141
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
@@ -41818,6 +41874,34 @@ video {
4181841874
}
4181941875

4182041876
@media (min-width: 1024px) {
41877+
.lg\:container {
41878+
width: 100%;
41879+
}
41880+
41881+
@media (min-width: 640px) {
41882+
.lg\:container {
41883+
max-width: 640px;
41884+
}
41885+
}
41886+
41887+
@media (min-width: 768px) {
41888+
.lg\:container {
41889+
max-width: 768px;
41890+
}
41891+
}
41892+
41893+
@media (min-width: 1024px) {
41894+
.lg\:container {
41895+
max-width: 1024px;
41896+
}
41897+
}
41898+
41899+
@media (min-width: 1280px) {
41900+
.lg\:container {
41901+
max-width: 1280px;
41902+
}
41903+
}
41904+
4182141905
.lg\:space-y-0 > :not(template) ~ :not(template) {
4182241906
--space-y-reverse: 0 !important;
4182341907
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
@@ -55556,6 +55640,34 @@ video {
5555655640
}
5555755641

5555855642
@media (min-width: 1280px) {
55643+
.xl\:container {
55644+
width: 100%;
55645+
}
55646+
55647+
@media (min-width: 640px) {
55648+
.xl\:container {
55649+
max-width: 640px;
55650+
}
55651+
}
55652+
55653+
@media (min-width: 768px) {
55654+
.xl\:container {
55655+
max-width: 768px;
55656+
}
55657+
}
55658+
55659+
@media (min-width: 1024px) {
55660+
.xl\:container {
55661+
max-width: 1024px;
55662+
}
55663+
}
55664+
55665+
@media (min-width: 1280px) {
55666+
.xl\:container {
55667+
max-width: 1280px;
55668+
}
55669+
}
55670+
5555955671
.xl\:space-y-0 > :not(template) ~ :not(template) {
5556055672
--space-y-reverse: 0 !important;
5556155673
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;

0 commit comments

Comments
 (0)