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