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/_at-theme.scss | 90 +-- test/bem/_block.scss | 139 +++-- test/bem/_composed-of.scss | 285 ++++----- test/bem/_element.scss | 938 ++++++++++++++-------------- test/bem/_examples.scss | 432 ++++++------- test/bem/_modifier.scss | 1258 +++++++++++++++++++------------------- test/bem/_multi.scss | 1130 +++++++++++++++++----------------- test/bem/_next-twin-element.scss | 278 ++++----- test/bem/_related-element.scss | 878 +++++++++++++------------- test/bem/_state.scss | 326 +++++----- test/bem/_suffix.scss | 146 ++--- 11 files changed, 2962 insertions(+), 2938 deletions(-) (limited to 'test/bem') diff --git a/test/bem/_at-theme.scss b/test/bem/_at-theme.scss index 29a4eba..83ea4d1 100644 --- a/test/bem/_at-theme.scss +++ b/test/bem/_at-theme.scss @@ -10,49 +10,49 @@ // @include it('at-theme') { - @include assert('single theme') { /// 1 /// - @include output(false) { - @include bem.block('something') { - @include bem.at-theme('theme') { - font-size: 2em; - } - } - } - - @include expect(false) { - .t-theme .something, - [class*=' t-'] .t-theme .something, - [class^='t-'] .t-theme .something { - font-size: 2em; - } - } - } - - @include assert('with sub-theme') { /// 2 /// - @include output(false) { - @include bem.block('something') { - @include bem.at-theme('theme') { - font-size: 2em; - } - - @include bem.at-theme('theme', 'subtheme') { - font-size: 3em; - } - } - } - - @include expect(false) { - .t-theme .something, - [class*=' t-'] .t-theme .something, - [class^='t-'] .t-theme .something { - font-size: 2em; - } - - .t-theme .t-subtheme .something, - [class*=' t-'] .t-theme .t-subtheme .something, - [class^='t-'] .t-theme .t-subtheme .something { - font-size: 3em; - } - } - } + @include assert('single theme') { /// 1 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('theme') { + font-size: 2em; + } + } + } + + @include expect(false) { + .t-theme .something, + [class*=' t-'] .t-theme .something, + [class^='t-'] .t-theme .something { + font-size: 2em; + } + } + } + + @include assert('with sub-theme') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('theme') { + font-size: 2em; + } + + @include bem.at-theme('theme', 'subtheme') { + font-size: 3em; + } + } + } + + @include expect(false) { + .t-theme .something, + [class*=' t-'] .t-theme .something, + [class^='t-'] .t-theme .something { + font-size: 2em; + } + + .t-theme .t-subtheme .something, + [class*=' t-'] .t-theme .t-subtheme .something, + [class^='t-'] .t-theme .t-subtheme .something { + font-size: 3em; + } + } + } } diff --git a/test/bem/_block.scss b/test/bem/_block.scss index fb3a545..e883567 100644 --- a/test/bem/_block.scss +++ b/test/bem/_block.scss @@ -1,5 +1,6 @@ // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations +@use 'sass:map'; @use 'true' as *; @use '../../src/bem'; @@ -12,77 +13,83 @@ // @include it('block') { - @include assert('without namespace') { /// 1 /// - @include output(false) { - @include bem.block('something') { - font-size: 1em; - } - } + @include assert('without namespace') { /// 1 /// + @include output(false) { + @include bem.block('something') { + font-size: 1em; + } + } - @include expect(false) { - .something { - font-size: 1em; - } - } - } + @include expect(false) { + .something { + font-size: 1em; + } + } + } - @each $ns in map-keys(bem.$namespaces) { - @include assert('with namespace "#{$ns}"') { /// 2 /// - @include output(false) { - @include bem.block('something', $ns) { - font-size: 1em; - } - } + @each $ns in map.keys(bem.$namespaces) { + @include assert('with namespace "#{$ns}"') { /// 2 /// + @include output(false) { + @include bem.block('something', $ns) { + font-size: 1em; + } + } - @include expect(false) { - @if $ns != 'theme' { - .#{map-get(bem.$namespaces, $ns)}-something { - font-size: 1em; - } - } @else { - .t-something, - [class*=' t-'] .t-something, - [class^='t-'] .t-something { - font-size: 1em; - } - } - } - } - } + @include expect(false) { + @layer #{$ns} { + @if $ns != 'theme' { + .#{map-get(bem.$namespaces, $ns)}-something { + font-size: 1em; + } + } @else { + .t-something, + [class*=' t-'] .t-something, + [class^='t-'] .t-something { + font-size: 1em; + } + } + } + } + } + } - @include assert('nested') { /// 3 /// - @include output(false) { - @include bem.theme('theme') { - @include bem.theme('subtheme') { - @include bem.block('something') { - font-size: 2em; - } - } - } - } + @include assert('nested') { /// 3 /// + @include output(false) { + @include bem.theme('theme') { + @include bem.theme('subtheme') { + @include bem.block('something') { + font-size: 2em; + } + } + } + } - @include expect(false) { - .t-theme .t-subtheme .something, - [class*=' t-'] .t-theme .t-subtheme .something, - [class^='t-'] .t-theme .t-subtheme .something { - font-size: 2em; - } - } - } + @include expect(false) { + @layer theme { + @layer theme { + .t-theme .t-subtheme .something, + [class*=' t-'] .t-theme .t-subtheme .something, + [class^='t-'] .t-theme .t-subtheme .something { + font-size: 2em; + } + } + } + } + } - @include assert('within selector') { /// 4 /// - @include output(false) { - .sel { - @include bem.block('something') { - font-size: 2em; - } - } - } + @include assert('within selector') { /// 4 /// + @include output(false) { + .sel { + @include bem.block('something') { + font-size: 2em; + } + } + } - @include expect(false) { - .sel .something { - font-size: 2em; - } - } - } + @include expect(false) { + .sel .something { + font-size: 2em; + } + } + } } diff --git a/test/bem/_composed-of.scss b/test/bem/_composed-of.scss index fcbf2c4..6a5f4ba 100644 --- a/test/bem/_composed-of.scss +++ b/test/bem/_composed-of.scss @@ -1,5 +1,6 @@ // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations +@use 'sass:map'; @use 'true' as *; @use '../../src/bem'; @@ -12,141 +13,151 @@ // @include it('composed-of') { - @include assert('without namespace, single') { /// 1 /// - @include output(false) { - @include bem.block('something') { - font-size: 1em; - } - - @include bem.block('another') { - @include bem.composed-of('something'); - - font-size: 2em; - } - } - - @include expect(false) { - .something { - font-size: 1em; - } - - .another { - font-size: 2em; - } - } - } - - @each $ns in map-keys(bem.$namespaces) { - @include assert('with namespace "#{$ns}", single') { /// 2 /// - @include output(false) { - @include bem.block('something', $ns) { - font-size: 1em; - } - - @include bem.block('another') { - @include bem.composed-of('something' $ns); - - font-size: 2em; - } - } - - @include expect(false) { - @if $ns != 'theme' { - .#{map-get(bem.$namespaces, $ns)}-something { - font-size: 1em; - } - } @else { - .t-something, - [class*=' t-'] .t-something, - [class^='t-'] .t-something { - font-size: 1em; - } - } - - .another { - font-size: 2em; - } - } - } - } - - @include assert('without namespace, multiple') { /// 3 /// - @include output(false) { - @include bem.block('something') { - font-size: 1em; - } - - @include bem.block('somethingElse') { - font-size: 1em; - } - - @include bem.block('another') { - @include bem.composed-of('something', 'somethingElse'); - - font-size: 2em; - } - } - - @include expect(false) { - .something { - font-size: 1em; - } - - .somethingElse { - font-size: 1em; - } - - .another { - font-size: 2em; - } - } - } - - @each $ns in map-keys(bem.$namespaces) { - @include assert('with namespace "#{$ns}", multiple') { /// 4 /// - @include output(false) { - @include bem.block('something', $ns) { - font-size: 1em; - } - - @include bem.block('somethingElse', $ns) { - font-size: 1em; - } - - @include bem.block('another') { - @include bem.composed-of('something' $ns, 'somethingElse' $ns); - - font-size: 2em; - } - } - - @include expect(false) { - @if $ns != 'theme' { - .#{map-get(bem.$namespaces, $ns)}-something { - font-size: 1em; - } - - .#{map-get(bem.$namespaces, $ns)}-somethingElse { - font-size: 1em; - } - } @else { - .t-something, - [class*=' t-'] .t-something, - [class^='t-'] .t-something { - font-size: 1em; - } - - .t-somethingElse, - [class*=' t-'] .t-somethingElse, - [class^='t-'] .t-somethingElse { - font-size: 1em; - } - } - - .another { - font-size: 2em; - } - } - } - } + @include assert('without namespace, single') { /// 1 /// + @include output(false) { + @include bem.block('something') { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something'); + + font-size: 2em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + + .another { + font-size: 2em; + } + } + } + + @each $ns in map.keys(bem.$namespaces) { + @include assert('with namespace "#{$ns}", single') { /// 2 /// + @include output(false) { + @include bem.block('something', $ns) { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something' $ns); + + font-size: 2em; + } + } + + @include expect(false) { + @layer #{$ns} { + @if $ns != 'theme' { + .#{map.get(bem.$namespaces, $ns)}-something { + font-size: 1em; + } + } @else { + .t-something, + [class*=' t-'] .t-something, + [class^='t-'] .t-something { + font-size: 1em; + } + } + } + + .another { + font-size: 2em; + } + } + } + } + + @include assert('without namespace, multiple') { /// 3 /// + @include output(false) { + @include bem.block('something') { + font-size: 1em; + } + + @include bem.block('somethingElse') { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something', 'somethingElse'); + + font-size: 2em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + + .somethingElse { + font-size: 1em; + } + + .another { + font-size: 2em; + } + } + } + + @each $ns in map.keys(bem.$namespaces) { + @include assert('with namespace "#{$ns}", multiple') { /// 4 /// + @include output(false) { + @include bem.block('something', $ns) { + font-size: 1em; + } + + @include bem.block('somethingElse', $ns) { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something' $ns, 'somethingElse' $ns); + + font-size: 2em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + @layer #{$ns} { + .#{map.get(bem.$namespaces, $ns)}-something { + font-size: 1em; + } + } + + @layer #{$ns} { + .#{map.get(bem.$namespaces, $ns)}-somethingElse { + font-size: 1em; + } + } + } @else { + @layer #{$ns} { + .t-something, + [class*=' t-'] .t-something, + [class^='t-'] .t-something { + font-size: 1em; + } + } + + @layer #{$ns} { + .t-somethingElse, + [class*=' t-'] .t-somethingElse, + [class^='t-'] .t-somethingElse { + font-size: 1em; + } + } + } + + .another { + font-size: 2em; + } + } + } + } } diff --git a/test/bem/_element.scss b/test/bem/_element.scss index c8839de..dd4efd4 100644 --- a/test/bem/_element.scss +++ b/test/bem/_element.scss @@ -22,473 +22,473 @@ // @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; - } - } - } + @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; + } + } + } } diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss index 33deca0..9679566 100644 --- a/test/bem/_examples.scss +++ b/test/bem/_examples.scss @@ -11,217 +11,223 @@ // @include it('Examples') { - @include assert('Media object') { /// 1 /// - @include output { - @include bem.object('media') { - display: flex; - align-items: flex-start; - justify-content: flex-start; - - @include bem.elem('image') { - display: block; - flex: 0 0 auto; - order: 1; - overflow: hidden; - } - - @include bem.elem('body') { - order: 2; - } - - @include bem.modifier('rtl') { - justify-content: flex-end; - - @include bem.elem('image') { - order: 2; - } - - @include bem.elem('body') { - order: 1; - } - } - } - } - - @include expect { - .o-media { - display: flex; - align-items: flex-start; - justify-content: flex-start; - } - - .o-media__image { - display: block; - flex: 0 0 auto; - order: 1; - overflow: hidden; - } - - .o-media__body { - order: 2; - } - - .o-media--rtl { - justify-content: flex-end; - - .o-media__image { - order: 2; - } - - .o-media__body { - order: 1; - } - } - } - } - - @include assert('Tabs') { /// 2 /// - @include output { - @include bem.component('tabs') { - position: relative; - - @include bem.elem('tab') { - float: left; - } - - @include bem.elem('tabRadio') { - position: absolute; - top: -9999px; - left: -9999px; - - &:checked { - @include bem.sibling-elem('tabLabel') { - font-weight: bold; - } - - @include bem.sibling-elem('tabContent') { - display: block; - } - } - } - - @include bem.elem('tabLabel') { - cursor: pointer; - - &:hover, - &:active { - text-decoration: underline; - } - } - - @include bem.elem('tabContent') { - position: absolute; - left: 0; - display: none; - } - } - } - - @include expect { - .c-tabs { - position: relative; - } - - .c-tabs__tab { - float: left; - } - - .c-tabs__tabRadio { - position: absolute; - top: -9999px; - left: -9999px; - } - - .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel { - font-weight: bold; - } - - .c-tabs__tabRadio:checked ~ .c-tabs__tabContent { - display: block; - } - - .c-tabs__tabLabel { - cursor: pointer; - } - - .c-tabs__tabLabel:hover, - .c-tabs__tabLabel:active { - text-decoration: underline; - } - - .c-tabs__tabContent { - position: absolute; - left: 0; - display: none; - } - } - } - - @include assert('Accordion') { /// 3 /// - @include output { - @include bem.component('accordion') { - @include bem.elem('section') { - // nothing to do - } - - @include bem.elem('sectionCheckbox') { - position: absolute; - top: -9999px; - left: -9999px; - - &:checked { - @include bem.sibling-elem('sectionLabel') { - font-weight: bold; - } - - @include bem.sibling-elem('sectionContent') { - display: block; - } - } - } - - @include bem.elem('sectionLabel') { - cursor: pointer; - - &:hover, - &:active { - text-decoration: underline; - } - } - - @include bem.elem('sectionContent') { - display: none; - } - } - } - - @include expect { - .c-accordion__sectionCheckbox { - position: absolute; - top: -9999px; - left: -9999px; - } - - .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel { - font-weight: bold; - } - - .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent { - display: block; - } - - .c-accordion__sectionLabel { - cursor: pointer; - } - - .c-accordion__sectionLabel:hover, - .c-accordion__sectionLabel:active { - text-decoration: underline; - } - - .c-accordion__sectionContent { - display: none; - } - } - } + @include assert('Media object') { /// 1 /// + @include output { + @include bem.object('media') { + display: flex; + align-items: flex-start; + justify-content: flex-start; + + @include bem.elem('image') { + display: block; + flex: 0 0 auto; + order: 1; + overflow: hidden; + } + + @include bem.elem('body') { + order: 2; + } + + @include bem.modifier('rtl') { + justify-content: flex-end; + + @include bem.elem('image') { + order: 2; + } + + @include bem.elem('body') { + order: 1; + } + } + } + } + + @include expect { + @layer object { + .o-media { + display: flex; + align-items: flex-start; + justify-content: flex-start; + } + + .o-media__image { + display: block; + flex: 0 0 auto; + order: 1; + overflow: hidden; + } + + .o-media__body { + order: 2; + } + + .o-media--rtl { + justify-content: flex-end; + + .o-media__image { + order: 2; + } + + .o-media__body { + order: 1; + } + } + } + } + } + + @include assert('Tabs') { /// 2 /// + @include output { + @include bem.component('tabs') { + position: relative; + + @include bem.elem('tab') { + float: left; + } + + @include bem.elem('tabRadio') { + position: absolute; + top: -9999px; + left: -9999px; + + &:checked { + @include bem.sibling-elem('tabLabel') { + font-weight: bold; + } + + @include bem.sibling-elem('tabContent') { + display: block; + } + } + } + + @include bem.elem('tabLabel') { + cursor: pointer; + + &:hover, + &:active { + text-decoration: underline; + } + } + + @include bem.elem('tabContent') { + position: absolute; + left: 0; + display: none; + } + } + } + + @include expect { + @layer component { + .c-tabs { + position: relative; + } + + .c-tabs__tab { + float: left; + } + + .c-tabs__tabRadio { + position: absolute; + top: -9999px; + left: -9999px; + } + + .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel { + font-weight: bold; + } + + .c-tabs__tabRadio:checked ~ .c-tabs__tabContent { + display: block; + } + + .c-tabs__tabLabel { + cursor: pointer; + } + + .c-tabs__tabLabel:hover, + .c-tabs__tabLabel:active { + text-decoration: underline; + } + + .c-tabs__tabContent { + position: absolute; + left: 0; + display: none; + } + } + } + } + + @include assert('Accordion') { /// 3 /// + @include output { + @include bem.component('accordion') { + @include bem.elem('section') { + // nothing to do + } + + @include bem.elem('sectionCheckbox') { + position: absolute; + top: -9999px; + left: -9999px; + + &:checked { + @include bem.sibling-elem('sectionLabel') { + font-weight: bold; + } + + @include bem.sibling-elem('sectionContent') { + display: block; + } + } + } + + @include bem.elem('sectionLabel') { + cursor: pointer; + + &:hover, + &:active { + text-decoration: underline; + } + } + + @include bem.elem('sectionContent') { + display: none; + } + } + } + + @include expect { + @layer component { + .c-accordion__sectionCheckbox { + position: absolute; + top: -9999px; + left: -9999px; + } + + .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel { + font-weight: bold; + } + + .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent { + display: block; + } + + .c-accordion__sectionLabel { + cursor: pointer; + } + + .c-accordion__sectionLabel:hover, + .c-accordion__sectionLabel:active { + text-decoration: underline; + } + + .c-accordion__sectionContent { + display: none; + } + } + } + } } diff --git a/test/bem/_modifier.scss b/test/bem/_modifier.scss index 934efa3..419aa91 100644 --- a/test/bem/_modifier.scss +++ b/test/bem/_modifier.scss @@ -23,633 +23,633 @@ // @include it('modifier') { - @include assert('block modifier') { /// 1 /// - @include output { - @include bem.block('something') { - @include bem.modifier('mod') { - font-size: 1.5em; - - @include bem.modifier('submod') { - font-size: 1.75em; - } - } - } - } - - @include expect { - .something--mod { - font-size: 1.5em; - } - - .something--mod.something--submod { - font-size: 1.75em; - } - } - } - - @include assert('block modifier, in at-theme') { /// 2 /// - @include output(false) { - @include bem.block('something') { - @include bem.at-theme('dark') { - @include bem.modifier('mod') { - font-size: 1.5em; - - @include bem.modifier('submod') { - font-size: 1.75em; - } - } - } - } - } - - @include expect(false) { - .t-dark .something--mod, - [class*=' t-'] .t-dark .something--mod, - [class^='t-'] .t-dark .something--mod { - font-size: 1.5em; - } - - .t-dark .something--mod.something--submod, - [class*=' t-'] .t-dark .something--mod.something--submod, - [class^='t-'] .t-dark .something--mod.something--submod { - font-size: 1.75em; - } - } - } - - @include assert('element modifier, single element') { /// 3 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something__child--mod { - font-size: 2.5em; - } - - .something__child--mod.something__child--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple elements') { /// 4 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something__child1--mod, - .something__child2--mod { - font-size: 2.5em; - } - - .something__child1--mod.something__child1--submod, - .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, single related element') { /// 5 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1') { - @include bem.next-elem('child2') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2--mod { - font-size: 2.5em; - } - - .something__child1 + .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple related elements') { /// 6 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1') { - @include bem.next-elem('child2', 'child3') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2--mod, - .something__child1 + .something__child3--mod { - font-size: 2.5em; - } - - .something__child1 + .something__child2--mod.something__child2--submod, - .something__child1 + .something__child3--mod.something__child3--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, single element, manual selector before') { /// 7 /// - @include output(false) { - @include bem.block('something') { - &:hover { - @include bem.elem('child1') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include bem.elem('child2') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1--mod { - font-size: 2.5em; - } - - .something:hover .something__child1--mod.something__child1--submod { - font-size: 2.75em; - } - - .test .something__child2--mod { - font-size: 2.5em; - } - - .test .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// - @include output(false) { - @include bem.block('something') { - &:hover { - @include bem.elem('child1', 'child2') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include bem.elem('child3', 'child4') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1--mod, - .something:hover .something__child2--mod { - font-size: 2.5em; - } - - .something:hover .something__child1--mod.something__child1--submod, - .something:hover .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - - .test .something__child3--mod, - .test .something__child4--mod { - font-size: 2.5em; - } - - .test .something__child3--mod.something__child3--submod, - .test .something__child4--mod.something__child4--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, single related element, manual selector before') { /// 9 /// - @include output(false) { - @include bem.block('something') { - &:hover { - @include bem.elem('child1') { - @include bem.next-elem('child2') { - @include bem.modifier('mod1') { - font-size: 2.5em; - - @include bem.modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - .test & { - @include bem.elem('child3') { - @include bem.next-elem('child4') { - @include bem.modifier('mod1') { - font-size: 2.5em; - - @include bem.modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - @include bem.elem('child5') { - &:hover { - @include bem.next-elem('child6') { - @include bem.modifier('mod2') { - font-size: 2.5em; - - @include bem.modifier('submod2') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include bem.next-elem('child7') { - @include bem.modifier('mod2') { - font-size: 2.5em; - - @include bem.modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1 + .something__child2--mod1 { - font-size: 2.5em; - } - - .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 { - font-size: 2.75em; - } - - .test .something__child3 + .something__child4--mod1 { - font-size: 2.5em; - } - - .test .something__child3 + .something__child4--mod1.something__child4--submod1 { - font-size: 2.75em; - } - - .something__child5:hover + .something__child6--mod2 { - font-size: 2.5em; - } - - .something__child5:hover + .something__child6--mod2.something__child6--submod2 { - font-size: 2.75em; - } - - .test .something__child5 + .something__child7--mod2 { - font-size: 2.5em; - } - - .test .something__child5 + .something__child7--mod2.something__child7--submod2 { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// - @include output(false) { - @include bem.block('something') { - &:hover { - @include bem.elem('child1') { - @include bem.next-elem('child2', 'child3') { - @include bem.modifier('mod1') { - font-size: 2.5em; - - @include bem.modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - .test & { - @include bem.elem('child4') { - @include bem.next-elem('child5', 'child6') { - @include bem.modifier('mod1') { - font-size: 2.5em; - - @include bem.modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - @include bem.elem('child7') { - &:hover { - @include bem.next-elem('child8', 'child9') { - @include bem.modifier('mod2') { - font-size: 2.5em; - - @include bem.modifier('submod2') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include bem.next-elem('child10', 'child11') { - @include bem.modifier('mod2') { - font-size: 2.5em; - - @include bem.modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1 + .something__child2--mod1, - .something:hover .something__child1 + .something__child3--mod1 { - font-size: 2.5em; - } - - .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1, - .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 { - font-size: 2.75em; - } - - .test .something__child4 + .something__child5--mod1, - .test .something__child4 + .something__child6--mod1 { - font-size: 2.5em; - } - - .test .something__child4 + .something__child5--mod1.something__child5--submod1, - .test .something__child4 + .something__child6--mod1.something__child6--submod1 { - font-size: 2.75em; - } - - .something__child7:hover + .something__child8--mod2, - .something__child7:hover + .something__child9--mod2 { - font-size: 2.5em; - } - - .something__child7:hover + .something__child8--mod2.something__child8--submod2, - .something__child7:hover + .something__child9--mod2.something__child9--submod2 { - font-size: 2.75em; - } - - .test .something__child7 + .something__child10--mod2, - .test .something__child7 + .something__child11--mod2 { - font-size: 2.5em; - } - - .test .something__child7 + .something__child10--mod2.something__child10--submod2, - .test .something__child7 + .something__child11--mod2.something__child11--submod2 { - font-size: 2.75em; - } - } - } - - // @include assert('element modifier, in at-theme') { /// 11 /// - // @include output(false) { - // @include bem.block('something') { - // @include bem.at-theme('dark') { - // @include bem.elem('child') { - // @include bem.modifier('mod') { - // font-size: 2.5em; - // - // @include bem.modifier('submod') { - // font-size: 2.75em; - // } - // } - // } - // } - // } - // } - // - // @include expect(false) { - // .t-dark .something__child--mod, - // [class*=' t-'] .t-dark .something__child--mod, - // [class^='t-'] .t-dark .something__child--mod { - // font-size: 2.5em; - // } - // - // .t-dark .something__child--mod.something__child--submod, - // [class*=' t-'] .t-dark .something__child--mod.something__child--submod, - // [class^='t-'] .t-dark .something__child--mod.something__child--submod { - // font-size: 2.75em; - // } - // } - // } - - @include assert('nested block modifiers, extending') { /// 12 /// - @include output { - @include bem.block('something') { - @include bem.modifier('mod') { - font-size: 1.5em; - - @include bem.modifier('submod' true) { - font-size: 1.75em; - } - } - } - } - - @include expect { - .something--mod { - font-size: 1.5em; - } - - .something--mod--submod { - font-size: 1.75em; - } - } - } - - @include assert('nested element modifiers, extending') { /// 13 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.modifier('mod') { - font-size: 2.5em; - - @include bem.modifier('submod' true) { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something__child--mod { - font-size: 2.5em; - } - - .something__child--mod--submod { - font-size: 2.75em; - } - } - } - - @include assert('block and element modifiers, single element') { /// 14 /// - @include output { - @include bem.block('something') { - @include bem.modifier('mod1') { - font-size: 1.5em; - - @include bem.modifier('submod1') { - font-size: 1.75em; - } - - @include bem.elem('child') { - @include bem.modifier('mod2') { - font-size: 2.5em; - - @include bem.modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something--mod1 { - font-size: 1.5em; - } - - .something--mod1.something--submod1 { - font-size: 1.75em; - } - - .something--mod1 .something__child--mod2 { - font-size: 2.5em; - } - - .something--mod1 .something__child--mod2.something__child--submod2 { - font-size: 2.75em; - } - } - } - - @include assert('block and element modifiers, multiple elements') { /// 15 /// - @include output { - @include bem.block('something') { - @include bem.modifier('mod1') { - font-size: 1.5em; - - @include bem.modifier('submod1') { - font-size: 1.75em; - } - - @include bem.elem('child1', 'child2') { - @include bem.modifier('mod2') { - font-size: 2.5em; - - @include bem.modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something--mod1 { - font-size: 1.5em; - } - - .something--mod1.something--submod1 { - font-size: 1.75em; - } - - .something--mod1 .something__child1--mod2, - .something--mod1 .something__child2--mod2 { - font-size: 2.5em; - } - - .something--mod1 .something__child1--mod2.something__child1--submod2, - .something--mod1 .something__child2--mod2.something__child2--submod2 { - font-size: 2.75em; - } - } - } + @include assert('block modifier') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + font-size: 1.5em; + + @include bem.modifier('submod') { + font-size: 1.75em; + } + } + } + } + + @include expect { + .something--mod { + font-size: 1.5em; + } + + .something--mod.something--submod { + font-size: 1.75em; + } + } + } + + @include assert('block modifier, in at-theme') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('dark') { + @include bem.modifier('mod') { + font-size: 1.5em; + + @include bem.modifier('submod') { + font-size: 1.75em; + } + } + } + } + } + + @include expect(false) { + .t-dark .something--mod, + [class*=' t-'] .t-dark .something--mod, + [class^='t-'] .t-dark .something--mod { + font-size: 1.5em; + } + + .t-dark .something--mod.something--submod, + [class*=' t-'] .t-dark .something--mod.something--submod, + [class^='t-'] .t-dark .something--mod.something--submod { + font-size: 1.75em; + } + } + } + + @include assert('element modifier, single element') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something__child--mod { + font-size: 2.5em; + } + + .something__child--mod.something__child--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple elements') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something__child1--mod, + .something__child2--mod { + font-size: 2.5em; + } + + .something__child1--mod.something__child1--submod, + .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, single related element') { /// 5 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.next-elem('child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2--mod { + font-size: 2.5em; + } + + .something__child1 + .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple related elements') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.next-elem('child2', 'child3') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2--mod, + .something__child1 + .something__child3--mod { + font-size: 2.5em; + } + + .something__child1 + .something__child2--mod.something__child2--submod, + .something__child1 + .something__child3--mod.something__child3--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, single element, manual selector before') { /// 7 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.elem('child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1--mod { + font-size: 2.5em; + } + + .something:hover .something__child1--mod.something__child1--submod { + font-size: 2.75em; + } + + .test .something__child2--mod { + font-size: 2.5em; + } + + .test .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.elem('child3', 'child4') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1--mod, + .something:hover .something__child2--mod { + font-size: 2.5em; + } + + .something:hover .something__child1--mod.something__child1--submod, + .something:hover .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + + .test .something__child3--mod, + .test .something__child4--mod { + font-size: 2.5em; + } + + .test .something__child3--mod.something__child3--submod, + .test .something__child4--mod.something__child4--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, single related element, manual selector before') { /// 9 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + @include bem.next-elem('child2') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + .test & { + @include bem.elem('child3') { + @include bem.next-elem('child4') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + @include bem.elem('child5') { + &:hover { + @include bem.next-elem('child6') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.next-elem('child7') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 + .something__child2--mod1 { + font-size: 2.5em; + } + + .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 { + font-size: 2.75em; + } + + .test .something__child3 + .something__child4--mod1 { + font-size: 2.5em; + } + + .test .something__child3 + .something__child4--mod1.something__child4--submod1 { + font-size: 2.75em; + } + + .something__child5:hover + .something__child6--mod2 { + font-size: 2.5em; + } + + .something__child5:hover + .something__child6--mod2.something__child6--submod2 { + font-size: 2.75em; + } + + .test .something__child5 + .something__child7--mod2 { + font-size: 2.5em; + } + + .test .something__child5 + .something__child7--mod2.something__child7--submod2 { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + @include bem.next-elem('child2', 'child3') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + .test & { + @include bem.elem('child4') { + @include bem.next-elem('child5', 'child6') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + @include bem.elem('child7') { + &:hover { + @include bem.next-elem('child8', 'child9') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.next-elem('child10', 'child11') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 + .something__child2--mod1, + .something:hover .something__child1 + .something__child3--mod1 { + font-size: 2.5em; + } + + .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1, + .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 { + font-size: 2.75em; + } + + .test .something__child4 + .something__child5--mod1, + .test .something__child4 + .something__child6--mod1 { + font-size: 2.5em; + } + + .test .something__child4 + .something__child5--mod1.something__child5--submod1, + .test .something__child4 + .something__child6--mod1.something__child6--submod1 { + font-size: 2.75em; + } + + .something__child7:hover + .something__child8--mod2, + .something__child7:hover + .something__child9--mod2 { + font-size: 2.5em; + } + + .something__child7:hover + .something__child8--mod2.something__child8--submod2, + .something__child7:hover + .something__child9--mod2.something__child9--submod2 { + font-size: 2.75em; + } + + .test .something__child7 + .something__child10--mod2, + .test .something__child7 + .something__child11--mod2 { + font-size: 2.5em; + } + + .test .something__child7 + .something__child10--mod2.something__child10--submod2, + .test .something__child7 + .something__child11--mod2.something__child11--submod2 { + font-size: 2.75em; + } + } + } + + // @include assert('element modifier, in at-theme') { /// 11 /// + // @include output(false) { + // @include bem.block('something') { + // @include bem.at-theme('dark') { + // @include bem.elem('child') { + // @include bem.modifier('mod') { + // font-size: 2.5em; + // + // @include bem.modifier('submod') { + // font-size: 2.75em; + // } + // } + // } + // } + // } + // } + // + // @include expect(false) { + // .t-dark .something__child--mod, + // [class*=' t-'] .t-dark .something__child--mod, + // [class^='t-'] .t-dark .something__child--mod { + // font-size: 2.5em; + // } + // + // .t-dark .something__child--mod.something__child--submod, + // [class*=' t-'] .t-dark .something__child--mod.something__child--submod, + // [class^='t-'] .t-dark .something__child--mod.something__child--submod { + // font-size: 2.75em; + // } + // } + // } + + @include assert('nested block modifiers, extending') { /// 12 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + font-size: 1.5em; + + @include bem.modifier('submod' true) { + font-size: 1.75em; + } + } + } + } + + @include expect { + .something--mod { + font-size: 1.5em; + } + + .something--mod--submod { + font-size: 1.75em; + } + } + } + + @include assert('nested element modifiers, extending') { /// 13 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod' true) { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something__child--mod { + font-size: 2.5em; + } + + .something__child--mod--submod { + font-size: 2.75em; + } + } + } + + @include assert('block and element modifiers, single element') { /// 14 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod1') { + font-size: 1.5em; + + @include bem.modifier('submod1') { + font-size: 1.75em; + } + + @include bem.elem('child') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something--mod1 { + font-size: 1.5em; + } + + .something--mod1.something--submod1 { + font-size: 1.75em; + } + + .something--mod1 .something__child--mod2 { + font-size: 2.5em; + } + + .something--mod1 .something__child--mod2.something__child--submod2 { + font-size: 2.75em; + } + } + } + + @include assert('block and element modifiers, multiple elements') { /// 15 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod1') { + font-size: 1.5em; + + @include bem.modifier('submod1') { + font-size: 1.75em; + } + + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something--mod1 { + font-size: 1.5em; + } + + .something--mod1.something--submod1 { + font-size: 1.75em; + } + + .something--mod1 .something__child1--mod2, + .something--mod1 .something__child2--mod2 { + font-size: 2.5em; + } + + .something--mod1 .something__child1--mod2.something__child1--submod2, + .something--mod1 .something__child2--mod2.something__child2--submod2 { + font-size: 2.75em; + } + } + } } 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; + } + } + } } diff --git a/test/bem/_next-twin-element.scss b/test/bem/_next-twin-element.scss index 355e635..3365a0b 100644 --- a/test/bem/_next-twin-element.scss +++ b/test/bem/_next-twin-element.scss @@ -14,143 +14,143 @@ // @include it('next-twin-elem') { - @include assert('single element') { /// 1 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.next-twin-elem { - 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-elem { - font-size: 2em; - } - } - - .test & { - @include bem.next-twin-elem { - 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-elem { - 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-elem { - 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-elem { - font-size: 2em; - } - } - - .test & { - @include bem.next-twin-elem { - 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-elem { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child1--mod + .something__child1, - .something__child2--mod + .something__child2 { - font-size: 2.5em; - } - } - } + @include assert('single element') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.next-twin-elem { + 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-elem { + font-size: 2em; + } + } + + .test & { + @include bem.next-twin-elem { + 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-elem { + 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-elem { + 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-elem { + font-size: 2em; + } + } + + .test & { + @include bem.next-twin-elem { + 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-elem { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__child1, + .something__child2--mod + .something__child2 { + font-size: 2.5em; + } + } + } } diff --git a/test/bem/_related-element.scss b/test/bem/_related-element.scss index 5a829e8..48b3457 100644 --- a/test/bem/_related-element.scss +++ b/test/bem/_related-element.scss @@ -20,443 +20,443 @@ // @include it('related-element') { - @include assert('single element, single related element') { /// 1 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.related-elem('+', 'subchild1') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild2') { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child + .something__subchild1 { - font-size: 2em; - } - - .something__child ~ .something__subchild2 { - font-size: 2em; - } - } - } - - @include assert('single element, single related element, manual selector in-between') { /// 2 /// - @include output(false) { - @include bem.block('something') { - @include bem.elem('child') { - &:hover { - @include bem.related-elem('+', 'subchild1') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild2') { - font-size: 2em; - } - } - - .test & { - @include bem.related-elem('+', 'subchild3') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild4') { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child:hover + .something__subchild1 { - font-size: 2em; - } - - .something__child:hover ~ .something__subchild2 { - font-size: 2em; - } - - .test .something__child + .something__subchild3 { - font-size: 2em; - } - - .test .something__child ~ .something__subchild4 { - font-size: 2em; - } - } - } - - @include assert('single element, single related element, modifier in-between') { /// 3 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.modifier('mod') { - @include bem.related-elem('+', 'subchild1') { - font-size: 2.5em; - } - - @include bem.related-elem('~', 'subchild2') { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child--mod + .something__subchild1 { - font-size: 2.5em; - } - - .something__child--mod ~ .something__subchild2 { - font-size: 2.5em; - } - } - } - - @include assert('single element, multiple related elements') { /// 4 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.related-elem('+', 'subchild1', 'subchild2') { - font-size: 2.5em; - } - - @include bem.related-elem('~', 'subchild3', 'subchild4') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child + .something__subchild1, - .something__child + .something__subchild2 { - font-size: 2.5em; - } - - .something__child ~ .something__subchild3, - .something__child ~ .something__subchild4 { - font-size: 2.5em; - } - } - } - - @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// - @include output(false) { - @include bem.block('something') { - @include bem.elem('child') { - &:hover { - @include bem.related-elem('+', 'subchild1', 'subchild2') { - font-size: 2.5em; - } - - @include bem.related-elem('~', 'subchild3', 'subchild4') { - font-size: 2.5em; - } - } - - .test & { - @include bem.related-elem('+', 'subchild5', 'subchild6') { - font-size: 2.5em; - } - - @include bem.related-elem('~', 'subchild7', 'subchild8') { - font-size: 2.5em; - } - } - } - } - } - - @include expect(false) { - .something__child:hover + .something__subchild1, - .something__child:hover + .something__subchild2 { - font-size: 2.5em; - } - - .something__child:hover ~ .something__subchild3, - .something__child:hover ~ .something__subchild4 { - font-size: 2.5em; - } - - .test .something__child + .something__subchild5, - .test .something__child + .something__subchild6 { - font-size: 2.5em; - } - - .test .something__child ~ .something__subchild7, - .test .something__child ~ .something__subchild8 { - font-size: 2.5em; - } - } - } - - @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.modifier('mod') { - @include bem.related-elem('+', 'subchild1', 'subchild2') { - font-size: 2.5em; - } - - @include bem.related-elem('~', 'subchild3', 'subchild4') { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child--mod + .something__subchild1, - .something__child--mod + .something__subchild2 { - font-size: 2.5em; - } - - .something__child--mod ~ .something__subchild3, - .something__child--mod ~ .something__subchild4 { - font-size: 2.5em; - } - } - } - - @include assert('multiple elements, single related element') { /// 7 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.related-elem('+', 'subchild1') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild2') { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child1 + .something__subchild1, - .something__child2 + .something__subchild1 { - font-size: 2em; - } - - .something__child1 ~ .something__subchild2, - .something__child2 ~ .something__subchild2 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// - @include output(false) { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - &:hover { - @include bem.related-elem('+', 'subchild1') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild2') { - font-size: 2em; - } - } - - .test & { - @include bem.related-elem('+', 'subchild3') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild4') { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child1:hover + .something__subchild1, - .something__child2:hover + .something__subchild1 { - font-size: 2em; - } - - .something__child1:hover ~ .something__subchild2, - .something__child2:hover ~ .something__subchild2 { - font-size: 2em; - } - - .test .something__child1 + .something__subchild3, - .test .something__child2 + .something__subchild3 { - font-size: 2em; - } - - .test .something__child1 ~ .something__subchild4, - .test .something__child2 ~ .something__subchild4 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.modifier('mod') { - @include bem.related-elem('+', 'subchild1') { - font-size: 2.5em; - } - - @include bem.related-elem('~', 'subchild2') { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child1--mod + .something__subchild1, - .something__child2--mod + .something__subchild1 { - font-size: 2.5em; - } - - .something__child1--mod ~ .something__subchild2, - .something__child2--mod ~ .something__subchild2 { - font-size: 2.5em; - } - } - } - - @include assert('multiple elements, multiple related elements') { /// 10 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.related-elem('+', 'subchild1', 'subchild2') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild3', 'subchild4') { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child1 + .something__subchild1, - .something__child2 + .something__subchild1, - .something__child1 + .something__subchild2, - .something__child2 + .something__subchild2 { - font-size: 2em; - } - - .something__child1 ~ .something__subchild3, - .something__child2 ~ .something__subchild3, - .something__child1 ~ .something__subchild4, - .something__child2 ~ .something__subchild4 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// - @include output(false) { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - &:hover { - @include bem.related-elem('+', 'subchild1', 'subchild2') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild3', 'subchild4') { - font-size: 2em; - } - } - - .test & { - @include bem.related-elem('+', 'subchild5', 'subchild6') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild7', 'subchild8') { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child1:hover + .something__subchild1, - .something__child2:hover + .something__subchild1, - .something__child1:hover + .something__subchild2, - .something__child2:hover + .something__subchild2 { - font-size: 2em; - } - - .something__child1:hover ~ .something__subchild3, - .something__child2:hover ~ .something__subchild3, - .something__child1:hover ~ .something__subchild4, - .something__child2:hover ~ .something__subchild4 { - font-size: 2em; - } - - .test .something__child1 + .something__subchild5, - .test .something__child2 + .something__subchild5, - .test .something__child1 + .something__subchild6, - .test .something__child2 + .something__subchild6 { - font-size: 2em; - } - - .test .something__child1 ~ .something__subchild7, - .test .something__child2 ~ .something__subchild7, - .test .something__child1 ~ .something__subchild8, - .test .something__child2 ~ .something__subchild8 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.modifier('mod') { - @include bem.related-elem('+', 'subchild1', 'subchild2') { - font-size: 2em; - } - - @include bem.related-elem('~', 'subchild3', 'subchild4') { - font-size: 2em; - } - } - } - } - } - - @include expect { - .something__child1--mod + .something__subchild1, - .something__child2--mod + .something__subchild1, - .something__child1--mod + .something__subchild2, - .something__child2--mod + .something__subchild2 { - font-size: 2em; - } - - .something__child1--mod ~ .something__subchild3, - .something__child2--mod ~ .something__subchild3, - .something__child1--mod ~ .something__subchild4, - .something__child2--mod ~ .something__subchild4 { - font-size: 2em; - } - } - } + @include assert('single element, single related element') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child + .something__subchild1 { + font-size: 2em; + } + + .something__child ~ .something__subchild2 { + font-size: 2em; + } + } + } + + @include assert('single element, single related element, manual selector in-between') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild3') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild4') { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__subchild1 { + font-size: 2em; + } + + .something__child:hover ~ .something__subchild2 { + font-size: 2em; + } + + .test .something__child + .something__subchild3 { + font-size: 2em; + } + + .test .something__child ~ .something__subchild4 { + font-size: 2em; + } + } + } + + @include assert('single element, single related element, modifier in-between') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__subchild1 { + font-size: 2.5em; + } + + .something__child--mod ~ .something__subchild2 { + font-size: 2.5em; + } + } + } + + @include assert('single element, multiple related elements') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child + .something__subchild1, + .something__child + .something__subchild2 { + font-size: 2.5em; + } + + .something__child ~ .something__subchild3, + .something__child ~ .something__subchild4 { + font-size: 2.5em; + } + } + } + + @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild5', 'subchild6') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild7', 'subchild8') { + font-size: 2.5em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__subchild1, + .something__child:hover + .something__subchild2 { + font-size: 2.5em; + } + + .something__child:hover ~ .something__subchild3, + .something__child:hover ~ .something__subchild4 { + font-size: 2.5em; + } + + .test .something__child + .something__subchild5, + .test .something__child + .something__subchild6 { + font-size: 2.5em; + } + + .test .something__child ~ .something__subchild7, + .test .something__child ~ .something__subchild8 { + font-size: 2.5em; + } + } + } + + @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__subchild1, + .something__child--mod + .something__subchild2 { + font-size: 2.5em; + } + + .something__child--mod ~ .something__subchild3, + .something__child--mod ~ .something__subchild4 { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements, single related element') { /// 7 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__subchild1, + .something__child2 + .something__subchild1 { + font-size: 2em; + } + + .something__child1 ~ .something__subchild2, + .something__child2 ~ .something__subchild2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + &:hover { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild3') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild4') { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__subchild1, + .something__child2:hover + .something__subchild1 { + font-size: 2em; + } + + .something__child1:hover ~ .something__subchild2, + .something__child2:hover ~ .something__subchild2 { + font-size: 2em; + } + + .test .something__child1 + .something__subchild3, + .test .something__child2 + .something__subchild3 { + font-size: 2em; + } + + .test .something__child1 ~ .something__subchild4, + .test .something__child2 ~ .something__subchild4 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__subchild1, + .something__child2--mod + .something__subchild1 { + font-size: 2.5em; + } + + .something__child1--mod ~ .something__subchild2, + .something__child2--mod ~ .something__subchild2 { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements, multiple related elements') { /// 10 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__subchild1, + .something__child2 + .something__subchild1, + .something__child1 + .something__subchild2, + .something__child2 + .something__subchild2 { + font-size: 2em; + } + + .something__child1 ~ .something__subchild3, + .something__child2 ~ .something__subchild3, + .something__child1 ~ .something__subchild4, + .something__child2 ~ .something__subchild4 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + &:hover { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild5', 'subchild6') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild7', 'subchild8') { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__subchild1, + .something__child2:hover + .something__subchild1, + .something__child1:hover + .something__subchild2, + .something__child2:hover + .something__subchild2 { + font-size: 2em; + } + + .something__child1:hover ~ .something__subchild3, + .something__child2:hover ~ .something__subchild3, + .something__child1:hover ~ .something__subchild4, + .something__child2:hover ~ .something__subchild4 { + font-size: 2em; + } + + .test .something__child1 + .something__subchild5, + .test .something__child2 + .something__subchild5, + .test .something__child1 + .something__subchild6, + .test .something__child2 + .something__subchild6 { + font-size: 2em; + } + + .test .something__child1 ~ .something__subchild7, + .test .something__child2 ~ .something__subchild7, + .test .something__child1 ~ .something__subchild8, + .test .something__child2 ~ .something__subchild8 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__subchild1, + .something__child2--mod + .something__subchild1, + .something__child1--mod + .something__subchild2, + .something__child2--mod + .something__subchild2 { + font-size: 2em; + } + + .something__child1--mod ~ .something__subchild3, + .something__child2--mod ~ .something__subchild3, + .something__child1--mod ~ .something__subchild4, + .something__child2--mod ~ .something__subchild4 { + font-size: 2em; + } + } + } } diff --git a/test/bem/_state.scss b/test/bem/_state.scss index 674da5f..5a1e1d6 100644 --- a/test/bem/_state.scss +++ b/test/bem/_state.scss @@ -14,167 +14,167 @@ // @include it('state') { - @include assert('single block, single state') { /// 1 /// - @include output { - @include bem.block('something') { - @include bem.is('active') { - font-size: 1.25em; - } - - @include bem.has('state') { - font-size: 1.75em; - } - } - } - - @include expect { - .something.is-active { - font-size: 1.25em; - } - - .something.has-state { - font-size: 1.75em; - } - } - } - - @include assert('single element, single state') { /// 2 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.is('active') { - font-size: 2.25em; - } - - @include bem.has('state') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child.is-active { - font-size: 2.25em; - } - - .something__child.has-state { - font-size: 2.75em; - } - } - } - - @include assert('single block, multiple states') { /// 3 /// - @include output { - @include bem.block('something') { - @include bem.is('active', 'primary') { - font-size: 1.25em; - } - - @include bem.has('state', 'indicator') { - font-size: 1.75em; - } - } - } - - @include expect { - .something.is-active, - .something.is-primary { - font-size: 1.25em; - } - - .something.has-state, - .something.has-indicator { - font-size: 1.75em; - } - } - } - - @include assert('single element, multiple states') { /// 4 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.is('active', 'primary') { - font-size: 2.25em; - } - - @include bem.has('state', 'indicator') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child.is-active, - .something__child.is-primary { - font-size: 2.25em; - } - - .something__child.has-state, - .something__child.has-indicator { - font-size: 2.75em; - } - } - } - - @include assert('multiple elements, single state') { /// 5 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.is('active') { - font-size: 2.25em; - } - - @include bem.has('state') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child1.is-active, - .something__child2.is-active { - font-size: 2.25em; - } - - .something__child1.has-state, - .something__child2.has-state { - font-size: 2.75em; - } - } - } - - @include assert('multiple elements, multiple states') { /// 6 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.is('active', 'primary') { - font-size: 2.25em; - } - - @include bem.has('state', 'indicator') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child1.is-active, - .something__child2.is-active, - .something__child1.is-primary, - .something__child2.is-primary { - font-size: 2.25em; - } - - .something__child1.has-state, - .something__child2.has-state, - .something__child1.has-indicator, - .something__child2.has-indicator { - font-size: 2.75em; - } - } - } + @include assert('single block, single state') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.is('active') { + font-size: 1.25em; + } + + @include bem.has('state') { + font-size: 1.75em; + } + } + } + + @include expect { + .something.is-active { + font-size: 1.25em; + } + + .something.has-state { + font-size: 1.75em; + } + } + } + + @include assert('single element, single state') { /// 2 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.is('active') { + font-size: 2.25em; + } + + @include bem.has('state') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child.is-active { + font-size: 2.25em; + } + + .something__child.has-state { + font-size: 2.75em; + } + } + } + + @include assert('single block, multiple states') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.is('active', 'primary') { + font-size: 1.25em; + } + + @include bem.has('state', 'indicator') { + font-size: 1.75em; + } + } + } + + @include expect { + .something.is-active, + .something.is-primary { + font-size: 1.25em; + } + + .something.has-state, + .something.has-indicator { + font-size: 1.75em; + } + } + } + + @include assert('single element, multiple states') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.is('active', 'primary') { + font-size: 2.25em; + } + + @include bem.has('state', 'indicator') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child.is-active, + .something__child.is-primary { + font-size: 2.25em; + } + + .something__child.has-state, + .something__child.has-indicator { + font-size: 2.75em; + } + } + } + + @include assert('multiple elements, single state') { /// 5 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.is('active') { + font-size: 2.25em; + } + + @include bem.has('state') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child1.is-active, + .something__child2.is-active { + font-size: 2.25em; + } + + .something__child1.has-state, + .something__child2.has-state { + font-size: 2.75em; + } + } + } + + @include assert('multiple elements, multiple states') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.is('active', 'primary') { + font-size: 2.25em; + } + + @include bem.has('state', 'indicator') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child1.is-active, + .something__child2.is-active, + .something__child1.is-primary, + .something__child2.is-primary { + font-size: 2.25em; + } + + .something__child1.has-state, + .something__child2.has-state, + .something__child1.has-indicator, + .something__child2.has-indicator { + font-size: 2.75em; + } + } + } } diff --git a/test/bem/_suffix.scss b/test/bem/_suffix.scss index 34f55b6..cfec25b 100644 --- a/test/bem/_suffix.scss +++ b/test/bem/_suffix.scss @@ -12,86 +12,86 @@ // @include it('suffix') { - @include assert('block suffix') { /// 1 /// - @include output { - @include bem.block('something') { - @include bem.suffix('sm') { - font-size: 1.5em; - } - } - } + @include assert('block suffix') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.suffix('sm') { + font-size: 1.5em; + } + } + } - @include expect { - .something\@sm { - font-size: 1.5em; - } - } - } + @include expect { + .something\@sm { + font-size: 1.5em; + } + } + } - @include assert('element suffix') { /// 2 /// - @include output { - @include bem.block('something') { - @include bem.elem('child') { - @include bem.suffix('sm') { - font-size: 2.5em; - } - } - } - } + @include assert('element suffix') { /// 2 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.suffix('sm') { + font-size: 2.5em; + } + } + } + } - @include expect { - .something__child\@sm { - font-size: 2.5em; - } - } - } + @include expect { + .something__child\@sm { + font-size: 2.5em; + } + } + } - @include assert('modifier suffix') { /// 3 /// - @include output { - @include bem.block('something') { - @include bem.modifier('mod1') { - @include bem.suffix('sm') { - font-size: 1.75em; - } - } + @include assert('modifier suffix') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod1') { + @include bem.suffix('sm') { + font-size: 1.75em; + } + } - @include bem.elem('child') { - @include bem.modifier('mod2') { - @include bem.suffix('sm') { - font-size: 2.75em; - } - } - } - } - } + @include bem.elem('child') { + @include bem.modifier('mod2') { + @include bem.suffix('sm') { + font-size: 2.75em; + } + } + } + } + } - @include expect { - .something--mod1\@sm { - font-size: 1.75em; - } + @include expect { + .something--mod1\@sm { + font-size: 1.75em; + } - .something__child--mod2\@sm { - font-size: 2.75em; - } - } - } + .something__child--mod2\@sm { + font-size: 2.75em; + } + } + } - @include assert('multiple element suffix') { /// 4 /// - @include output { - @include bem.block('something') { - @include bem.elem('child1', 'child2') { - @include bem.suffix('sm') { - font-size: 2.5em; - } - } - } - } + @include assert('multiple element suffix') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.suffix('sm') { + font-size: 2.5em; + } + } + } + } - @include expect { - .something__child1\@sm, - .something__child2\@sm { - font-size: 2.5em; - } - } - } + @include expect { + .something__child1\@sm, + .something__child2\@sm { + font-size: 2.5em; + } + } + } } -- cgit v1.2.3-70-g09d2