// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations @use 'true' as *; @use '../../src/bem'; // // Included test cases: // - /// 1 /// - in root, 2 blocks // - /// 2 /// - in root, 1 block, 1 manual selector // - /// 3 /// - in block, 2 elements // - /// 4 /// - in block, 1 element, 1 modifier // - /// 5 /// - in block, 1 element, 1 extending modifier // - /// 6 /// - in block, 1 element, 1 & selector // - /// 7 /// - in block, 1 element, 1 manual selector // - /// 8 /// - in element, 2 elements, 1 modifier // - /// 9 /// - in element, 1 element, 1 & selector // - /// 10 /// - in element in manual selector, 2 elements // - /// 11 /// - in element in manual selector, 1 element, 1 & selector // - /// 12 /// - in multiple elements, 2 elements, 1 modifier // - /// 13 /// - in multiple elements, 1 element, 1 & selector // - /// 14 /// - in related elements, 2 elements, 1 modifier // - /// 15 /// - in related elements, 1 element, 1 & selector // - /// 16 /// - in element, 2 related elements, 1 modifier // - /// 17 /// - in element, 1 twin element, 1 modifier // - /// 18 /// - in multiple elements, 1 twin element, 1 modifier // @include it('multi') { @include assert('in root, 2 blocks') { /// 1 /// @include output { @include bem.multi('component:' 'block1', 'object:' 'block2') { font-size: 1em; @include bem.elem('child2') { font-size: 2em; } } } @include expect { .c-block1 { font-size: 1em; } .c-block1__child2 { font-size: 2em; } .o-block2 { font-size: 1em; } .o-block2__child2 { font-size: 2em; } } } @include assert('in root, 1 block, 1 manual selector') { /// 2 /// @include output { @include bem.multi('component:' 'block1', 'a:hover') { font-size: 1em; } } @include expect { .c-block1 { font-size: 1em; } a:hover { font-size: 1em; } } } @include assert('in block, 2 elements') { /// 3 /// @include output { @include bem.block('something') { @include bem.multi('elem:' 'child1' 'child2') { font-size: 2em; @include bem.modifier('mod') { font-size: 2.5em; } } } } @include expect { .something__child1, .something__child2 { font-size: 2em; } .something__child1--mod, .something__child2--mod { font-size: 2.5em; } } } @include assert('in block, 1 element, 1 modifier') { /// 4 /// @include output { @include bem.block('something') { @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { font-size: 2em; @include bem.modifier('mod2') { font-size: 2.5em; } } } } @include expect { .something__child { font-size: 2em; } .something__child--mod2 { font-size: 2.5em; } .something--mod1 { font-size: 2em; } .something--mod1.something--mod2 { font-size: 2.5em; } } } @include assert('in block, 1 element, 1 extending modifier') { /// 5 /// @include output { @include bem.block('something') { @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { font-size: 2em; @include bem.modifier('mod2' true) { font-size: 2.5em; } } } } @include expect { .something__child { font-size: 2em; } .something__child--mod2 { font-size: 2.5em; } .something--mod1 { font-size: 2em; } .something--mod1--mod2 { font-size: 2.5em; } } } @include assert('in block, 1 element, 1 & selector') { /// 6 /// @include output { @include bem.block('something') { @include bem.multi('&', 'elem:' 'child') { font-size: 2em; @include bem.modifier('mod') { font-size: 2.5em; } } } } @include expect { .something { font-size: 2em; } .something--mod { font-size: 2.5em; } .something__child { font-size: 2em; } .something__child--mod { font-size: 2.5em; } } } @include assert('in block, 1 element, 1 manual selector') { /// 7 /// @include output { @include bem.block('something') { @include bem.multi('> a:hover', 'elem:' 'child1') { font-size: 2em; @include bem.elem('child2') { font-size: 3em; } } } } @include expect { .something > a:hover { font-size: 2em; } .something > a:hover .something__child2 { font-size: 3em; } .something__child1 { font-size: 2em; } .something__child1 .something__child2 { font-size: 3em; } } } @include assert('in element, 2 elements, 1 modifier') { /// 8 /// @include output { @include bem.block('something') { @include bem.elem('child') { @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { font-size: 3em; @include bem.modifier('mod2') { font-size: 3.5em; } } } } } @include expect { .something__child .something__subchild1, .something__child .something__subchild2 { font-size: 3em; } .something__child .something__subchild1--mod2, .something__child .something__subchild2--mod2 { font-size: 3.5em; } .something__child--mod1 { font-size: 3em; } .something__child--mod1.something__child--mod2 { font-size: 3.5em; } } } @include assert('in element, 1 element, 1 & selector') { /// 9 /// @include output { @include bem.block('something') { @include bem.elem('child') { @include bem.multi('elem:' 'subchild', '&') { font-size: 3em; @include bem.modifier('mod') { font-size: 3.5em; } } } } } @include expect { .something__child .something__subchild { font-size: 3em; } .something__child .something__subchild--mod { font-size: 3.5em; } .something__child { font-size: 3em; } .something__child--mod { font-size: 3.5em; } } } @include assert('in element in manual selector, 2 elements') { /// 10 /// @include output { @include bem.block('something') { @include bem.elem('child') { &:hover { @include bem.multi('elem:' 'subchild1' 'subchild2') { font-size: 3em; @include bem.modifier('mod2') { font-size: 3.5em; } } } } } } @include expect { .something__child:hover .something__subchild1, .something__child:hover .something__subchild2 { font-size: 3em; } .something__child:hover .something__subchild1--mod2, .something__child:hover .something__subchild2--mod2 { font-size: 3.5em; } } } @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 /// @include output { @include bem.block('something') { @include bem.elem('child') { &:hover { @include bem.multi('elem:' 'subchild', '&') { font-size: 3em; } } } } } @include expect { .something__child:hover .something__subchild { font-size: 3em; } .something__child:hover { font-size: 3em; } } } @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 /// @include output { @include bem.block('something') { @include bem.elem('child1', 'child2') { @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { font-size: 3em; } } } } @include expect { .something__child1 .something__subchild1, .something__child2 .something__subchild1, .something__child1 .something__subchild2, .something__child2 .something__subchild2 { font-size: 3em; } .something__child1--mod, .something__child2--mod { font-size: 3em; } } } @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 /// @include output { @include bem.block('something') { @include bem.elem('child1', 'child2') { @include bem.multi('elem:' 'subchild', '&') { font-size: 3em; @include bem.modifier('mod') { font-size: 3.5em; } } } } } @include expect { .something__child1 .something__subchild, .something__child2 .something__subchild { font-size: 3em; } .something__child1 .something__subchild--mod, .something__child2 .something__subchild--mod { font-size: 3.5em; } .something__child1, .something__child2 { font-size: 3em; } .something__child1--mod, .something__child2--mod { font-size: 3.5em; } } } @include assert('in related elements, 2 elements, 1 modifier') { /// 14 /// @include output { @include bem.block('something') { @include bem.elem('child1') { @include bem.next-elem('child2', 'child3') { @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { font-size: 3em; } } } } } @include expect { .something__child1 + .something__child2 .something__subchild1, .something__child1 + .something__child3 .something__subchild1, .something__child1 + .something__child2 .something__subchild2, .something__child1 + .something__child3 .something__subchild2 { font-size: 3em; } .something__child1 + .something__child2--mod, .something__child1 + .something__child3--mod { font-size: 3em; } } } @include assert('in related elements, 1 element, 1 & selector') { /// 15 /// @include output { @include bem.block('something') { @include bem.elem('child1') { @include bem.next-elem('child2', 'child3') { @include bem.multi('elem:' 'subchild', '&') { font-size: 4em; @include bem.modifier('mod') { font-size: 4.5em; } } } } } } @include expect { .something__child1 + .something__child2 .something__subchild, .something__child1 + .something__child3 .something__subchild { font-size: 4em; } .something__child1 + .something__child2 .something__subchild--mod, .something__child1 + .something__child3 .something__subchild--mod { font-size: 4.5em; } .something__child1 + .something__child2, .something__child1 + .something__child3 { font-size: 4em; } .something__child1 + .something__child2--mod, .something__child1 + .something__child3--mod { font-size: 4.5em; } } } @include assert('in element, 2 related elements, 1 modifier') { /// 16 /// @include output { @include bem.block('something') { @include bem.elem('child1') { @include bem.multi('next-elem:' 'child2' 'child3', 'modifier:' 'mod1') { font-size: 3em; @include bem.modifier('mod2') { font-size: 3.5em; } } } } } @include expect { .something__child1 + .something__child2, .something__child1 + .something__child3 { font-size: 3em; } .something__child1 + .something__child2--mod2, .something__child1 + .something__child3--mod2 { font-size: 3.5em; } .something__child1--mod1 { font-size: 3em; } .something__child1--mod1.something__child1--mod2 { font-size: 3.5em; } } } @include assert('in element, 1 twin element, 1 modifier') { /// 17 /// @include output { @include bem.block('something') { @include bem.elem('child') { @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { font-size: 3em; @include bem.modifier('mod2') { font-size: 3.5em; } } } } } @include expect { .something__child + .something__child { font-size: 3em; } .something__child + .something__child--mod2 { font-size: 3.5em; } .something__child--mod1 { font-size: 3em; } .something__child--mod1.something__child--mod2 { font-size: 3.5em; } } } @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 /// @include output { @include bem.block('something') { @include bem.elem('child1', 'child2') { @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { font-size: 3em; @include bem.modifier('mod2') { font-size: 3.5em; } } } } } @include expect { .something__child1 + .something__child1, .something__child2 + .something__child2 { font-size: 3em; } .something__child1 + .something__child1--mod2, .something__child2 + .something__child2--mod2 { font-size: 3.5em; } .something__child1--mod1, .something__child2--mod1 { font-size: 3em; } .something__child1--mod1.something__child1--mod2, .something__child2--mod1.something__child2--mod2 { font-size: 3.5em; } } } }