aboutsummaryrefslogtreecommitdiffstats
path: root/test/bem/_multi.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/bem/_multi.scss')
-rw-r--r--test/bem/_multi.scss594
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}