From dd5f3c463fab336d694f426dcad11a1783590fc9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 07:52:13 +0100 Subject: Ported from import syntax to modules --- test/bem/_next-twin-element.scss | 156 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 test/bem/_next-twin-element.scss (limited to 'test/bem/_next-twin-element.scss') diff --git a/test/bem/_next-twin-element.scss b/test/bem/_next-twin-element.scss new file mode 100644 index 0000000..85fe473 --- /dev/null +++ b/test/bem/_next-twin-element.scss @@ -0,0 +1,156 @@ +// 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 /// - multiple elements +// - /// 5 /// - multiple elements, manual selector in-between +// - /// 6 /// - multiple elements, modifier in-between +// + +@include it('next-twin-element') { + @include assert('single element') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, manual selector in-between') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.next-twin-element { + font-size: 2em; + } + } + + .test & { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__child { + font-size: 2em; + } + + .test .something__child + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, modifier in-between') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + @include bem.next-twin-element { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__child { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__child1, + .something__child2 + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, manual selector in-between') { /// 5 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + &:hover { + @include bem.next-twin-element { + font-size: 2em; + } + } + + .test & { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__child1, + .something__child2:hover + .something__child2 { + font-size: 2em; + } + + .test .something__child1 + .something__child1, + .test .something__child2 + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, modifier in-between') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + @include bem.next-twin-element { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__child1, + .something__child2--mod + .something__child2 { + font-size: 2.5em; + } + } + } +} -- cgit v1.2.3-54-g00ecf