Skip to content

Commit 956133a

Browse files
adamwathanadamwathan
committed
Don't associate custom CSS with a layer by default
1 parent aae71c5 commit 956133a

File tree

2 files changed

+89
-198
lines changed

2 files changed

+89
-198
lines changed

‎__tests__/responsiveAtRule.test.js

Lines changed: 83 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,19 @@ test('it can generate responsive variants', () => {
1717
`
1818

1919
const output = `
20-
@layer utilities {
21-
.banana { color: yellow; }
22-
.chocolate { color: brown; }
23-
}
20+
.banana { color: yellow; }
21+
.chocolate { color: brown; }
2422
@media (min-width: 500px) {
25-
@layer utilities {
26-
.sm\\:banana { color: yellow; }
27-
.sm\\:chocolate { color: brown; }
28-
}
23+
.sm\\:banana { color: yellow; }
24+
.sm\\:chocolate { color: brown; }
2925
}
3026
@media (min-width: 750px) {
31-
@layer utilities {
32-
.md\\:banana { color: yellow; }
33-
.md\\:chocolate { color: brown; }
34-
}
27+
.md\\:banana { color: yellow; }
28+
.md\\:chocolate { color: brown; }
3529
}
3630
@media (min-width: 1000px) {
37-
@layer utilities {
38-
.lg\\:banana { color: yellow; }
39-
.lg\\:chocolate { color: brown; }
40-
}
31+
.lg\\:banana { color: yellow; }
32+
.lg\\:chocolate { color: brown; }
4133
}
4234
`
4335

@@ -67,27 +59,19 @@ test('it can generate responsive variants with a custom separator', () => {
6759
`
6860

6961
const output = `
70-
@layer utilities {
71-
.banana { color: yellow; }
72-
.chocolate { color: brown; }
73-
}
62+
.banana { color: yellow; }
63+
.chocolate { color: brown; }
7464
@media (min-width: 500px) {
75-
@layer utilities {
76-
.sm__banana { color: yellow; }
77-
.sm__chocolate { color: brown; }
78-
}
65+
.sm__banana { color: yellow; }
66+
.sm__chocolate { color: brown; }
7967
}
8068
@media (min-width: 750px) {
81-
@layer utilities {
82-
.md__banana { color: yellow; }
83-
.md__chocolate { color: brown; }
84-
}
69+
.md__banana { color: yellow; }
70+
.md__chocolate { color: brown; }
8571
}
8672
@media (min-width: 1000px) {
87-
@layer utilities {
88-
.lg__banana { color: yellow; }
89-
.lg__chocolate { color: brown; }
90-
}
73+
.lg__banana { color: yellow; }
74+
.lg__chocolate { color: brown; }
9175
}
9276
`
9377

@@ -118,31 +102,23 @@ test('it can generate responsive variants when classes have non-standard charact
118102
`
119103

120104
const output = `
121-
@layer utilities {
122-
.hover\\:banana { color: yellow; }
123-
.chocolate-2\\.5 { color: brown; }
124-
.group:hover .group-hover\\:toast { color: black; }
125-
}
105+
.hover\\:banana { color: yellow; }
106+
.chocolate-2\\.5 { color: brown; }
107+
.group:hover .group-hover\\:toast { color: black; }
126108
@media (min-width: 500px) {
127-
@layer utilities {
128-
.sm\\:hover\\:banana { color: yellow; }
129-
.sm\\:chocolate-2\\.5 { color: brown; }
130-
.group:hover .sm\\:group-hover\\:toast { color: black; }
109+
.sm\\:hover\\:banana { color: yellow; }
110+
.sm\\:chocolate-2\\.5 { color: brown; }
111+
.group:hover .sm\\:group-hover\\:toast { color: black; }
131112
}
132-
}
133113
@media (min-width: 750px) {
134-
@layer utilities {
135-
.md\\:hover\\:banana { color: yellow; }
136-
.md\\:chocolate-2\\.5 { color: brown; }
137-
.group:hover .md\\:group-hover\\:toast { color: black; }
114+
.md\\:hover\\:banana { color: yellow; }
115+
.md\\:chocolate-2\\.5 { color: brown; }
116+
.group:hover .md\\:group-hover\\:toast { color: black; }
138117
}
139-
}
140118
@media (min-width: 1000px) {
141-
@layer utilities {
142-
.lg\\:hover\\:banana { color: yellow; }
143-
.lg\\:chocolate-2\\.5 { color: brown; }
144-
.group:hover .lg\\:group-hover\\:toast { color: black; }
145-
}
119+
.lg\\:hover\\:banana { color: yellow; }
120+
.lg\\:chocolate-2\\.5 { color: brown; }
121+
.group:hover .lg\\:group-hover\\:toast { color: black; }
146122
}
147123
`
148124

@@ -177,36 +153,20 @@ test('responsive variants are grouped', () => {
177153
`
178154

179155
const output = `
180-
@layer utilities {
181-
.banana { color: yellow; }
182-
}
156+
.banana { color: yellow; }
183157
.apple { color: red; }
184-
@layer utilities {
185-
.chocolate { color: brown; }
186-
}
158+
.chocolate { color: brown; }
187159
@media (min-width: 500px) {
188-
@layer utilities {
189-
.sm\\:banana { color: yellow; }
190-
}
191-
@layer utilities {
192-
.sm\\:chocolate { color: brown; }
193-
}
160+
.sm\\:banana { color: yellow; }
161+
.sm\\:chocolate { color: brown; }
194162
}
195163
@media (min-width: 750px) {
196-
@layer utilities {
197-
.md\\:banana { color: yellow; }
198-
}
199-
@layer utilities {
200-
.md\\:chocolate { color: brown; }
201-
}
164+
.md\\:banana { color: yellow; }
165+
.md\\:chocolate { color: brown; }
202166
}
203167
@media (min-width: 1000px) {
204-
@layer utilities {
205-
.lg\\:banana { color: yellow; }
206-
}
207-
@layer utilities {
208-
.lg\\:chocolate { color: brown; }
209-
}
168+
.lg\\:banana { color: yellow; }
169+
.lg\\:chocolate { color: brown; }
210170
}
211171
`
212172

@@ -239,42 +199,36 @@ test('it can generate responsive variants for nested at-rules', () => {
239199
`
240200

241201
const output = `
242-
@layer utilities {
243-
.banana {
244-
color: yellow;
245-
}
202+
.banana {
203+
color: yellow;
204+
}
246205
247-
@supports(display: grid) {
248-
.grid\\:banana {
249-
color: blue;
250-
}
206+
@supports(display: grid) {
207+
.grid\\:banana {
208+
color: blue;
251209
}
252210
}
253211
254212
@media (min-width: 500px) {
255-
@layer utilities {
256-
.sm\\:banana {
257-
color: yellow;
258-
}
213+
.sm\\:banana {
214+
color: yellow;
215+
}
259216
260-
@supports(display: grid) {
261-
.sm\\:grid\\:banana {
262-
color: blue;
263-
}
217+
@supports(display: grid) {
218+
.sm\\:grid\\:banana {
219+
color: blue;
264220
}
265221
}
266222
}
267223
268224
@media (min-width: 1000px) {
269-
@layer utilities {
270-
.lg\\:banana {
271-
color: yellow;
272-
}
225+
.lg\\:banana {
226+
color: yellow;
227+
}
273228
274-
@supports(display: grid) {
275-
.lg\\:grid\\:banana {
276-
color: blue;
277-
}
229+
@supports(display: grid) {
230+
.lg\\:grid\\:banana {
231+
color: blue;
278232
}
279233
}
280234
}
@@ -310,47 +264,41 @@ test('it can generate responsive variants for deeply nested at-rules', () => {
310264
`
311265

312266
const output = `
313-
@layer utilities {
314-
.banana {
315-
color: yellow;
316-
}
267+
.banana {
268+
color: yellow;
269+
}
317270
318-
@supports(display: grid) {
319-
@supports(display: flex) {
320-
.flex-grid\\:banana {
321-
color: blue;
322-
}
271+
@supports(display: grid) {
272+
@supports(display: flex) {
273+
.flex-grid\\:banana {
274+
color: blue;
323275
}
324276
}
325277
}
326278
327279
@media (min-width: 500px) {
328-
@layer utilities {
329-
.sm\\:banana {
330-
color: yellow;
331-
}
280+
.sm\\:banana {
281+
color: yellow;
282+
}
332283
333-
@supports(display: grid) {
334-
@supports(display: flex) {
335-
.sm\\:flex-grid\\:banana {
336-
color: blue;
337-
}
284+
@supports(display: grid) {
285+
@supports(display: flex) {
286+
.sm\\:flex-grid\\:banana {
287+
color: blue;
338288
}
339289
}
340290
}
341291
}
342292
343293
@media (min-width: 1000px) {
344-
@layer utilities {
345-
.lg\\:banana {
346-
color: yellow;
347-
}
294+
.lg\\:banana {
295+
color: yellow;
296+
}
348297
349-
@supports(display: grid) {
350-
@supports(display: flex) {
351-
.lg\\:flex-grid\\:banana {
352-
color: blue;
353-
}
298+
@supports(display: grid) {
299+
@supports(display: flex) {
300+
.lg\\:flex-grid\\:banana {
301+
color: blue;
354302
}
355303
}
356304
}
@@ -381,23 +329,15 @@ test('screen prefix is only applied to the last class in a selector', () => {
381329
`
382330

383331
const output = `
384-
@layer utilities {
385-
.banana li * .sandwich #foo > div { color: yellow; }
386-
}
332+
.banana li * .sandwich #foo > div { color: yellow; }
387333
@media (min-width: 500px) {
388-
@layer utilities {
389-
.banana li * .sm\\:sandwich #foo > div { color: yellow; }
390-
}
334+
.banana li * .sm\\:sandwich #foo > div { color: yellow; }
391335
}
392336
@media (min-width: 750px) {
393-
@layer utilities {
394-
.banana li * .md\\:sandwich #foo > div { color: yellow; }
395-
}
337+
.banana li * .md\\:sandwich #foo > div { color: yellow; }
396338
}
397339
@media (min-width: 1000px) {
398-
@layer utilities {
399-
.banana li * .lg\\:sandwich #foo > div { color: yellow; }
400-
}
340+
.banana li * .lg\\:sandwich #foo > div { color: yellow; }
401341
}
402342
`
403343

@@ -426,23 +366,15 @@ test('responsive variants are generated for all selectors in a rule', () => {
426366
`
427367

428368
const output = `
429-
@layer utilities {
430-
.foo, .bar { color: yellow; }
431-
}
369+
.foo, .bar { color: yellow; }
432370
@media (min-width: 500px) {
433-
@layer utilities {
434-
.sm\\:foo, .sm\\:bar { color: yellow; }
435-
}
371+
.sm\\:foo, .sm\\:bar { color: yellow; }
436372
}
437373
@media (min-width: 750px) {
438-
@layer utilities {
439-
.md\\:foo, .md\\:bar { color: yellow; }
440-
}
374+
.md\\:foo, .md\\:bar { color: yellow; }
441375
}
442376
@media (min-width: 1000px) {
443-
@layer utilities {
444-
.lg\\:foo, .lg\\:bar { color: yellow; }
445-
}
377+
.lg\\:foo, .lg\\:bar { color: yellow; }
446378
}
447379
`
448380

0 commit comments

Comments
 (0)