diff options
author | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
commit | dd5f3c463fab336d694f426dcad11a1783590fc9 (patch) | |
tree | faebf738a9556eaa393371852ed86550d4adf66a /test/bem/_element.scss | |
parent | Fix errors from transition from node-sass to sass (diff) | |
download | iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2 iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip |
Ported from import syntax to modules
Diffstat (limited to 'test/bem/_element.scss')
-rw-r--r-- | test/bem/_element.scss | 494 |
1 files changed, 494 insertions, 0 deletions
diff --git a/test/bem/_element.scss b/test/bem/_element.scss new file mode 100644 index 0000000..c8839de --- /dev/null +++ b/test/bem/_element.scss | |||
@@ -0,0 +1,494 @@ | |||
1 | // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations | ||
2 | |||
3 | @use 'true' as *; | ||
4 | @use '../../src/bem'; | ||
5 | |||
6 | // | ||
7 | // Included test cases: | ||
8 | // - /// 1 /// - single element | ||
9 | // - /// 2 /// - single element, manual selector in-between | ||
10 | // - /// 3 /// - single element, modifier in-between | ||
11 | // - /// 4 /// - single element, nested | ||
12 | // - /// 5 /// - single element, nested, manual selector in-between | ||
13 | // - /// 6 /// - single element, nested, modifier in-between | ||
14 | // - /// 7 /// - single element, in at-theme | ||
15 | // - /// 8 /// - multiple elements | ||
16 | // - /// 9 /// - multiple elements, manual selector in-between | ||
17 | // - /// 10 /// - multiple elements, modifier in-between | ||
18 | // - /// 11 /// - multiple elements, nested | ||
19 | // - /// 12 /// - multiple elements, nested, manual selector in-between | ||
20 | // - /// 13 /// - multiple elements, nested, modifier in-between | ||
21 | // - /// 14 /// - single element, in at-theme | ||
22 | // | ||
23 | |||
24 | @include it('element') { | ||
25 | @include assert('single element') { /// 1 /// | ||
26 | @include output { | ||
27 | @include bem.block('something') { | ||
28 | @include bem.elem('child') { | ||
29 | font-size: 2em; | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | |||
34 | @include expect { | ||
35 | .something__child { | ||
36 | font-size: 2em; | ||
37 | } | ||
38 | } | ||
39 | } | ||
40 | |||
41 | @include assert('single element, manual selector in-between') { /// 2 /// | ||
42 | @include output(false) { | ||
43 | @include bem.block('something') { | ||
44 | &:hover { | ||
45 | @include bem.elem('child1') { | ||
46 | font-size: 2em; | ||
47 | } | ||
48 | } | ||
49 | |||
50 | .test & { | ||
51 | @include bem.elem('child2') { | ||
52 | font-size: 2em; | ||
53 | } | ||
54 | } | ||
55 | } | ||
56 | } | ||
57 | |||
58 | @include expect(false) { | ||
59 | .something:hover .something__child1 { | ||
60 | font-size: 2em; | ||
61 | } | ||
62 | |||
63 | .test .something__child2 { | ||
64 | font-size: 2em; | ||
65 | } | ||
66 | } | ||
67 | } | ||
68 | |||
69 | @include assert('single element, modifier in-between') { /// 3 /// | ||
70 | @include output { | ||
71 | @include bem.block('something') { | ||
72 | @include bem.modifier('mod') { | ||
73 | @include bem.elem('child') { | ||
74 | font-size: 2em; | ||
75 | } | ||
76 | } | ||
77 | } | ||
78 | } | ||
79 | |||
80 | @include expect { | ||
81 | .something--mod .something__child { | ||
82 | font-size: 2em; | ||
83 | } | ||
84 | } | ||
85 | } | ||
86 | |||
87 | @include assert('single element, nested') { /// 4 /// | ||
88 | @include output { | ||
89 | @include bem.block('something') { | ||
90 | @include bem.elem('child') { | ||
91 | font-size: 2em; | ||
92 | |||
93 | @include bem.elem('subchild') { | ||
94 | font-size: 3em; | ||
95 | } | ||
96 | } | ||
97 | } | ||
98 | } | ||
99 | |||
100 | @include expect { | ||
101 | .something__child { | ||
102 | font-size: 2em; | ||
103 | } | ||
104 | |||
105 | .something__child .something__subchild { | ||
106 | font-size: 3em; | ||
107 | } | ||
108 | } | ||
109 | } | ||
110 | |||
111 | @include assert('single element, nested, manual selector in-between') { /// 5 /// | ||
112 | @include output(false) { | ||
113 | @include bem.block('something') { | ||
114 | &:hover { | ||
115 | @include bem.elem('child1') { | ||
116 | font-size: 2em; | ||
117 | |||
118 | @include bem.elem('subchild1') { | ||
119 | font-size: 3em; | ||
120 | } | ||
121 | } | ||
122 | } | ||
123 | |||
124 | .test & { | ||
125 | @include bem.elem('child2') { | ||
126 | font-size: 2em; | ||
127 | |||
128 | @include bem.elem('subchild2') { | ||
129 | font-size: 3em; | ||
130 | } | ||
131 | } | ||
132 | } | ||
133 | |||
134 | @include bem.elem('child3') { | ||
135 | font-size: 2em; | ||
136 | |||
137 | &:hover { | ||
138 | @include bem.elem('subchild3') { | ||
139 | font-size: 3em; | ||
140 | } | ||
141 | } | ||
142 | |||
143 | .test & { | ||
144 | @include bem.elem('subchild4') { | ||
145 | font-size: 3em; | ||
146 | } | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | } | ||
151 | |||
152 | @include expect(false) { | ||
153 | .something:hover .something__child1 { | ||
154 | font-size: 2em; | ||
155 | } | ||
156 | |||
157 | .something:hover .something__child1 .something__subchild1 { | ||
158 | font-size: 3em; | ||
159 | } | ||
160 | |||
161 | .test .something__child2 { | ||
162 | font-size: 2em; | ||
163 | } | ||
164 | |||
165 | .test .something__child2 .something__subchild2 { | ||
166 | font-size: 3em; | ||
167 | } | ||
168 | |||
169 | .something__child3 { | ||
170 | font-size: 2em; | ||
171 | } | ||
172 | |||
173 | .something__child3:hover .something__subchild3 { | ||
174 | font-size: 3em; | ||
175 | } | ||
176 | |||
177 | .test .something__child3 .something__subchild4 { | ||
178 | font-size: 3em; | ||
179 | } | ||
180 | } | ||
181 | } | ||
182 | |||
183 | @include assert('single element, nested, modifier in-between') { /// 6 /// | ||
184 | @include output { | ||
185 | @include bem.block('something') { | ||
186 | @include bem.modifier('mod') { | ||
187 | @include bem.elem('child') { | ||
188 | font-size: 2em; | ||
189 | |||
190 | @include bem.elem('subchild') { | ||
191 | font-size: 3em; | ||
192 | } | ||
193 | } | ||
194 | } | ||
195 | |||
196 | @include bem.elem('child') { | ||
197 | font-size: 2em; | ||
198 | |||
199 | @include bem.modifier('mod') { | ||
200 | @include bem.elem('subchild') { | ||
201 | font-size: 3em; | ||
202 | } | ||
203 | } | ||
204 | } | ||
205 | } | ||
206 | } | ||
207 | |||
208 | @include expect { | ||
209 | .something--mod .something__child { | ||
210 | font-size: 2em; | ||
211 | } | ||
212 | |||
213 | .something--mod .something__child .something__subchild { | ||
214 | font-size: 3em; | ||
215 | } | ||
216 | |||
217 | .something__child { | ||
218 | font-size: 2em; | ||
219 | } | ||
220 | |||
221 | .something__child--mod .something__subchild { | ||
222 | font-size: 3em; | ||
223 | } | ||
224 | } | ||
225 | } | ||
226 | |||
227 | @include assert('single element, in at-theme') { /// 7 /// | ||
228 | @include output(false) { | ||
229 | @include bem.block('something') { | ||
230 | @include bem.at-theme('dark') { | ||
231 | @include bem.elem('child') { | ||
232 | font-size: 2em; | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | } | ||
237 | |||
238 | @include expect(false) { | ||
239 | .t-dark .something__child, | ||
240 | [class*=' t-'] .t-dark .something__child, | ||
241 | [class^='t-'] .t-dark .something__child { | ||
242 | font-size: 2em; | ||
243 | } | ||
244 | } | ||
245 | } | ||
246 | |||
247 | @include assert('multiple elements') { /// 8 /// | ||
248 | @include output { | ||
249 | @include bem.block('something') { | ||
250 | @include bem.elem('child1', 'child2') { | ||
251 | font-size: 2em; | ||
252 | } | ||
253 | } | ||
254 | } | ||
255 | |||
256 | @include expect { | ||
257 | .something__child1, | ||
258 | .something__child2 { | ||
259 | font-size: 2em; | ||
260 | } | ||
261 | } | ||
262 | } | ||
263 | |||
264 | @include assert('multiple elements, manual selector in-between') { /// 9 /// | ||
265 | @include output(false) { | ||
266 | @include bem.block('something') { | ||
267 | &:hover { | ||
268 | @include bem.elem('child1', 'child2') { | ||
269 | font-size: 2em; | ||
270 | } | ||
271 | } | ||
272 | |||
273 | .test & { | ||
274 | @include bem.elem('child3', 'child4') { | ||
275 | font-size: 2em; | ||
276 | } | ||
277 | } | ||
278 | } | ||
279 | } | ||
280 | |||
281 | @include expect(false) { | ||
282 | .something:hover .something__child1, | ||
283 | .something:hover .something__child2 { | ||
284 | font-size: 2em; | ||
285 | } | ||
286 | |||
287 | .test .something__child3, | ||
288 | .test .something__child4 { | ||
289 | font-size: 2em; | ||
290 | } | ||
291 | } | ||
292 | } | ||
293 | |||
294 | @include assert('multiple elements, modifier in-between') { /// 10 /// | ||
295 | @include output { | ||
296 | @include bem.block('something') { | ||
297 | @include bem.modifier('mod') { | ||
298 | @include bem.elem('child1', 'child2') { | ||
299 | font-size: 2em; | ||
300 | } | ||
301 | } | ||
302 | } | ||
303 | } | ||
304 | |||
305 | @include expect { | ||
306 | .something--mod .something__child1, | ||
307 | .something--mod .something__child2 { | ||
308 | font-size: 2em; | ||
309 | } | ||
310 | } | ||
311 | } | ||
312 | |||
313 | @include assert('multiple elements, nested') { /// 11 /// | ||
314 | @include output { | ||
315 | @include bem.block('something') { | ||
316 | @include bem.elem('child1', 'child2') { | ||
317 | font-size: 2em; | ||
318 | |||
319 | @include bem.elem('subchild1') { | ||
320 | font-size: 3em; | ||
321 | } | ||
322 | } | ||
323 | |||
324 | @include bem.elem('child3') { | ||
325 | font-size: 2em; | ||
326 | |||
327 | @include bem.elem('subchild2', 'subchild3') { | ||
328 | font-size: 3em; | ||
329 | } | ||
330 | } | ||
331 | } | ||
332 | } | ||
333 | |||
334 | @include expect { | ||
335 | .something__child1, | ||
336 | .something__child2 { | ||
337 | font-size: 2em; | ||
338 | } | ||
339 | |||
340 | .something__child1 .something__subchild1, | ||
341 | .something__child2 .something__subchild1 { | ||
342 | font-size: 3em; | ||
343 | } | ||
344 | |||
345 | .something__child3 { | ||
346 | font-size: 2em; | ||
347 | } | ||
348 | |||
349 | .something__child3 .something__subchild2, | ||
350 | .something__child3 .something__subchild3 { | ||
351 | font-size: 3em; | ||
352 | } | ||
353 | } | ||
354 | } | ||
355 | |||
356 | @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// | ||
357 | @include output(false) { | ||
358 | @include bem.block('something') { | ||
359 | @include bem.elem('child1', 'child2') { | ||
360 | font-size: 2em; | ||
361 | |||
362 | &:hover { | ||
363 | @include bem.elem('subchild1') { | ||
364 | font-size: 3em; | ||
365 | } | ||
366 | } | ||
367 | |||
368 | .test & { | ||
369 | @include bem.elem('subchild2') { | ||
370 | font-size: 3em; | ||
371 | } | ||
372 | } | ||
373 | } | ||
374 | |||
375 | @include bem.elem('child3') { | ||
376 | font-size: 2em; | ||
377 | |||
378 | &:hover { | ||
379 | @include bem.elem('subchild3', 'subchild4') { | ||
380 | font-size: 3em; | ||
381 | } | ||
382 | } | ||
383 | |||
384 | .test & { | ||
385 | @include bem.elem('subchild5', 'subchild6') { | ||
386 | font-size: 3em; | ||
387 | } | ||
388 | } | ||
389 | } | ||
390 | } | ||
391 | } | ||
392 | |||
393 | @include expect(false) { | ||
394 | .something__child1, | ||
395 | .something__child2 { | ||
396 | font-size: 2em; | ||
397 | } | ||
398 | |||
399 | .something__child1:hover .something__subchild1, | ||
400 | .something__child2:hover .something__subchild1 { | ||
401 | font-size: 3em; | ||
402 | } | ||
403 | |||
404 | .test .something__child1 .something__subchild2, | ||
405 | .test .something__child2 .something__subchild2 { | ||
406 | font-size: 3em; | ||
407 | } | ||
408 | |||
409 | .something__child3 { | ||
410 | font-size: 2em; | ||
411 | } | ||
412 | |||
413 | .something__child3:hover .something__subchild3, | ||
414 | .something__child3:hover .something__subchild4 { | ||
415 | font-size: 3em; | ||
416 | } | ||
417 | |||
418 | .test .something__child3 .something__subchild5, | ||
419 | .test .something__child3 .something__subchild6 { | ||
420 | font-size: 3em; | ||
421 | } | ||
422 | } | ||
423 | } | ||
424 | |||
425 | @include assert('multiple elements, nested, modifier in-between') { /// 13 /// | ||
426 | @include output { | ||
427 | @include bem.block('something') { | ||
428 | @include bem.elem('child1', 'child2') { | ||
429 | font-size: 2em; | ||
430 | |||
431 | @include bem.modifier('mod') { | ||
432 | @include bem.elem('subchild1') { | ||
433 | font-size: 3em; | ||
434 | } | ||
435 | } | ||
436 | } | ||
437 | |||
438 | @include bem.elem('child3') { | ||
439 | font-size: 2em; | ||
440 | |||
441 | @include bem.modifier('mod') { | ||
442 | @include bem.elem('subchild2', 'subchild3') { | ||
443 | font-size: 3em; | ||
444 | } | ||
445 | } | ||
446 | } | ||
447 | } | ||
448 | } | ||
449 | |||
450 | @include expect { | ||
451 | .something__child1, | ||
452 | .something__child2 { | ||
453 | font-size: 2em; | ||
454 | } | ||
455 | |||
456 | .something__child1--mod .something__subchild1, | ||
457 | .something__child2--mod .something__subchild1 { | ||
458 | font-size: 3em; | ||
459 | } | ||
460 | |||
461 | .something__child3 { | ||
462 | font-size: 2em; | ||
463 | } | ||
464 | |||
465 | .something__child3--mod .something__subchild2, | ||
466 | .something__child3--mod .something__subchild3 { | ||
467 | font-size: 3em; | ||
468 | } | ||
469 | } | ||
470 | } | ||
471 | |||
472 | @include assert('multiple elements, in at-theme') { /// 14 /// | ||
473 | @include output(false) { | ||
474 | @include bem.block('something') { | ||
475 | @include bem.at-theme('dark') { | ||
476 | @include bem.elem('child1', 'child2') { | ||
477 | font-size: 2em; | ||
478 | } | ||
479 | } | ||
480 | } | ||
481 | } | ||
482 | |||
483 | @include expect(false) { | ||
484 | .t-dark .something__child1, | ||
485 | [class*=' t-'] .t-dark .something__child1, | ||
486 | [class^='t-'] .t-dark .something__child1, | ||
487 | .t-dark .something__child2, | ||
488 | [class*=' t-'] .t-dark .something__child2, | ||
489 | [class^='t-'] .t-dark .something__child2 { | ||
490 | font-size: 2em; | ||
491 | } | ||
492 | } | ||
493 | } | ||
494 | } | ||