From f0f84513f8efe533b6ee670a6f1a0c074387b2ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 13 Aug 2025 12:01:46 +0200 Subject: Make use of SASS modules --- test/bem/_multi.scss | 1130 +++++++++++++++++++++++++------------------------- 1 file changed, 565 insertions(+), 565 deletions(-) (limited to 'test/bem/_multi.scss') diff --git a/test/bem/_multi.scss b/test/bem/_multi.scss index 255fb45..88a4cf4 100644 --- a/test/bem/_multi.scss +++ b/test/bem/_multi.scss @@ -26,569 +26,569 @@ // @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; - } - } - } + @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; + } + } + } } -- cgit v1.2.3-70-g09d2