// 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 /// - single element // - /// 2 /// - single element, manual selector in-between // - /// 3 /// - single element, modifier in-between // - /// 4 /// - single element, nested // - /// 5 /// - single element, nested, manual selector in-between // - /// 6 /// - single element, nested, modifier in-between // - /// 7 /// - single element, in at-theme // - /// 8 /// - multiple elements // - /// 9 /// - multiple elements, manual selector in-between // - /// 10 /// - multiple elements, modifier in-between // - /// 11 /// - multiple elements, nested // - /// 12 /// - multiple elements, nested, manual selector in-between // - /// 13 /// - multiple elements, nested, modifier in-between // - /// 14 /// - single element, in at-theme // @include it('element') { @include assert('single element') { /// 1 /// @include output { @include bem.block('something') { @include bem.elem('child') { font-size: 2em; } } } @include expect { .something__child { font-size: 2em; } } } @include assert('single element, manual selector in-between') { /// 2 /// @include output(false) { @include bem.block('something') { &:hover { @include bem.elem('child1') { font-size: 2em; } } .test & { @include bem.elem('child2') { font-size: 2em; } } } } @include expect(false) { .something:hover .something__child1 { font-size: 2em; } .test .something__child2 { font-size: 2em; } } } @include assert('single element, modifier in-between') { /// 3 /// @include output { @include bem.block('something') { @include bem.modifier('mod') { @include bem.elem('child') { font-size: 2em; } } } } @include expect { .something--mod .something__child { font-size: 2em; } } } @include assert('single element, nested') { /// 4 /// @include output { @include bem.block('something') { @include bem.elem('child') { font-size: 2em; @include bem.elem('subchild') { font-size: 3em; } } } } @include expect { .something__child { font-size: 2em; } .something__child .something__subchild { font-size: 3em; } } } @include assert('single element, nested, manual selector in-between') { /// 5 /// @include output(false) { @include bem.block('something') { &:hover { @include bem.elem('child1') { font-size: 2em; @include bem.elem('subchild1') { font-size: 3em; } } } .test & { @include bem.elem('child2') { font-size: 2em; @include bem.elem('subchild2') { font-size: 3em; } } } @include bem.elem('child3') { font-size: 2em; &:hover { @include bem.elem('subchild3') { font-size: 3em; } } .test & { @include bem.elem('subchild4') { font-size: 3em; } } } } } @include expect(false) { .something:hover .something__child1 { font-size: 2em; } .something:hover .something__child1 .something__subchild1 { font-size: 3em; } .test .something__child2 { font-size: 2em; } .test .something__child2 .something__subchild2 { font-size: 3em; } .something__child3 { font-size: 2em; } .something__child3:hover .something__subchild3 { font-size: 3em; } .test .something__child3 .something__subchild4 { font-size: 3em; } } } @include assert('single element, nested, modifier in-between') { /// 6 /// @include output { @include bem.block('something') { @include bem.modifier('mod') { @include bem.elem('child') { font-size: 2em; @include bem.elem('subchild') { font-size: 3em; } } } @include bem.elem('child') { font-size: 2em; @include bem.modifier('mod') { @include bem.elem('subchild') { font-size: 3em; } } } } } @include expect { .something--mod .something__child { font-size: 2em; } .something--mod .something__child .something__subchild { font-size: 3em; } .something__child { font-size: 2em; } .something__child--mod .something__subchild { font-size: 3em; } } } @include assert('single element, in at-theme') { /// 7 /// @include output(false) { @include bem.block('something') { @include bem.at-theme('dark') { @include bem.elem('child') { font-size: 2em; } } } } @include expect(false) { .t-dark .something__child, [class*=' t-'] .t-dark .something__child, [class^='t-'] .t-dark .something__child { font-size: 2em; } } } @include assert('multiple elements') { /// 8 /// @include output { @include bem.block('something') { @include bem.elem('child1', 'child2') { font-size: 2em; } } } @include expect { .something__child1, .something__child2 { font-size: 2em; } } } @include assert('multiple elements, manual selector in-between') { /// 9 /// @include output(false) { @include bem.block('something') { &:hover { @include bem.elem('child1', 'child2') { font-size: 2em; } } .test & { @include bem.elem('child3', 'child4') { font-size: 2em; } } } } @include expect(false) { .something:hover .something__child1, .something:hover .something__child2 { font-size: 2em; } .test .something__child3, .test .something__child4 { font-size: 2em; } } } @include assert('multiple elements, modifier in-between') { /// 10 /// @include output { @include bem.block('something') { @include bem.modifier('mod') { @include bem.elem('child1', 'child2') { font-size: 2em; } } } } @include expect { .something--mod .something__child1, .something--mod .something__child2 { font-size: 2em; } } } @include assert('multiple elements, nested') { /// 11 /// @include output { @include bem.block('something') { @include bem.elem('child1', 'child2') { font-size: 2em; @include bem.elem('subchild1') { font-size: 3em; } } @include bem.elem('child3') { font-size: 2em; @include bem.elem('subchild2', 'subchild3') { font-size: 3em; } } } } @include expect { .something__child1, .something__child2 { font-size: 2em; } .something__child1 .something__subchild1, .something__child2 .something__subchild1 { font-size: 3em; } .something__child3 { font-size: 2em; } .something__child3 .something__subchild2, .something__child3 .something__subchild3 { font-size: 3em; } } } @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// @include output(false) { @include bem.block('something') { @include bem.elem('child1', 'child2') { font-size: 2em; &:hover { @include bem.elem('subchild1') { font-size: 3em; } } .test & { @include bem.elem('subchild2') { font-size: 3em; } } } @include bem.elem('child3') { font-size: 2em; &:hover { @include bem.elem('subchild3', 'subchild4') { font-size: 3em; } } .test & { @include bem.elem('subchild5', 'subchild6') { font-size: 3em; } } } } } @include expect(false) { .something__child1, .something__child2 { font-size: 2em; } .something__child1:hover .something__subchild1, .something__child2:hover .something__subchild1 { font-size: 3em; } .test .something__child1 .something__subchild2, .test .something__child2 .something__subchild2 { font-size: 3em; } .something__child3 { font-size: 2em; } .something__child3:hover .something__subchild3, .something__child3:hover .something__subchild4 { font-size: 3em; } .test .something__child3 .something__subchild5, .test .something__child3 .something__subchild6 { font-size: 3em; } } } @include assert('multiple elements, nested, modifier in-between') { /// 13 /// @include output { @include bem.block('something') { @include bem.elem('child1', 'child2') { font-size: 2em; @include bem.modifier('mod') { @include bem.elem('subchild1') { font-size: 3em; } } } @include bem.elem('child3') { font-size: 2em; @include bem.modifier('mod') { @include bem.elem('subchild2', 'subchild3') { font-size: 3em; } } } } } @include expect { .something__child1, .something__child2 { font-size: 2em; } .something__child1--mod .something__subchild1, .something__child2--mod .something__subchild1 { font-size: 3em; } .something__child3 { font-size: 2em; } .something__child3--mod .something__subchild2, .something__child3--mod .something__subchild3 { font-size: 3em; } } } @include assert('multiple elements, in at-theme') { /// 14 /// @include output(false) { @include bem.block('something') { @include bem.at-theme('dark') { @include bem.elem('child1', 'child2') { font-size: 2em; } } } } @include expect(false) { .t-dark .something__child1, [class*=' t-'] .t-dark .something__child1, [class^='t-'] .t-dark .something__child1, .t-dark .something__child2, [class*=' t-'] .t-dark .something__child2, [class^='t-'] .t-dark .something__child2 { font-size: 2em; } } } }