From d07f664450ddaaebb44127a4bd057763d13d3f82 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Sun, 1 Nov 2020 20:55:14 +0100 Subject: Init --- test/bem/_examples.scss | 224 +++++++++++ test/bem/_iro-bem-at-theme.scss | 55 +++ test/bem/_iro-bem-block.scss | 85 ++++ test/bem/_iro-bem-composed-of.scss | 149 +++++++ test/bem/_iro-bem-element.scss | 491 +++++++++++++++++++++++ test/bem/_iro-bem-modifier.scss | 654 +++++++++++++++++++++++++++++++ test/bem/_iro-bem-multi.scss | 591 ++++++++++++++++++++++++++++ test/bem/_iro-bem-next-twin-element.scss | 153 ++++++++ test/bem/_iro-bem-related-element.scss | 459 ++++++++++++++++++++++ test/bem/_iro-bem-state.scss | 177 +++++++++ test/bem/_iro-bem-suffix.scss | 94 +++++ 11 files changed, 3132 insertions(+) create mode 100644 test/bem/_examples.scss create mode 100644 test/bem/_iro-bem-at-theme.scss create mode 100644 test/bem/_iro-bem-block.scss create mode 100644 test/bem/_iro-bem-composed-of.scss create mode 100644 test/bem/_iro-bem-element.scss create mode 100644 test/bem/_iro-bem-modifier.scss create mode 100644 test/bem/_iro-bem-multi.scss create mode 100644 test/bem/_iro-bem-next-twin-element.scss create mode 100644 test/bem/_iro-bem-related-element.scss create mode 100644 test/bem/_iro-bem-state.scss create mode 100644 test/bem/_iro-bem-suffix.scss (limited to 'test/bem') diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss new file mode 100644 index 0000000..243ee35 --- /dev/null +++ b/test/bem/_examples.scss @@ -0,0 +1,224 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets + +// +// Included test cases: +// - /// 1 /// - Media object +// - /// 2 /// - Tabs +/// - /// 3 /// - Accordion +// + +@include it('Examples') { + @include assert('Media object') { /// 1 /// + @include output { + @include iro-bem-object('media') { + display: flex; + align-items: flex-start; + justify-content: flex-start; + + @include iro-bem-element('image') { + display: block; + flex: 0 0 auto; + order: 1; + overflow: hidden; + } + + @include iro-bem-element('body') { + order: 2; + } + + @include iro-bem-modifier('rtl') { + justify-content: flex-end; + + @include iro-bem-element('image') { + order: 2; + } + + @include iro-bem-element('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 iro-bem-component('tabs') { + position: relative; + + @include iro-bem-element('tab') { + float: left; + } + + @include iro-bem-element('tabRadio') { + position: absolute; + top: -9999px; + left: -9999px; + + &:checked { + @include iro-bem-sibling-element('tabLabel') { + font-weight: bold; + } + + @include iro-bem-sibling-element('tabContent') { + display: block; + } + } + } + + @include iro-bem-element('tabLabel') { + cursor: pointer; + + &:hover, + &:active { + text-decoration: underline; + } + } + + @include iro-bem-element('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 iro-bem-component('accordion') { + @include iro-bem-element('section') { + // nothing to do + } + + @include iro-bem-element('sectionCheckbox') { + position: absolute; + top: -9999px; + left: -9999px; + + &:checked { + @include iro-bem-sibling-element('sectionLabel') { + font-weight: bold; + } + + @include iro-bem-sibling-element('sectionContent') { + display: block; + } + } + } + + @include iro-bem-element('sectionLabel') { + cursor: pointer; + + &:hover, + &:active { + text-decoration: underline; + } + } + + @include iro-bem-element('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; + } + } + } +} diff --git a/test/bem/_iro-bem-at-theme.scss b/test/bem/_iro-bem-at-theme.scss new file mode 100644 index 0000000..d2d0696 --- /dev/null +++ b/test/bem/_iro-bem-at-theme.scss @@ -0,0 +1,55 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - single theme +// - /// 2 /// - with sub-theme +// + +@include it('iro-bem-at-theme') { + @include assert('single theme') { /// 1 /// + @include output(false) { + @include iro-bem-block('something') { + @include iro-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 iro-bem-block('something') { + @include iro-bem-at-theme('theme') { + font-size: 2em; + } + + @include iro-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/_iro-bem-block.scss b/test/bem/_iro-bem-block.scss new file mode 100644 index 0000000..a93d803 --- /dev/null +++ b/test/bem/_iro-bem-block.scss @@ -0,0 +1,85 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - without namespace +// - /// 2 /// - with namespace +// - /// 3 /// - nested +// - /// 4 /// - within selector +// + +@include it('iro-bem-block') { + @include assert('without namespace') { /// 1 /// + @include output(false) { + @include iro-bem-block('something') { + font-size: 1em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + } + } + + @each $ns in map-keys($iro-bem-namespaces) { + @include assert('with namespace "#{$ns}"') { /// 2 /// + @include output(false) { + @include iro-bem-block('something', $ns) { + font-size: 1em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + .#{map-get($iro-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 iro-bem-theme('theme') { + @include iro-bem-theme('subtheme') { + @include iro-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 assert('within selector') { /// 4 /// + @include output(false) { + .sel { + @include iro-bem-block('something') { + font-size: 2em; + } + } + } + + @include expect(false) { + .sel .something { + font-size: 2em; + } + } + } +} diff --git a/test/bem/_iro-bem-composed-of.scss b/test/bem/_iro-bem-composed-of.scss new file mode 100644 index 0000000..e724eb8 --- /dev/null +++ b/test/bem/_iro-bem-composed-of.scss @@ -0,0 +1,149 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - without namespace, single +// - /// 2 /// - with namespace, single +// - /// 3 /// - without namespace, multiple +// - /// 4 /// - with namespace, multiple +// + +@include it('iro-bem-composed-of') { + @include assert('without namespace, single') { /// 1 /// + @include output(false) { + @include iro-bem-block('something') { + font-size: 1em; + } + + @include iro-bem-block('another') { + @include iro-bem-composed-of('something'); + + font-size: 2em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + + .another { + font-size: 2em; + } + } + } + + @each $ns in map-keys($iro-bem-namespaces) { + @include assert('with namespace "#{$ns}", single') { /// 2 /// + @include output(false) { + @include iro-bem-block('something', $ns) { + font-size: 1em; + } + + @include iro-bem-block('another') { + @include iro-bem-composed-of('something' $ns); + + font-size: 2em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + .#{map-get($iro-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 iro-bem-block('something') { + font-size: 1em; + } + + @include iro-bem-block('somethingElse') { + font-size: 1em; + } + + @include iro-bem-block('another') { + @include iro-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($iro-bem-namespaces) { + @include assert('with namespace "#{$ns}", multiple') { /// 4 /// + @include output(false) { + @include iro-bem-block('something', $ns) { + font-size: 1em; + } + + @include iro-bem-block('somethingElse', $ns) { + font-size: 1em; + } + + @include iro-bem-block('another') { + @include iro-bem-composed-of('something' $ns, 'somethingElse' $ns); + + font-size: 2em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + .#{map-get($iro-bem-namespaces, $ns)}-something { + font-size: 1em; + } + + .#{map-get($iro-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; + } + } + } + } +} diff --git a/test/bem/_iro-bem-element.scss b/test/bem/_iro-bem-element.scss new file mode 100644 index 0000000..f69f133 --- /dev/null +++ b/test/bem/_iro-bem-element.scss @@ -0,0 +1,491 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - single element +// - /// 2 /// - single element, manual selector in-between +// - /// 3 /// - single element, modifier in-between +// - /// 4 /// - single element, nested +// - /// 5 /// - single element, nested, manual selector in-between +// - /// 6 /// - single element, nested, modifier in-between +// - /// 7 /// - single element, in at-theme +// - /// 8 /// - multiple elements +// - /// 9 /// - multiple elements, manual selector in-between +// - /// 10 /// - multiple elements, modifier in-between +// - /// 11 /// - multiple elements, nested +// - /// 12 /// - multiple elements, nested, manual selector in-between +// - /// 13 /// - multiple elements, nested, modifier in-between +// - /// 14 /// - single element, in at-theme +// + +@include it('iro-bem-element') { + @include assert('single element') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + font-size: 2em; + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, manual selector in-between') { /// 2 /// + @include output(false) { + @include iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-modifier('mod') { + @include iro-bem-element('child') { + font-size: 2em; + } + } + } + } + + @include expect { + .something--mod .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, nested') { /// 4 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + font-size: 2em; + + @include iro-bem-element('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 iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + font-size: 2em; + + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + } + + .test & { + @include iro-bem-element('child2') { + font-size: 2em; + + @include iro-bem-element('subchild2') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + &:hover { + @include iro-bem-element('subchild3') { + font-size: 3em; + } + } + + .test & { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-modifier('mod') { + @include iro-bem-element('child') { + font-size: 2em; + + @include iro-bem-element('subchild') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child') { + font-size: 2em; + + @include iro-bem-modifier('mod') { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-at-theme('dark') { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-element('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 iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-modifier('mod') { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + + &:hover { + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + + .test & { + @include iro-bem-element('subchild2') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + &:hover { + @include iro-bem-element('subchild3', 'subchild4') { + font-size: 3em; + } + } + + .test & { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + + @include iro-bem-modifier('mod') { + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + @include iro-bem-modifier('mod') { + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-at-theme('dark') { + @include iro-bem-element('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/_iro-bem-modifier.scss b/test/bem/_iro-bem-modifier.scss new file mode 100644 index 0000000..60e2fe4 --- /dev/null +++ b/test/bem/_iro-bem-modifier.scss @@ -0,0 +1,654 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - block modifier +// - /// 2 /// - block modifier, in at-theme +// - /// 3 /// - element modifier, single element +// - /// 4 /// - element modifier, multiple elements +// - /// 5 /// - element modifier, single related element +// - /// 6 /// - element modifier, multiple related elements +// - /// 7 /// - element modifier, single element, manual selector before +// - /// 8 /// - element modifier, multiple elements, manual selector before +// - /// 9 /// - element modifier, single related element, manual selector before +// - /// 10 /// - element modifier, multiple related elements, manual selector before +// - /// 11 /// - element modifier, in at-theme +// - /// 12 /// - nested block modifiers, extending +// - /// 13 /// - nested element modifiers, extending +// - /// 14 /// - block and element modifiers, single element +// - /// 15 /// - block and element modifiers, multiple elements +// + +@include it('iro-bem-modifier') { + @include assert('block modifier') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-modifier('mod') { + font-size: 1.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-at-theme('dark') { + @include iro-bem-modifier('mod') { + font-size: 1.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1') { + @include iro-bem-next-element('child2') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1') { + @include iro-bem-next-element('child2', 'child3') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-bem-modifier('submod') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include iro-bem-element('child2') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-bem-modifier('submod') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include iro-bem-element('child3', 'child4') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + @include iro-bem-next-element('child2') { + @include iro-bem-modifier('mod1') { + font-size: 2.5em; + + @include iro-bem-modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + .test & { + @include iro-bem-element('child3') { + @include iro-bem-next-element('child4') { + @include iro-bem-modifier('mod1') { + font-size: 2.5em; + + @include iro-bem-modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + @include iro-bem-element('child5') { + &:hover { + @include iro-bem-next-element('child6') { + @include iro-bem-modifier('mod2') { + font-size: 2.5em; + + @include iro-bem-modifier('submod2') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include iro-bem-next-element('child7') { + @include iro-bem-modifier('mod2') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + @include iro-bem-next-element('child2', 'child3') { + @include iro-bem-modifier('mod1') { + font-size: 2.5em; + + @include iro-bem-modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + .test & { + @include iro-bem-element('child4') { + @include iro-bem-next-element('child5', 'child6') { + @include iro-bem-modifier('mod1') { + font-size: 2.5em; + + @include iro-bem-modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + @include iro-bem-element('child7') { + &:hover { + @include iro-bem-next-element('child8', 'child9') { + @include iro-bem-modifier('mod2') { + font-size: 2.5em; + + @include iro-bem-modifier('submod2') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include iro-bem-next-element('child10', 'child11') { + @include iro-bem-modifier('mod2') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-at-theme('dark') { + @include iro-bem-element('child') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-modifier('mod') { + font-size: 1.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-modifier('mod') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-modifier('mod1') { + font-size: 1.5em; + + @include iro-bem-modifier('submod1') { + font-size: 1.75em; + } + + @include iro-bem-element('child') { + @include iro-bem-modifier('mod2') { + font-size: 2.5em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-modifier('mod1') { + font-size: 1.5em; + + @include iro-bem-modifier('submod') { + font-size: 1.75em; + } + + @include iro-bem-element('child1', 'child2') { + @include iro-bem-modifier('mod2') { + font-size: 2.5em; + + @include iro-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/_iro-bem-multi.scss b/test/bem/_iro-bem-multi.scss new file mode 100644 index 0000000..84bbca2 --- /dev/null +++ b/test/bem/_iro-bem-multi.scss @@ -0,0 +1,591 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - in root, 2 blocks +// - /// 2 /// - in root, 1 block, 1 manual selector +// - /// 3 /// - in block, 2 elements +// - /// 4 /// - in block, 1 element, 1 modifier +// - /// 5 /// - in block, 1 element, 1 extending modifier +// - /// 6 /// - in block, 1 element, 1 & selector +// - /// 7 /// - in block, 1 element, 1 manual selector +// - /// 8 /// - in element, 2 elements, 1 modifier +// - /// 9 /// - in element, 1 element, 1 & selector +// - /// 10 /// - in element in manual selector, 2 elements +// - /// 11 /// - in element in manual selector, 1 element, 1 & selector +// - /// 12 /// - in multiple elements, 2 elements, 1 modifier +// - /// 13 /// - in multiple elements, 1 element, 1 & selector +// - /// 14 /// - in related elements, 2 elements, 1 modifier +// - /// 15 /// - in related elements, 1 element, 1 & selector +// - /// 16 /// - in element, 2 related elements, 1 modifier +// - /// 17 /// - in element, 1 twin element, 1 modifier +// - /// 18 /// - in multiple elements, 1 twin element, 1 modifier +// + +@include it('iro-bem-state') { + @include assert('in root, 2 blocks') { /// 1 /// + @include output { + @include iro-bem-multi('component:' 'block1', 'object:' 'block2') { + font-size: 1em; + + @include iro-bem-element('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 iro-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 iro-bem-block('something') { + @include iro-bem-multi('element:' 'child1' 'child2') { + font-size: 2em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-multi('element:' 'child', 'modifier:' 'mod1') { + font-size: 2em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-multi('element:' 'child', 'modifier:' 'mod1') { + font-size: 2em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-multi('&', 'element:' 'child') { + font-size: 2em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-multi('> a:hover', 'element:' 'child1') { + font-size: 2em; + + @include iro-bem-element('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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { + font-size: 3em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-multi('element:' 'subchild', '&') { + font-size: 3em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + &:hover { + @include iro-bem-multi('element:' 'subchild1' 'subchild2') { + font-size: 3em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + &:hover { + @include iro-bem-multi('element:' '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-multi('element:' '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-multi('element:' 'subchild', '&') { + font-size: 3em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1') { + @include iro-bem-next-element('child2', 'child3') { + @include iro-bem-multi('element:' '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 iro-bem-block('something') { + @include iro-bem-element('child1') { + @include iro-bem-next-element('child2', 'child3') { + @include iro-bem-multi('element:' 'subchild', '&') { + font-size: 4em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1') { + @include iro-bem-multi('next-element:' 'child2' 'child3', 'modifier:' 'mod1') { + font-size: 3em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-multi('next-twin-element', 'modifier:' 'mod1') { + font-size: 3em; + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-multi('next-twin-element', 'modifier:' 'mod1') { + font-size: 3em; + + @include iro-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/_iro-bem-next-twin-element.scss b/test/bem/_iro-bem-next-twin-element.scss new file mode 100644 index 0000000..96fc3a9 --- /dev/null +++ b/test/bem/_iro-bem-next-twin-element.scss @@ -0,0 +1,153 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - single element +// - /// 2 /// - single element, manual selector in-between +// - /// 3 /// - single element, modifier in-between +// - /// 4 /// - multiple elements +// - /// 5 /// - multiple elements, manual selector in-between +// - /// 6 /// - multiple elements, modifier in-between +// + +@include it('iro-bem-next-twin-element') { + @include assert('single element') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-next-twin-element { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, manual selector in-between') { /// 2 /// + @include output(false) { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + &:hover { + @include iro-bem-next-twin-element { + font-size: 2em; + } + } + + .test & { + @include iro-bem-next-twin-element { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__child { + font-size: 2em; + } + + .test .something__child + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, modifier in-between') { /// 3 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-modifier('mod') { + @include iro-bem-next-twin-element { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__child { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements') { /// 4 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-next-twin-element { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__child1, + .something__child2 + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, manual selector in-between') { /// 5 /// + @include output(false) { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + &:hover { + @include iro-bem-next-twin-element { + font-size: 2em; + } + } + + .test & { + @include iro-bem-next-twin-element { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__child1, + .something__child2:hover + .something__child2 { + font-size: 2em; + } + + .test .something__child1 + .something__child1, + .test .something__child2 + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, modifier in-between') { /// 6 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-modifier('mod') { + @include iro-bem-next-twin-element { + 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/_iro-bem-related-element.scss b/test/bem/_iro-bem-related-element.scss new file mode 100644 index 0000000..b0c6b94 --- /dev/null +++ b/test/bem/_iro-bem-related-element.scss @@ -0,0 +1,459 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - single element, single related element +// - /// 2 /// - single element, single related element, manual selector in-between +// - /// 3 /// - single element, single related element, modifier in-between +// - /// 4 /// - single element, multiple related elements +// - /// 5 /// - single element, multiple related elements, manual selector in-between +// - /// 6 /// - single element, multiple related elements, modifier in-between +// - /// 7 /// - multiple elements, single related element +// - /// 8 /// - multiple elements, single related element, manual selector in-between +// - /// 9 /// - multiple elements, single related element, modifier in-between +// - /// 10 /// - multiple elements, multiple related elements +// - /// 11 /// - multiple elements, multiple related elements, manual selector in-between +// - /// 12 /// - multiple elements, multiple related elements, modifier in-between +// + +@include it('iro-bem-related-element') { + @include assert('single element, single related element') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-related-element('+', 'subchild1') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child') { + &:hover { + @include iro-bem-related-element('+', 'subchild1') { + font-size: 2em; + } + + @include iro-bem-related-element('~', 'subchild2') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-related-element('+', 'subchild3') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-modifier('mod') { + @include iro-bem-related-element('+', 'subchild1') { + font-size: 2.5em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-related-element('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child') { + &:hover { + @include iro-bem-related-element('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include iro-bem-related-element('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + + .test & { + @include iro-bem-related-element('+', 'subchild5', 'subchild6') { + font-size: 2.5em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-modifier('mod') { + @include iro-bem-related-element('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-related-element('+', 'subchild1') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + &:hover { + @include iro-bem-related-element('+', 'subchild1') { + font-size: 2em; + } + + @include iro-bem-related-element('~', 'subchild2') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-related-element('+', 'subchild3') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-modifier('mod') { + @include iro-bem-related-element('+', 'subchild1') { + font-size: 2.5em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-related-element('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + &:hover { + @include iro-bem-related-element('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include iro-bem-related-element('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-related-element('+', 'subchild5', 'subchild6') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-modifier('mod') { + @include iro-bem-related-element('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include iro-bem-related-element('~', '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/_iro-bem-state.scss b/test/bem/_iro-bem-state.scss new file mode 100644 index 0000000..57eb233 --- /dev/null +++ b/test/bem/_iro-bem-state.scss @@ -0,0 +1,177 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - single block, single state +// - /// 2 /// - single element, single state +// - /// 3 /// - single block, multiple states +// - /// 4 /// - single element, multiple states +// - /// 5 /// - multiple elements, single state +// - /// 6 /// - multiple elements, multiple states +// + +@include it('iro-bem-state') { + @include assert('single block, single state') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-is('active') { + font-size: 1.25em; + } + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-is('active') { + font-size: 2.25em; + } + + @include iro-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 iro-bem-block('something') { + @include iro-bem-is('active', 'primary') { + font-size: 1.25em; + } + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-is('active', 'primary') { + font-size: 2.25em; + } + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-is('active') { + font-size: 2.25em; + } + + @include iro-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 iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-is('active', 'primary') { + font-size: 2.25em; + } + + @include iro-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/_iro-bem-suffix.scss b/test/bem/_iro-bem-suffix.scss new file mode 100644 index 0000000..c6ca787 --- /dev/null +++ b/test/bem/_iro-bem-suffix.scss @@ -0,0 +1,94 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - block suffix +// - /// 2 /// - element suffix +// - /// 3 /// - modifier suffix +// - /// 4 /// - multiple element suffix +// + +@include it('iro-bem-suffix') { + @include assert('block suffix') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-suffix('sm') { + font-size: 1.5em; + } + } + } + + @include expect { + .something\@sm { + font-size: 1.5em; + } + } + } + + @include assert('element suffix') { /// 2 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + @include iro-bem-suffix('sm') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child\@sm { + font-size: 2.5em; + } + } + } + + @include assert('modifier suffix') { /// 3 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-modifier('mod1') { + @include iro-bem-suffix('sm') { + font-size: 1.75em; + } + } + + @include iro-bem-element('child') { + @include iro-bem-modifier('mod2') { + @include iro-bem-suffix('sm') { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something--mod1\@sm { + font-size: 1.75em; + } + + .something__child--mod2\@sm { + font-size: 2.75em; + } + } + } + + @include assert('multiple element suffix') { /// 4 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + @include iro-bem-suffix('sm') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child1\@sm, + .something__child2\@sm { + font-size: 2.5em; + } + } + } +} -- cgit v1.2.3-70-g09d2