Skip to content

Commit 9310efb

Browse files
adamwathanadamwathan
authored
Merge pull request #2031 from tailwindcss/simple-component-variants
Simpler support for responsive components and style layers
2 parents 37b96fc + 54f07e2 commit 9310efb

10 files changed

+829
-476
lines changed

‎__tests__/containerPlugin.test.js

Lines changed: 133 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,22 @@ test.only('options are not required', () => {
2525
const { components } = processPlugins([container()], config())
2626

2727
expect(css(components)).toMatchCss(`
28-
.container { width: 100% }
29-
@media (min-width: 576px) {
30-
.container { max-width: 576px }
31-
}
32-
@media (min-width: 768px) {
33-
.container { max-width: 768px }
34-
}
35-
@media (min-width: 992px) {
36-
.container { max-width: 992px }
37-
}
38-
@media (min-width: 1200px) {
39-
.container { max-width: 1200px }
28+
@layer components {
29+
@variants {
30+
.container { width: 100% }
31+
@media (min-width: 576px) {
32+
.container { max-width: 576px }
33+
}
34+
@media (min-width: 768px) {
35+
.container { max-width: 768px }
36+
}
37+
@media (min-width: 992px) {
38+
.container { max-width: 992px }
39+
}
40+
@media (min-width: 1200px) {
41+
.container { max-width: 1200px }
42+
}
43+
}
4044
}
4145
`)
4246
})
@@ -54,12 +58,16 @@ test.only('screens can be passed explicitly', () => {
5458
)
5559

5660
expect(css(components)).toMatchCss(`
57-
.container { width: 100% }
58-
@media (min-width: 400px) {
59-
.container { max-width: 400px }
60-
}
61-
@media (min-width: 500px) {
62-
.container { max-width: 500px }
61+
@layer components {
62+
@variants {
63+
.container { width: 100% }
64+
@media (min-width: 400px) {
65+
.container { max-width: 400px }
66+
}
67+
@media (min-width: 500px) {
68+
.container { max-width: 500px }
69+
}
70+
}
6371
}
6472
`)
6573
})
@@ -77,12 +85,16 @@ test.only('screens are ordered ascending by min-width', () => {
7785
)
7886

7987
expect(css(components)).toMatchCss(`
80-
.container { width: 100% }
81-
@media (min-width: 400px) {
82-
.container { max-width: 400px }
83-
}
84-
@media (min-width: 500px) {
85-
.container { max-width: 500px }
88+
@layer components {
89+
@variants {
90+
.container { width: 100% }
91+
@media (min-width: 400px) {
92+
.container { max-width: 400px }
93+
}
94+
@media (min-width: 500px) {
95+
.container { max-width: 500px }
96+
}
97+
}
8698
}
8799
`)
88100
})
@@ -104,12 +116,16 @@ test.only('screens are deduplicated by min-width', () => {
104116
)
105117

106118
expect(css(components)).toMatchCss(`
107-
.container { width: 100% }
108-
@media (min-width: 576px) {
109-
.container { max-width: 576px }
110-
}
111-
@media (min-width: 768px) {
112-
.container { max-width: 768px }
119+
@layer components {
120+
@variants {
121+
.container { width: 100% }
122+
@media (min-width: 576px) {
123+
.container { max-width: 576px }
124+
}
125+
@media (min-width: 768px) {
126+
.container { max-width: 768px }
127+
}
128+
}
113129
}
114130
`)
115131
})
@@ -127,22 +143,26 @@ test.only('the container can be centered by default', () => {
127143
)
128144

129145
expect(css(components)).toMatchCss(`
130-
.container {
131-
width: 100%;
132-
margin-right: auto;
133-
margin-left: auto
134-
}
135-
@media (min-width: 576px) {
136-
.container { max-width: 576px }
137-
}
138-
@media (min-width: 768px) {
139-
.container { max-width: 768px }
140-
}
141-
@media (min-width: 992px) {
142-
.container { max-width: 992px }
143-
}
144-
@media (min-width: 1200px) {
145-
.container { max-width: 1200px }
146+
@layer components {
147+
@variants {
148+
.container {
149+
width: 100%;
150+
margin-right: auto;
151+
margin-left: auto
152+
}
153+
@media (min-width: 576px) {
154+
.container { max-width: 576px }
155+
}
156+
@media (min-width: 768px) {
157+
.container { max-width: 768px }
158+
}
159+
@media (min-width: 992px) {
160+
.container { max-width: 992px }
161+
}
162+
@media (min-width: 1200px) {
163+
.container { max-width: 1200px }
164+
}
165+
}
146166
}
147167
`)
148168
})
@@ -160,22 +180,26 @@ test.only('horizontal padding can be included by default', () => {
160180
)
161181

162182
expect(css(components)).toMatchCss(`
163-
.container {
164-
width: 100%;
165-
padding-right: 2rem;
166-
padding-left: 2rem
167-
}
168-
@media (min-width: 576px) {
169-
.container { max-width: 576px }
170-
}
171-
@media (min-width: 768px) {
172-
.container { max-width: 768px }
173-
}
174-
@media (min-width: 992px) {
175-
.container { max-width: 992px }
176-
}
177-
@media (min-width: 1200px) {
178-
.container { max-width: 1200px }
183+
@layer components {
184+
@variants {
185+
.container {
186+
width: 100%;
187+
padding-right: 2rem;
188+
padding-left: 2rem
189+
}
190+
@media (min-width: 576px) {
191+
.container { max-width: 576px }
192+
}
193+
@media (min-width: 768px) {
194+
.container { max-width: 768px }
195+
}
196+
@media (min-width: 992px) {
197+
.container { max-width: 992px }
198+
}
199+
@media (min-width: 1200px) {
200+
.container { max-width: 1200px }
201+
}
202+
}
179203
}
180204
`)
181205
})
@@ -198,33 +222,37 @@ test.only('responsive horizontal padding can be included by default', () => {
198222
)
199223

200224
expect(css(components)).toMatchCss(`
201-
.container {
202-
width: 100%;
203-
padding-right: 1rem;
204-
padding-left: 1rem
205-
}
206-
@media (min-width: 576px) {
207-
.container {
208-
max-width: 576px;
209-
padding-right: 2rem;
210-
padding-left: 2rem
211-
}
212-
}
213-
@media (min-width: 768px) {
214-
.container { max-width: 768px }
215-
}
216-
@media (min-width: 992px) {
217-
.container {
218-
max-width: 992px;
219-
padding-right: 4rem;
220-
padding-left: 4rem
221-
}
222-
}
223-
@media (min-width: 1200px) {
224-
.container {
225-
max-width: 1200px;
226-
padding-right: 5rem;
227-
padding-left: 5rem
225+
@layer components {
226+
@variants {
227+
.container {
228+
width: 100%;
229+
padding-right: 1rem;
230+
padding-left: 1rem
231+
}
232+
@media (min-width: 576px) {
233+
.container {
234+
max-width: 576px;
235+
padding-right: 2rem;
236+
padding-left: 2rem
237+
}
238+
}
239+
@media (min-width: 768px) {
240+
.container { max-width: 768px }
241+
}
242+
@media (min-width: 992px) {
243+
.container {
244+
max-width: 992px;
245+
padding-right: 4rem;
246+
padding-left: 4rem
247+
}
248+
}
249+
@media (min-width: 1200px) {
250+
.container {
251+
max-width: 1200px;
252+
padding-right: 5rem;
253+
padding-left: 5rem
254+
}
255+
}
228256
}
229257
}
230258
`)
@@ -245,18 +273,22 @@ test.only('setting all options at once', () => {
245273
)
246274

247275
expect(css(components)).toMatchCss(`
248-
.container {
249-
width: 100%;
250-
margin-right: auto;
251-
margin-left: auto;
252-
padding-right: 2rem;
253-
padding-left: 2rem
254-
}
255-
@media (min-width: 400px) {
256-
.container { max-width: 400px }
257-
}
258-
@media (min-width: 500px) {
259-
.container { max-width: 500px }
276+
@layer components {
277+
@variants {
278+
.container {
279+
width: 100%;
280+
margin-right: auto;
281+
margin-left: auto;
282+
padding-right: 2rem;
283+
padding-left: 2rem
284+
}
285+
@media (min-width: 400px) {
286+
.container { max-width: 400px }
287+
}
288+
@media (min-width: 500px) {
289+
.container { max-width: 500px }
290+
}
291+
}
260292
}
261293
`)
262294
})

0 commit comments

Comments
 (0)