1 files changed, 494 insertions, 0 deletions

diff --git a/test/bem/_element.scss b/test/bem/_element.scss
new file mode 100644
index 0000000..c8839de
--- /dev/null
+++ b/test/bem/_element.scss
@@ -0,0 +1,494 @@
+// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
+
+@use 'true' as *;
+@use '../../src/bem';
+
+//
+// Included test cases:
+//  - /// 1 ///  - single element
+//  - /// 2 ///  - single element, manual selector in-between
+//  - /// 3 ///  - single element, modifier in-between
+//  - /// 4 ///  - single element, nested
+//  - /// 5 ///  - single element, nested, manual selector in-between
+//  - /// 6 ///  - single element, nested, modifier in-between
+//  - /// 7 ///  - single element, in at-theme
+//  - /// 8 ///  - multiple elements
+//  - /// 9 ///  - multiple elements, manual selector in-between
+//  - /// 10 /// - multiple elements, modifier in-between
+//  - /// 11 /// - multiple elements, nested
+//  - /// 12 /// - multiple elements, nested, manual selector in-between
+//  - /// 13 /// - multiple elements, nested, modifier in-between
+//  - /// 14 /// - single element, in at-theme
+//
+
+@include it('element') {
+    @include assert('single element') { /// 1 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.elem('child') {
+                    font-size: 2em;
+                }
+            }
+        }
+
+        @include expect {
+            .something__child {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('single element, manual selector in-between') { /// 2 ///
+        @include output(false) {
+            @include bem.block('something') {
+                &:hover {
+                    @include bem.elem('child1') {
+                        font-size: 2em;
+                    }
+                }
+
+                .test & {
+                    @include bem.elem('child2') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+
+        @include expect(false) {
+            .something:hover .something__child1 {
+                font-size: 2em;
+            }
+
+            .test .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('single element, modifier in-between') { /// 3 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.modifier('mod') {
+                    @include bem.elem('child') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .something--mod .something__child {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('single element, nested') { /// 4 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.elem('child') {
+                    font-size: 2em;
+
+                    @include bem.elem('subchild') {
+                        font-size: 3em;
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .something__child {
+                font-size: 2em;
+            }
+
+            .something__child .something__subchild {
+                font-size: 3em;
+            }
+        }
+    }
+
+    @include assert('single element, nested, manual selector in-between') { /// 5 ///
+        @include output(false) {
+            @include bem.block('something') {
+                &:hover {
+                    @include bem.elem('child1') {
+                        font-size: 2em;
+
+                        @include bem.elem('subchild1') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+
+                .test & {
+                    @include bem.elem('child2') {
+                        font-size: 2em;
+
+                        @include bem.elem('subchild2') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+
+                @include bem.elem('child3') {
+                    font-size: 2em;
+
+                    &:hover {
+                        @include bem.elem('subchild3') {
+                            font-size: 3em;
+                        }
+                    }
+
+                    .test & {
+                        @include bem.elem('subchild4') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+
+        @include expect(false) {
+            .something:hover .something__child1 {
+                font-size: 2em;
+            }
+
+            .something:hover .something__child1 .something__subchild1 {
+                font-size: 3em;
+            }
+
+            .test .something__child2 {
+                font-size: 2em;
+            }
+
+            .test .something__child2 .something__subchild2 {
+                font-size: 3em;
+            }
+
+            .something__child3 {
+                font-size: 2em;
+            }
+
+            .something__child3:hover .something__subchild3 {
+                font-size: 3em;
+            }
+
+            .test .something__child3 .something__subchild4 {
+                font-size: 3em;
+            }
+        }
+    }
+
+    @include assert('single element, nested, modifier in-between') { /// 6 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.modifier('mod') {
+                    @include bem.elem('child') {
+                        font-size: 2em;
+
+                        @include bem.elem('subchild') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+
+                @include bem.elem('child') {
+                    font-size: 2em;
+
+                    @include bem.modifier('mod') {
+                        @include bem.elem('subchild') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .something--mod .something__child {
+                font-size: 2em;
+            }
+
+            .something--mod .something__child .something__subchild {
+                font-size: 3em;
+            }
+
+            .something__child {
+                font-size: 2em;
+            }
+
+            .something__child--mod .something__subchild {
+                font-size: 3em;
+            }
+        }
+    }
+
+    @include assert('single element, in at-theme') { /// 7 ///
+        @include output(false) {
+            @include bem.block('something') {
+                @include bem.at-theme('dark') {
+                    @include bem.elem('child') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+
+        @include expect(false) {
+            .t-dark .something__child,
+            [class*=' t-'] .t-dark .something__child,
+            [class^='t-'] .t-dark .something__child {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('multiple elements') { /// 8 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.elem('child1', 'child2') {
+                    font-size: 2em;
+                }
+            }
+        }
+
+        @include expect {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('multiple elements, manual selector in-between') { /// 9 ///
+        @include output(false) {
+            @include bem.block('something') {
+                &:hover {
+                    @include bem.elem('child1', 'child2') {
+                        font-size: 2em;
+                    }
+                }
+
+                .test & {
+                    @include bem.elem('child3', 'child4') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+
+        @include expect(false) {
+            .something:hover .something__child1,
+            .something:hover .something__child2 {
+                font-size: 2em;
+            }
+
+            .test .something__child3,
+            .test .something__child4 {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('multiple elements, modifier in-between') { /// 10 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.modifier('mod') {
+                    @include bem.elem('child1', 'child2') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .something--mod .something__child1,
+            .something--mod .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+
+    @include assert('multiple elements, nested') { /// 11 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.elem('child1', 'child2') {
+                    font-size: 2em;
+
+                    @include bem.elem('subchild1') {
+                        font-size: 3em;
+                    }
+                }
+
+                @include bem.elem('child3') {
+                    font-size: 2em;
+
+                    @include bem.elem('subchild2', 'subchild3') {
+                        font-size: 3em;
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+
+            .something__child1 .something__subchild1,
+            .something__child2 .something__subchild1 {
+                font-size: 3em;
+            }
+
+            .something__child3 {
+                font-size: 2em;
+            }
+
+            .something__child3 .something__subchild2,
+            .something__child3 .something__subchild3 {
+                font-size: 3em;
+            }
+        }
+    }
+
+    @include assert('multiple elements, nested, manual selector in-between') { /// 12 ///
+        @include output(false) {
+            @include bem.block('something') {
+                @include bem.elem('child1', 'child2') {
+                    font-size: 2em;
+
+                    &:hover {
+                        @include bem.elem('subchild1') {
+                            font-size: 3em;
+                        }
+                    }
+
+                    .test & {
+                        @include bem.elem('subchild2') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+
+                @include bem.elem('child3') {
+                    font-size: 2em;
+
+                    &:hover {
+                        @include bem.elem('subchild3', 'subchild4') {
+                            font-size: 3em;
+                        }
+                    }
+
+                    .test & {
+                        @include bem.elem('subchild5', 'subchild6') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+
+        @include expect(false) {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+
+            .something__child1:hover .something__subchild1,
+            .something__child2:hover .something__subchild1 {
+                font-size: 3em;
+            }
+
+            .test .something__child1 .something__subchild2,
+            .test .something__child2 .something__subchild2 {
+                font-size: 3em;
+            }
+
+            .something__child3 {
+                font-size: 2em;
+            }
+
+            .something__child3:hover .something__subchild3,
+            .something__child3:hover .something__subchild4 {
+                font-size: 3em;
+            }
+
+            .test .something__child3 .something__subchild5,
+            .test .something__child3 .something__subchild6 {
+                font-size: 3em;
+            }
+        }
+    }
+
+    @include assert('multiple elements, nested, modifier in-between') { /// 13 ///
+        @include output {
+            @include bem.block('something') {
+                @include bem.elem('child1', 'child2') {
+                    font-size: 2em;
+
+                    @include bem.modifier('mod') {
+                        @include bem.elem('subchild1') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+
+                @include bem.elem('child3') {
+                    font-size: 2em;
+
+                    @include bem.modifier('mod') {
+                        @include bem.elem('subchild2', 'subchild3') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+
+            .something__child1--mod .something__subchild1,
+            .something__child2--mod .something__subchild1 {
+                font-size: 3em;
+            }
+
+            .something__child3 {
+                font-size: 2em;
+            }
+
+            .something__child3--mod .something__subchild2,
+            .something__child3--mod .something__subchild3 {
+                font-size: 3em;
+            }
+        }
+    }
+
+    @include assert('multiple elements, in at-theme') { /// 14 ///
+        @include output(false) {
+            @include bem.block('something') {
+                @include bem.at-theme('dark') {
+                    @include bem.elem('child1', 'child2') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+
+        @include expect(false) {
+            .t-dark .something__child1,
+            [class*=' t-'] .t-dark .something__child1,
+            [class^='t-'] .t-dark .something__child1,
+            .t-dark .something__child2,
+            [class*=' t-'] .t-dark .something__child2,
+            [class^='t-'] .t-dark .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+}