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/_multi.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/_multi.scss')
-rw-r--r-- | test/bem/_multi.scss | 594 |
1 files changed, 594 insertions, 0 deletions
diff --git a/test/bem/_multi.scss b/test/bem/_multi.scss new file mode 100644 index 0000000..255fb45 --- /dev/null +++ b/test/bem/_multi.scss | |||
@@ -0,0 +1,594 @@ | |||
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 /// - in root, 2 blocks | ||
9 | // - /// 2 /// - in root, 1 block, 1 manual selector | ||
10 | // - /// 3 /// - in block, 2 elements | ||
11 | // - /// 4 /// - in block, 1 element, 1 modifier | ||
12 | // - /// 5 /// - in block, 1 element, 1 extending modifier | ||
13 | // - /// 6 /// - in block, 1 element, 1 & selector | ||
14 | // - /// 7 /// - in block, 1 element, 1 manual selector | ||
15 | // - /// 8 /// - in element, 2 elements, 1 modifier | ||
16 | // - /// 9 /// - in element, 1 element, 1 & selector | ||
17 | // - /// 10 /// - in element in manual selector, 2 elements | ||
18 | // - /// 11 /// - in element in manual selector, 1 element, 1 & selector | ||
19 | // - /// 12 /// - in multiple elements, 2 elements, 1 modifier | ||
20 | // - /// 13 /// - in multiple elements, 1 element, 1 & selector | ||
21 | // - /// 14 /// - in related elements, 2 elements, 1 modifier | ||
22 | // - /// 15 /// - in related elements, 1 element, 1 & selector | ||
23 | // - /// 16 /// - in element, 2 related elements, 1 modifier | ||
24 | // - /// 17 /// - in element, 1 twin element, 1 modifier | ||
25 | // - /// 18 /// - in multiple elements, 1 twin element, 1 modifier | ||
26 | // | ||
27 | |||
28 | @include it('multi') { | ||
29 | @include assert('in root, 2 blocks') { /// 1 /// | ||
30 | @include output { | ||
31 | @include bem.multi('component:' 'block1', 'object:' 'block2') { | ||
32 | font-size: 1em; | ||
33 | |||
34 | @include bem.elem('child2') { | ||
35 | font-size: 2em; | ||
36 | } | ||
37 | } | ||
38 | } | ||
39 | |||
40 | @include expect { | ||
41 | .c-block1 { | ||
42 | font-size: 1em; | ||
43 | } | ||
44 | |||
45 | .c-block1__child2 { | ||
46 | font-size: 2em; | ||
47 | } | ||
48 | |||
49 | .o-block2 { | ||
50 | font-size: 1em; | ||
51 | } | ||
52 | |||
53 | .o-block2__child2 { | ||
54 | font-size: 2em; | ||
55 | } | ||
56 | } | ||
57 | } | ||
58 | |||
59 | @include assert('in root, 1 block, 1 manual selector') { /// 2 /// | ||
60 | @include output { | ||
61 | @include bem.multi('component:' 'block1', 'a:hover') { | ||
62 | font-size: 1em; | ||
63 | } | ||
64 | } | ||
65 | |||
66 | @include expect { | ||
67 | .c-block1 { | ||
68 | font-size: 1em; | ||
69 | } | ||
70 | |||
71 | a:hover { | ||
72 | font-size: 1em; | ||
73 | } | ||
74 | } | ||
75 | } | ||
76 | |||
77 | @include assert('in block, 2 elements') { /// 3 /// | ||
78 | @include output { | ||
79 | @include bem.block('something') { | ||
80 | @include bem.multi('elem:' 'child1' 'child2') { | ||
81 | font-size: 2em; | ||
82 | |||
83 | @include bem.modifier('mod') { | ||
84 | font-size: 2.5em; | ||
85 | } | ||
86 | } | ||
87 | } | ||
88 | } | ||
89 | |||
90 | @include expect { | ||
91 | .something__child1, | ||
92 | .something__child2 { | ||
93 | font-size: 2em; | ||
94 | } | ||
95 | |||
96 | .something__child1--mod, | ||
97 | .something__child2--mod { | ||
98 | font-size: 2.5em; | ||
99 | } | ||
100 | } | ||
101 | } | ||
102 | |||
103 | @include assert('in block, 1 element, 1 modifier') { /// 4 /// | ||
104 | @include output { | ||
105 | @include bem.block('something') { | ||
106 | @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { | ||
107 | font-size: 2em; | ||
108 | |||
109 | @include bem.modifier('mod2') { | ||
110 | font-size: 2.5em; | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | } | ||
115 | |||
116 | @include expect { | ||
117 | .something__child { | ||
118 | font-size: 2em; | ||
119 | } | ||
120 | |||
121 | .something__child--mod2 { | ||
122 | font-size: 2.5em; | ||
123 | } | ||
124 | |||
125 | .something--mod1 { | ||
126 | font-size: 2em; | ||
127 | } | ||
128 | |||
129 | .something--mod1.something--mod2 { | ||
130 | font-size: 2.5em; | ||
131 | } | ||
132 | } | ||
133 | } | ||
134 | |||
135 | @include assert('in block, 1 element, 1 extending modifier') { /// 5 /// | ||
136 | @include output { | ||
137 | @include bem.block('something') { | ||
138 | @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { | ||
139 | font-size: 2em; | ||
140 | |||
141 | @include bem.modifier('mod2' true) { | ||
142 | font-size: 2.5em; | ||
143 | } | ||
144 | } | ||
145 | } | ||
146 | } | ||
147 | |||
148 | @include expect { | ||
149 | .something__child { | ||
150 | font-size: 2em; | ||
151 | } | ||
152 | |||
153 | .something__child--mod2 { | ||
154 | font-size: 2.5em; | ||
155 | } | ||
156 | |||
157 | .something--mod1 { | ||
158 | font-size: 2em; | ||
159 | } | ||
160 | |||
161 | .something--mod1--mod2 { | ||
162 | font-size: 2.5em; | ||
163 | } | ||
164 | } | ||
165 | } | ||
166 | |||
167 | @include assert('in block, 1 element, 1 & selector') { /// 6 /// | ||
168 | @include output { | ||
169 | @include bem.block('something') { | ||
170 | @include bem.multi('&', 'elem:' 'child') { | ||
171 | font-size: 2em; | ||
172 | |||
173 | @include bem.modifier('mod') { | ||
174 | font-size: 2.5em; | ||
175 | } | ||
176 | } | ||
177 | } | ||
178 | } | ||
179 | |||
180 | @include expect { | ||
181 | .something { | ||
182 | font-size: 2em; | ||
183 | } | ||
184 | |||
185 | .something--mod { | ||
186 | font-size: 2.5em; | ||
187 | } | ||
188 | |||
189 | .something__child { | ||
190 | font-size: 2em; | ||
191 | } | ||
192 | |||
193 | .something__child--mod { | ||
194 | font-size: 2.5em; | ||
195 | } | ||
196 | } | ||
197 | } | ||
198 | |||
199 | @include assert('in block, 1 element, 1 manual selector') { /// 7 /// | ||
200 | @include output { | ||
201 | @include bem.block('something') { | ||
202 | @include bem.multi('> a:hover', 'elem:' 'child1') { | ||
203 | font-size: 2em; | ||
204 | |||
205 | @include bem.elem('child2') { | ||
206 | font-size: 3em; | ||
207 | } | ||
208 | } | ||
209 | } | ||
210 | } | ||
211 | |||
212 | @include expect { | ||
213 | .something > a:hover { | ||
214 | font-size: 2em; | ||
215 | } | ||
216 | |||
217 | .something > a:hover .something__child2 { | ||
218 | font-size: 3em; | ||
219 | } | ||
220 | |||
221 | .something__child1 { | ||
222 | font-size: 2em; | ||
223 | } | ||
224 | |||
225 | .something__child1 .something__child2 { | ||
226 | font-size: 3em; | ||
227 | } | ||
228 | } | ||
229 | } | ||
230 | |||
231 | @include assert('in element, 2 elements, 1 modifier') { /// 8 /// | ||
232 | @include output { | ||
233 | @include bem.block('something') { | ||
234 | @include bem.elem('child') { | ||
235 | @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { | ||
236 | font-size: 3em; | ||
237 | |||
238 | @include bem.modifier('mod2') { | ||
239 | font-size: 3.5em; | ||
240 | } | ||
241 | } | ||
242 | } | ||
243 | } | ||
244 | } | ||
245 | |||
246 | @include expect { | ||
247 | .something__child .something__subchild1, | ||
248 | .something__child .something__subchild2 { | ||
249 | font-size: 3em; | ||
250 | } | ||
251 | |||
252 | .something__child .something__subchild1--mod2, | ||
253 | .something__child .something__subchild2--mod2 { | ||
254 | font-size: 3.5em; | ||
255 | } | ||
256 | |||
257 | .something__child--mod1 { | ||
258 | font-size: 3em; | ||
259 | } | ||
260 | |||
261 | .something__child--mod1.something__child--mod2 { | ||
262 | font-size: 3.5em; | ||
263 | } | ||
264 | } | ||
265 | } | ||
266 | |||
267 | @include assert('in element, 1 element, 1 & selector') { /// 9 /// | ||
268 | @include output { | ||
269 | @include bem.block('something') { | ||
270 | @include bem.elem('child') { | ||
271 | @include bem.multi('elem:' 'subchild', '&') { | ||
272 | font-size: 3em; | ||
273 | |||
274 | @include bem.modifier('mod') { | ||
275 | font-size: 3.5em; | ||
276 | } | ||
277 | } | ||
278 | } | ||
279 | } | ||
280 | } | ||
281 | |||
282 | @include expect { | ||
283 | .something__child .something__subchild { | ||
284 | font-size: 3em; | ||
285 | } | ||
286 | |||
287 | .something__child .something__subchild--mod { | ||
288 | font-size: 3.5em; | ||
289 | } | ||
290 | |||
291 | .something__child { | ||
292 | font-size: 3em; | ||
293 | } | ||
294 | |||
295 | .something__child--mod { | ||
296 | font-size: 3.5em; | ||
297 | } | ||
298 | } | ||
299 | } | ||
300 | |||
301 | @include assert('in element in manual selector, 2 elements') { /// 10 /// | ||
302 | @include output { | ||
303 | @include bem.block('something') { | ||
304 | @include bem.elem('child') { | ||
305 | &:hover { | ||
306 | @include bem.multi('elem:' 'subchild1' 'subchild2') { | ||
307 | font-size: 3em; | ||
308 | |||
309 | @include bem.modifier('mod2') { | ||
310 | font-size: 3.5em; | ||
311 | } | ||
312 | } | ||
313 | } | ||
314 | } | ||
315 | } | ||
316 | } | ||
317 | |||
318 | @include expect { | ||
319 | .something__child:hover .something__subchild1, | ||
320 | .something__child:hover .something__subchild2 { | ||
321 | font-size: 3em; | ||
322 | } | ||
323 | |||
324 | .something__child:hover .something__subchild1--mod2, | ||
325 | .something__child:hover .something__subchild2--mod2 { | ||
326 | font-size: 3.5em; | ||
327 | } | ||
328 | } | ||
329 | } | ||
330 | |||
331 | @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 /// | ||
332 | @include output { | ||
333 | @include bem.block('something') { | ||
334 | @include bem.elem('child') { | ||
335 | &:hover { | ||
336 | @include bem.multi('elem:' 'subchild', '&') { | ||
337 | font-size: 3em; | ||
338 | } | ||
339 | } | ||
340 | } | ||
341 | } | ||
342 | } | ||
343 | |||
344 | @include expect { | ||
345 | .something__child:hover .something__subchild { | ||
346 | font-size: 3em; | ||
347 | } | ||
348 | |||
349 | .something__child:hover { | ||
350 | font-size: 3em; | ||
351 | } | ||
352 | } | ||
353 | } | ||
354 | |||
355 | @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 /// | ||
356 | @include output { | ||
357 | @include bem.block('something') { | ||
358 | @include bem.elem('child1', 'child2') { | ||
359 | @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { | ||
360 | font-size: 3em; | ||
361 | } | ||
362 | } | ||
363 | } | ||
364 | } | ||
365 | |||
366 | @include expect { | ||
367 | .something__child1 .something__subchild1, | ||
368 | .something__child2 .something__subchild1, | ||
369 | .something__child1 .something__subchild2, | ||
370 | .something__child2 .something__subchild2 { | ||
371 | font-size: 3em; | ||
372 | } | ||
373 | |||
374 | .something__child1--mod, | ||
375 | .something__child2--mod { | ||
376 | font-size: 3em; | ||
377 | } | ||
378 | } | ||
379 | } | ||
380 | |||
381 | @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 /// | ||
382 | @include output { | ||
383 | @include bem.block('something') { | ||
384 | @include bem.elem('child1', 'child2') { | ||
385 | @include bem.multi('elem:' 'subchild', '&') { | ||
386 | font-size: 3em; | ||
387 | |||
388 | @include bem.modifier('mod') { | ||
389 | font-size: 3.5em; | ||
390 | } | ||
391 | } | ||
392 | } | ||
393 | } | ||
394 | } | ||
395 | |||
396 | @include expect { | ||
397 | .something__child1 .something__subchild, | ||
398 | .something__child2 .something__subchild { | ||
399 | font-size: 3em; | ||
400 | } | ||
401 | |||
402 | .something__child1 .something__subchild--mod, | ||
403 | .something__child2 .something__subchild--mod { | ||
404 | font-size: 3.5em; | ||
405 | } | ||
406 | |||
407 | .something__child1, | ||
408 | .something__child2 { | ||
409 | font-size: 3em; | ||
410 | } | ||
411 | |||
412 | .something__child1--mod, | ||
413 | .something__child2--mod { | ||
414 | font-size: 3.5em; | ||
415 | } | ||
416 | } | ||
417 | } | ||
418 | |||
419 | @include assert('in related elements, 2 elements, 1 modifier') { /// 14 /// | ||
420 | @include output { | ||
421 | @include bem.block('something') { | ||
422 | @include bem.elem('child1') { | ||
423 | @include bem.next-elem('child2', 'child3') { | ||
424 | @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { | ||
425 | font-size: 3em; | ||
426 | } | ||
427 | } | ||
428 | } | ||
429 | } | ||
430 | } | ||
431 | |||
432 | @include expect { | ||
433 | .something__child1 + .something__child2 .something__subchild1, | ||
434 | .something__child1 + .something__child3 .something__subchild1, | ||
435 | .something__child1 + .something__child2 .something__subchild2, | ||
436 | .something__child1 + .something__child3 .something__subchild2 { | ||
437 | font-size: 3em; | ||
438 | } | ||
439 | |||
440 | .something__child1 + .something__child2--mod, | ||
441 | .something__child1 + .something__child3--mod { | ||
442 | font-size: 3em; | ||
443 | } | ||
444 | } | ||
445 | } | ||
446 | |||
447 | @include assert('in related elements, 1 element, 1 & selector') { /// 15 /// | ||
448 | @include output { | ||
449 | @include bem.block('something') { | ||
450 | @include bem.elem('child1') { | ||
451 | @include bem.next-elem('child2', 'child3') { | ||
452 | @include bem.multi('elem:' 'subchild', '&') { | ||
453 | font-size: 4em; | ||
454 | |||
455 | @include bem.modifier('mod') { | ||
456 | font-size: 4.5em; | ||
457 | } | ||
458 | } | ||
459 | } | ||
460 | } | ||
461 | } | ||
462 | } | ||
463 | |||
464 | @include expect { | ||
465 | .something__child1 + .something__child2 .something__subchild, | ||
466 | .something__child1 + .something__child3 .something__subchild { | ||
467 | font-size: 4em; | ||
468 | } | ||
469 | |||
470 | .something__child1 + .something__child2 .something__subchild--mod, | ||
471 | .something__child1 + .something__child3 .something__subchild--mod { | ||
472 | font-size: 4.5em; | ||
473 | } | ||
474 | |||
475 | .something__child1 + .something__child2, | ||
476 | .something__child1 + .something__child3 { | ||
477 | font-size: 4em; | ||
478 | } | ||
479 | |||
480 | .something__child1 + .something__child2--mod, | ||
481 | .something__child1 + .something__child3--mod { | ||
482 | font-size: 4.5em; | ||
483 | } | ||
484 | } | ||
485 | } | ||
486 | |||
487 | @include assert('in element, 2 related elements, 1 modifier') { /// 16 /// | ||
488 | @include output { | ||
489 | @include bem.block('something') { | ||
490 | @include bem.elem('child1') { | ||
491 | @include bem.multi('next-elem:' 'child2' 'child3', 'modifier:' 'mod1') { | ||
492 | font-size: 3em; | ||
493 | |||
494 | @include bem.modifier('mod2') { | ||
495 | font-size: 3.5em; | ||
496 | } | ||
497 | } | ||
498 | } | ||
499 | } | ||
500 | } | ||
501 | |||
502 | @include expect { | ||
503 | .something__child1 + .something__child2, | ||
504 | .something__child1 + .something__child3 { | ||
505 | font-size: 3em; | ||
506 | } | ||
507 | |||
508 | .something__child1 + .something__child2--mod2, | ||
509 | .something__child1 + .something__child3--mod2 { | ||
510 | font-size: 3.5em; | ||
511 | } | ||
512 | |||
513 | .something__child1--mod1 { | ||
514 | font-size: 3em; | ||
515 | } | ||
516 | |||
517 | .something__child1--mod1.something__child1--mod2 { | ||
518 | font-size: 3.5em; | ||
519 | } | ||
520 | } | ||
521 | } | ||
522 | |||
523 | @include assert('in element, 1 twin element, 1 modifier') { /// 17 /// | ||
524 | @include output { | ||
525 | @include bem.block('something') { | ||
526 | @include bem.elem('child') { | ||
527 | @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { | ||
528 | font-size: 3em; | ||
529 | |||
530 | @include bem.modifier('mod2') { | ||
531 | font-size: 3.5em; | ||
532 | } | ||
533 | } | ||
534 | } | ||
535 | } | ||
536 | } | ||
537 | |||
538 | @include expect { | ||
539 | .something__child + .something__child { | ||
540 | font-size: 3em; | ||
541 | } | ||
542 | |||
543 | .something__child + .something__child--mod2 { | ||
544 | font-size: 3.5em; | ||
545 | } | ||
546 | |||
547 | .something__child--mod1 { | ||
548 | font-size: 3em; | ||
549 | } | ||
550 | |||
551 | .something__child--mod1.something__child--mod2 { | ||
552 | font-size: 3.5em; | ||
553 | } | ||
554 | } | ||
555 | } | ||
556 | |||
557 | @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 /// | ||
558 | @include output { | ||
559 | @include bem.block('something') { | ||
560 | @include bem.elem('child1', 'child2') { | ||
561 | @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { | ||
562 | font-size: 3em; | ||
563 | |||
564 | @include bem.modifier('mod2') { | ||
565 | font-size: 3.5em; | ||
566 | } | ||
567 | } | ||
568 | } | ||
569 | } | ||
570 | } | ||
571 | |||
572 | @include expect { | ||
573 | .something__child1 + .something__child1, | ||
574 | .something__child2 + .something__child2 { | ||
575 | font-size: 3em; | ||
576 | } | ||
577 | |||
578 | .something__child1 + .something__child1--mod2, | ||
579 | .something__child2 + .something__child2--mod2 { | ||
580 | font-size: 3.5em; | ||
581 | } | ||
582 | |||
583 | .something__child1--mod1, | ||
584 | .something__child2--mod1 { | ||
585 | font-size: 3em; | ||
586 | } | ||
587 | |||
588 | .something__child1--mod1.something__child1--mod2, | ||
589 | .something__child2--mod1.something__child2--mod2 { | ||
590 | font-size: 3.5em; | ||
591 | } | ||
592 | } | ||
593 | } | ||
594 | } | ||