aboutsummaryrefslogtreecommitdiffstats
path: root/test/bem
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-08-13 12:01:46 +0200
committerVolpeon <git@volpeon.ink>2025-08-13 12:01:46 +0200
commitf0f84513f8efe533b6ee670a6f1a0c074387b2ec (patch)
tree845bc4bacf1bd99acb0dfcc7e4545a36b544d2f8 /test/bem
parentMore fix (diff)
downloadiro-sass-master.tar.gz
iro-sass-master.tar.bz2
iro-sass-master.zip
Make use of SASS modulesHEADmaster
Diffstat (limited to 'test/bem')
-rw-r--r--test/bem/_at-theme.scss80
-rw-r--r--test/bem/_block.scss139
-rw-r--r--test/bem/_composed-of.scss237
-rw-r--r--test/bem/_element.scss792
-rw-r--r--test/bem/_examples.scss352
-rw-r--r--test/bem/_modifier.scss1066
-rw-r--r--test/bem/_multi.scss948
-rw-r--r--test/bem/_next-twin-element.scss248
-rw-r--r--test/bem/_related-element.scss752
-rw-r--r--test/bem/_state.scss280
-rw-r--r--test/bem/_suffix.scss146
11 files changed, 2532 insertions, 2508 deletions
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 @@
10// 10//
11 11
12@include it('at-theme') { 12@include it('at-theme') {
13 @include assert('single theme') { /// 1 /// 13 @include assert('single theme') { /// 1 ///
14 @include output(false) { 14 @include output(false) {
15 @include bem.block('something') { 15 @include bem.block('something') {
16 @include bem.at-theme('theme') { 16 @include bem.at-theme('theme') {
17 font-size: 2em; 17 font-size: 2em;
18 } 18 }
19 } 19 }
20 } 20 }
21 21
22 @include expect(false) { 22 @include expect(false) {
23 .t-theme .something, 23 .t-theme .something,
24 [class*=' t-'] .t-theme .something, 24 [class*=' t-'] .t-theme .something,
25 [class^='t-'] .t-theme .something { 25 [class^='t-'] .t-theme .something {
26 font-size: 2em; 26 font-size: 2em;
27 } 27 }
28 } 28 }
29 } 29 }
30 30
31 @include assert('with sub-theme') { /// 2 /// 31 @include assert('with sub-theme') { /// 2 ///
32 @include output(false) { 32 @include output(false) {
33 @include bem.block('something') { 33 @include bem.block('something') {
34 @include bem.at-theme('theme') { 34 @include bem.at-theme('theme') {
35 font-size: 2em; 35 font-size: 2em;
36 } 36 }
37 37
38 @include bem.at-theme('theme', 'subtheme') { 38 @include bem.at-theme('theme', 'subtheme') {
39 font-size: 3em; 39 font-size: 3em;
40 } 40 }
41 } 41 }
42 } 42 }
43 43
44 @include expect(false) { 44 @include expect(false) {
45 .t-theme .something, 45 .t-theme .something,
46 [class*=' t-'] .t-theme .something, 46 [class*=' t-'] .t-theme .something,
47 [class^='t-'] .t-theme .something { 47 [class^='t-'] .t-theme .something {
48 font-size: 2em; 48 font-size: 2em;
49 } 49 }
50 50
51 .t-theme .t-subtheme .something, 51 .t-theme .t-subtheme .something,
52 [class*=' t-'] .t-theme .t-subtheme .something, 52 [class*=' t-'] .t-theme .t-subtheme .something,
53 [class^='t-'] .t-theme .t-subtheme .something { 53 [class^='t-'] .t-theme .t-subtheme .something {
54 font-size: 3em; 54 font-size: 3em;
55 } 55 }
56 } 56 }
57 } 57 }
58} 58}
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 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'sass:map';
3@use 'true' as *; 4@use 'true' as *;
4@use '../../src/bem'; 5@use '../../src/bem';
5 6
@@ -12,77 +13,83 @@
12// 13//
13 14
14@include it('block') { 15@include it('block') {
15 @include assert('without namespace') { /// 1 /// 16 @include assert('without namespace') { /// 1 ///
16 @include output(false) { 17 @include output(false) {
17 @include bem.block('something') { 18 @include bem.block('something') {
18 font-size: 1em; 19 font-size: 1em;
19 } 20 }
20 } 21 }
21 22
22 @include expect(false) { 23 @include expect(false) {
23 .something { 24 .something {
24 font-size: 1em; 25 font-size: 1em;
25 } 26 }
26 } 27 }
27 } 28 }
28 29
29 @each $ns in map-keys(bem.$namespaces) { 30 @each $ns in map.keys(bem.$namespaces) {
30 @include assert('with namespace "#{$ns}"') { /// 2 /// 31 @include assert('with namespace "#{$ns}"') { /// 2 ///
31 @include output(false) { 32 @include output(false) {
32 @include bem.block('something', $ns) { 33 @include bem.block('something', $ns) {
33 font-size: 1em; 34 font-size: 1em;
34 } 35 }
35 } 36 }
36 37
37 @include expect(false) { 38 @include expect(false) {
38 @if $ns != 'theme' { 39 @layer #{$ns} {
39 .#{map-get(bem.$namespaces, $ns)}-something { 40 @if $ns != 'theme' {
40 font-size: 1em; 41 .#{map-get(bem.$namespaces, $ns)}-something {
41 } 42 font-size: 1em;
42 } @else { 43 }
43 .t-something, 44 } @else {
44 [class*=' t-'] .t-something, 45 .t-something,
45 [class^='t-'] .t-something { 46 [class*=' t-'] .t-something,
46 font-size: 1em; 47 [class^='t-'] .t-something {
47 } 48 font-size: 1em;
48 } 49 }
49 } 50 }
50 } 51 }
51 } 52 }
53 }
54 }
52 55
53 @include assert('nested') { /// 3 /// 56 @include assert('nested') { /// 3 ///
54 @include output(false) { 57 @include output(false) {
55 @include bem.theme('theme') { 58 @include bem.theme('theme') {
56 @include bem.theme('subtheme') { 59 @include bem.theme('subtheme') {
57 @include bem.block('something') { 60 @include bem.block('something') {
58 font-size: 2em; 61 font-size: 2em;
59 } 62 }
60 } 63 }
61 } 64 }
62 } 65 }
63 66
64 @include expect(false) { 67 @include expect(false) {
65 .t-theme .t-subtheme .something, 68 @layer theme {
66 [class*=' t-'] .t-theme .t-subtheme .something, 69 @layer theme {
67 [class^='t-'] .t-theme .t-subtheme .something { 70 .t-theme .t-subtheme .something,
68 font-size: 2em; 71 [class*=' t-'] .t-theme .t-subtheme .something,
69 } 72 [class^='t-'] .t-theme .t-subtheme .something {
70 } 73 font-size: 2em;
71 } 74 }
75 }
76 }
77 }
78 }
72 79
73 @include assert('within selector') { /// 4 /// 80 @include assert('within selector') { /// 4 ///
74 @include output(false) { 81 @include output(false) {
75 .sel { 82 .sel {
76 @include bem.block('something') { 83 @include bem.block('something') {
77 font-size: 2em; 84 font-size: 2em;
78 } 85 }
79 } 86 }
80 } 87 }
81 88
82 @include expect(false) { 89 @include expect(false) {
83 .sel .something { 90 .sel .something {
84 font-size: 2em; 91 font-size: 2em;
85 } 92 }
86 } 93 }
87 } 94 }
88} 95}
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 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'sass:map';
3@use 'true' as *; 4@use 'true' as *;
4@use '../../src/bem'; 5@use '../../src/bem';
5 6
@@ -12,141 +13,151 @@
12// 13//
13 14
14@include it('composed-of') { 15@include it('composed-of') {
15 @include assert('without namespace, single') { /// 1 /// 16 @include assert('without namespace, single') { /// 1 ///
16 @include output(false) { 17 @include output(false) {
17 @include bem.block('something') { 18 @include bem.block('something') {
18 font-size: 1em; 19 font-size: 1em;
19 } 20 }
20 21
21 @include bem.block('another') { 22 @include bem.block('another') {
22 @include bem.composed-of('something'); 23 @include bem.composed-of('something');
23 24
24 font-size: 2em; 25 font-size: 2em;
25 } 26 }
26 } 27 }
27 28
28 @include expect(false) { 29 @include expect(false) {
29 .something { 30 .something {
30 font-size: 1em; 31 font-size: 1em;
31 } 32 }
32 33
33 .another { 34 .another {
34 font-size: 2em; 35 font-size: 2em;
35 } 36 }
36 } 37 }
37 } 38 }
38 39
39 @each $ns in map-keys(bem.$namespaces) { 40 @each $ns in map.keys(bem.$namespaces) {
40 @include assert('with namespace "#{$ns}", single') { /// 2 /// 41 @include assert('with namespace "#{$ns}", single') { /// 2 ///
41 @include output(false) { 42 @include output(false) {
42 @include bem.block('something', $ns) { 43 @include bem.block('something', $ns) {
43 font-size: 1em; 44 font-size: 1em;
44 } 45 }
45 46
46 @include bem.block('another') { 47 @include bem.block('another') {
47 @include bem.composed-of('something' $ns); 48 @include bem.composed-of('something' $ns);
48 49
49 font-size: 2em; 50 font-size: 2em;
50 } 51 }
51 } 52 }
52 53
53 @include expect(false) { 54 @include expect(false) {
54 @if $ns != 'theme' { 55 @layer #{$ns} {
55 .#{map-get(bem.$namespaces, $ns)}-something { 56 @if $ns != 'theme' {
56 font-size: 1em; 57 .#{map.get(bem.$namespaces, $ns)}-something {
57 } 58 font-size: 1em;
58 } @else { 59 }
59 .t-something, 60 } @else {
60 [class*=' t-'] .t-something, 61 .t-something,
61 [class^='t-'] .t-something { 62 [class*=' t-'] .t-something,
62 font-size: 1em; 63 [class^='t-'] .t-something {
63 } 64 font-size: 1em;
64 } 65 }
66 }
67 }
65 68
66 .another { 69 .another {
67 font-size: 2em; 70 font-size: 2em;
68 } 71 }
69 } 72 }
70 } 73 }
71 } 74 }
72 75
73 @include assert('without namespace, multiple') { /// 3 /// 76 @include assert('without namespace, multiple') { /// 3 ///
74 @include output(false) { 77 @include output(false) {
75 @include bem.block('something') { 78 @include bem.block('something') {
76 font-size: 1em; 79 font-size: 1em;
77 } 80 }
78 81
79 @include bem.block('somethingElse') { 82 @include bem.block('somethingElse') {
80 font-size: 1em; 83 font-size: 1em;
81 } 84 }
82 85
83 @include bem.block('another') { 86 @include bem.block('another') {
84 @include bem.composed-of('something', 'somethingElse'); 87 @include bem.composed-of('something', 'somethingElse');
85 88
86 font-size: 2em; 89 font-size: 2em;
87 } 90 }
88 } 91 }
89 92
90 @include expect(false) { 93 @include expect(false) {
91 .something { 94 .something {
92 font-size: 1em; 95 font-size: 1em;
93 } 96 }
94 97
95 .somethingElse { 98 .somethingElse {
96 font-size: 1em; 99 font-size: 1em;
97 } 100 }
98 101
99 .another { 102 .another {
100 font-size: 2em; 103 font-size: 2em;
101 } 104 }
102 } 105 }
103 } 106 }
104 107
105 @each $ns in map-keys(bem.$namespaces) { 108 @each $ns in map.keys(bem.$namespaces) {
106 @include assert('with namespace "#{$ns}", multiple') { /// 4 /// 109 @include assert('with namespace "#{$ns}", multiple') { /// 4 ///
107 @include output(false) { 110 @include output(false) {
108 @include bem.block('something', $ns) { 111 @include bem.block('something', $ns) {
109 font-size: 1em; 112 font-size: 1em;
110 } 113 }
111 114
112 @include bem.block('somethingElse', $ns) { 115 @include bem.block('somethingElse', $ns) {
113 font-size: 1em; 116 font-size: 1em;
114 } 117 }
115 118
116 @include bem.block('another') { 119 @include bem.block('another') {
117 @include bem.composed-of('something' $ns, 'somethingElse' $ns); 120 @include bem.composed-of('something' $ns, 'somethingElse' $ns);
118 121
119 font-size: 2em; 122 font-size: 2em;
120 } 123 }
121 } 124 }
122 125
123 @include expect(false) { 126 @include expect(false) {
124 @if $ns != 'theme' { 127 @if $ns != 'theme' {
125 .#{map-get(bem.$namespaces, $ns)}-something { 128 @layer #{$ns} {
126 font-size: 1em; 129 .#{map.get(bem.$namespaces, $ns)}-something {
127 } 130 font-size: 1em;
131 }
132 }
128 133
129 .#{map-get(bem.$namespaces, $ns)}-somethingElse { 134 @layer #{$ns} {
130 font-size: 1em; 135 .#{map.get(bem.$namespaces, $ns)}-somethingElse {
131 } 136 font-size: 1em;
132 } @else { 137 }
133 .t-something, 138 }
134 [class*=' t-'] .t-something, 139 } @else {
135 [class^='t-'] .t-something { 140 @layer #{$ns} {
136 font-size: 1em; 141 .t-something,
137 } 142 [class*=' t-'] .t-something,
143 [class^='t-'] .t-something {
144 font-size: 1em;
145 }
146 }
138 147
139 .t-somethingElse, 148 @layer #{$ns} {
140 [class*=' t-'] .t-somethingElse, 149 .t-somethingElse,
141 [class^='t-'] .t-somethingElse { 150 [class*=' t-'] .t-somethingElse,
142 font-size: 1em; 151 [class^='t-'] .t-somethingElse {
143 } 152 font-size: 1em;
144 } 153 }
154 }
155 }
145 156
146 .another { 157 .another {
147 font-size: 2em; 158 font-size: 2em;
148 } 159 }
149 } 160 }
150 } 161 }
151 } 162 }
152} 163}
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 @@
22// 22//
23 23
24@include it('element') { 24@include it('element') {
25 @include assert('single element') { /// 1 /// 25 @include assert('single element') { /// 1 ///
26 @include output { 26 @include output {
27 @include bem.block('something') { 27 @include bem.block('something') {
28 @include bem.elem('child') { 28 @include bem.elem('child') {
29 font-size: 2em; 29 font-size: 2em;
30 } 30 }
31 } 31 }
32 } 32 }
33 33
34 @include expect { 34 @include expect {
35 .something__child { 35 .something__child {
36 font-size: 2em; 36 font-size: 2em;
37 } 37 }
38 } 38 }
39 } 39 }
40 40
41 @include assert('single element, manual selector in-between') { /// 2 /// 41 @include assert('single element, manual selector in-between') { /// 2 ///
42 @include output(false) { 42 @include output(false) {
43 @include bem.block('something') { 43 @include bem.block('something') {
44 &:hover { 44 &:hover {
45 @include bem.elem('child1') { 45 @include bem.elem('child1') {
46 font-size: 2em; 46 font-size: 2em;
47 } 47 }
48 } 48 }
49 49
50 .test & { 50 .test & {
51 @include bem.elem('child2') { 51 @include bem.elem('child2') {
52 font-size: 2em; 52 font-size: 2em;
53 } 53 }
54 } 54 }
55 } 55 }
56 } 56 }
57 57
58 @include expect(false) { 58 @include expect(false) {
59 .something:hover .something__child1 { 59 .something:hover .something__child1 {
60 font-size: 2em; 60 font-size: 2em;
61 } 61 }
62 62
63 .test .something__child2 { 63 .test .something__child2 {
64 font-size: 2em; 64 font-size: 2em;
65 } 65 }
66 } 66 }
67 } 67 }
68 68
69 @include assert('single element, modifier in-between') { /// 3 /// 69 @include assert('single element, modifier in-between') { /// 3 ///
70 @include output { 70 @include output {
71 @include bem.block('something') { 71 @include bem.block('something') {
72 @include bem.modifier('mod') { 72 @include bem.modifier('mod') {
73 @include bem.elem('child') { 73 @include bem.elem('child') {
74 font-size: 2em; 74 font-size: 2em;
75 } 75 }
76 } 76 }
77 } 77 }
78 } 78 }
79 79
80 @include expect { 80 @include expect {
81 .something--mod .something__child { 81 .something--mod .something__child {
82 font-size: 2em; 82 font-size: 2em;
83 } 83 }
84 } 84 }
85 } 85 }
86 86
87 @include assert('single element, nested') { /// 4 /// 87 @include assert('single element, nested') { /// 4 ///
88 @include output { 88 @include output {
89 @include bem.block('something') { 89 @include bem.block('something') {
90 @include bem.elem('child') { 90 @include bem.elem('child') {
91 font-size: 2em; 91 font-size: 2em;
92 92
93 @include bem.elem('subchild') { 93 @include bem.elem('subchild') {
94 font-size: 3em; 94 font-size: 3em;
95 } 95 }
96 } 96 }
97 } 97 }
98 } 98 }
99 99
100 @include expect { 100 @include expect {
101 .something__child { 101 .something__child {
102 font-size: 2em; 102 font-size: 2em;
103 } 103 }
104 104
105 .something__child .something__subchild { 105 .something__child .something__subchild {
106 font-size: 3em; 106 font-size: 3em;
107 } 107 }
108 } 108 }
109 } 109 }
110 110
111 @include assert('single element, nested, manual selector in-between') { /// 5 /// 111 @include assert('single element, nested, manual selector in-between') { /// 5 ///
112 @include output(false) { 112 @include output(false) {
113 @include bem.block('something') { 113 @include bem.block('something') {
114 &:hover { 114 &:hover {
115 @include bem.elem('child1') { 115 @include bem.elem('child1') {
116 font-size: 2em; 116 font-size: 2em;
117 117
118 @include bem.elem('subchild1') { 118 @include bem.elem('subchild1') {
119 font-size: 3em; 119 font-size: 3em;
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 .test & { 124 .test & {
125 @include bem.elem('child2') { 125 @include bem.elem('child2') {
126 font-size: 2em; 126 font-size: 2em;
127 127
128 @include bem.elem('subchild2') { 128 @include bem.elem('subchild2') {
129 font-size: 3em; 129 font-size: 3em;
130 } 130 }
131 } 131 }
132 } 132 }
133 133
134 @include bem.elem('child3') { 134 @include bem.elem('child3') {
135 font-size: 2em; 135 font-size: 2em;
136 136
137 &:hover { 137 &:hover {
138 @include bem.elem('subchild3') { 138 @include bem.elem('subchild3') {
139 font-size: 3em; 139 font-size: 3em;
140 } 140 }
141 } 141 }
142 142
143 .test & { 143 .test & {
144 @include bem.elem('subchild4') { 144 @include bem.elem('subchild4') {
145 font-size: 3em; 145 font-size: 3em;
146 } 146 }
147 } 147 }
148 } 148 }
149 } 149 }
150 } 150 }
151 151
152 @include expect(false) { 152 @include expect(false) {
153 .something:hover .something__child1 { 153 .something:hover .something__child1 {
154 font-size: 2em; 154 font-size: 2em;
155 } 155 }
156 156
157 .something:hover .something__child1 .something__subchild1 { 157 .something:hover .something__child1 .something__subchild1 {
158 font-size: 3em; 158 font-size: 3em;
159 } 159 }
160 160
161 .test .something__child2 { 161 .test .something__child2 {
162 font-size: 2em; 162 font-size: 2em;
163 } 163 }
164 164
165 .test .something__child2 .something__subchild2 { 165 .test .something__child2 .something__subchild2 {
166 font-size: 3em; 166 font-size: 3em;
167 } 167 }
168 168
169 .something__child3 { 169 .something__child3 {
170 font-size: 2em; 170 font-size: 2em;
171 } 171 }
172 172
173 .something__child3:hover .something__subchild3 { 173 .something__child3:hover .something__subchild3 {
174 font-size: 3em; 174 font-size: 3em;
175 } 175 }
176 176
177 .test .something__child3 .something__subchild4 { 177 .test .something__child3 .something__subchild4 {
178 font-size: 3em; 178 font-size: 3em;
179 } 179 }
180 } 180 }
181 } 181 }
182 182
183 @include assert('single element, nested, modifier in-between') { /// 6 /// 183 @include assert('single element, nested, modifier in-between') { /// 6 ///
184 @include output { 184 @include output {
185 @include bem.block('something') { 185 @include bem.block('something') {
186 @include bem.modifier('mod') { 186 @include bem.modifier('mod') {
187 @include bem.elem('child') { 187 @include bem.elem('child') {
188 font-size: 2em; 188 font-size: 2em;
189 189
190 @include bem.elem('subchild') { 190 @include bem.elem('subchild') {
191 font-size: 3em; 191 font-size: 3em;
192 } 192 }
193 } 193 }
194 } 194 }
195 195
196 @include bem.elem('child') { 196 @include bem.elem('child') {
197 font-size: 2em; 197 font-size: 2em;
198 198
199 @include bem.modifier('mod') { 199 @include bem.modifier('mod') {
200 @include bem.elem('subchild') { 200 @include bem.elem('subchild') {
201 font-size: 3em; 201 font-size: 3em;
202 } 202 }
203 } 203 }
204 } 204 }
205 } 205 }
206 } 206 }
207 207
208 @include expect { 208 @include expect {
209 .something--mod .something__child { 209 .something--mod .something__child {
210 font-size: 2em; 210 font-size: 2em;
211 } 211 }
212 212
213 .something--mod .something__child .something__subchild { 213 .something--mod .something__child .something__subchild {
214 font-size: 3em; 214 font-size: 3em;
215 } 215 }
216 216
217 .something__child { 217 .something__child {
218 font-size: 2em; 218 font-size: 2em;
219 } 219 }
220 220
221 .something__child--mod .something__subchild { 221 .something__child--mod .something__subchild {
222 font-size: 3em; 222 font-size: 3em;
223 } 223 }
224 } 224 }
225 } 225 }
226 226
227 @include assert('single element, in at-theme') { /// 7 /// 227 @include assert('single element, in at-theme') { /// 7 ///
228 @include output(false) { 228 @include output(false) {
229 @include bem.block('something') { 229 @include bem.block('something') {
230 @include bem.at-theme('dark') { 230 @include bem.at-theme('dark') {
231 @include bem.elem('child') { 231 @include bem.elem('child') {
232 font-size: 2em; 232 font-size: 2em;
233 } 233 }
234 } 234 }
235 } 235 }
236 } 236 }
237 237
238 @include expect(false) { 238 @include expect(false) {
239 .t-dark .something__child, 239 .t-dark .something__child,
240 [class*=' t-'] .t-dark .something__child, 240 [class*=' t-'] .t-dark .something__child,
241 [class^='t-'] .t-dark .something__child { 241 [class^='t-'] .t-dark .something__child {
242 font-size: 2em; 242 font-size: 2em;
243 } 243 }
244 } 244 }
245 } 245 }
246 246
247 @include assert('multiple elements') { /// 8 /// 247 @include assert('multiple elements') { /// 8 ///
248 @include output { 248 @include output {
249 @include bem.block('something') { 249 @include bem.block('something') {
250 @include bem.elem('child1', 'child2') { 250 @include bem.elem('child1', 'child2') {
251 font-size: 2em; 251 font-size: 2em;
252 } 252 }
253 } 253 }
254 } 254 }
255 255
256 @include expect { 256 @include expect {
257 .something__child1, 257 .something__child1,
258 .something__child2 { 258 .something__child2 {
259 font-size: 2em; 259 font-size: 2em;
260 } 260 }
261 } 261 }
262 } 262 }
263 263
264 @include assert('multiple elements, manual selector in-between') { /// 9 /// 264 @include assert('multiple elements, manual selector in-between') { /// 9 ///
265 @include output(false) { 265 @include output(false) {
266 @include bem.block('something') { 266 @include bem.block('something') {
267 &:hover { 267 &:hover {
268 @include bem.elem('child1', 'child2') { 268 @include bem.elem('child1', 'child2') {
269 font-size: 2em; 269 font-size: 2em;
270 } 270 }
271 } 271 }
272 272
273 .test & { 273 .test & {
274 @include bem.elem('child3', 'child4') { 274 @include bem.elem('child3', 'child4') {
275 font-size: 2em; 275 font-size: 2em;
276 } 276 }
277 } 277 }
278 } 278 }
279 } 279 }
280 280
281 @include expect(false) { 281 @include expect(false) {
282 .something:hover .something__child1, 282 .something:hover .something__child1,
283 .something:hover .something__child2 { 283 .something:hover .something__child2 {
284 font-size: 2em; 284 font-size: 2em;
285 } 285 }
286 286
287 .test .something__child3, 287 .test .something__child3,
288 .test .something__child4 { 288 .test .something__child4 {
289 font-size: 2em; 289 font-size: 2em;
290 } 290 }
291 } 291 }
292 } 292 }
293 293
294 @include assert('multiple elements, modifier in-between') { /// 10 /// 294 @include assert('multiple elements, modifier in-between') { /// 10 ///
295 @include output { 295 @include output {
296 @include bem.block('something') { 296 @include bem.block('something') {
297 @include bem.modifier('mod') { 297 @include bem.modifier('mod') {
298 @include bem.elem('child1', 'child2') { 298 @include bem.elem('child1', 'child2') {
299 font-size: 2em; 299 font-size: 2em;
300 } 300 }
301 } 301 }
302 } 302 }
303 } 303 }
304 304
305 @include expect { 305 @include expect {
306 .something--mod .something__child1, 306 .something--mod .something__child1,
307 .something--mod .something__child2 { 307 .something--mod .something__child2 {
308 font-size: 2em; 308 font-size: 2em;
309 } 309 }
310 } 310 }
311 } 311 }
312 312
313 @include assert('multiple elements, nested') { /// 11 /// 313 @include assert('multiple elements, nested') { /// 11 ///
314 @include output { 314 @include output {
315 @include bem.block('something') { 315 @include bem.block('something') {
316 @include bem.elem('child1', 'child2') { 316 @include bem.elem('child1', 'child2') {
317 font-size: 2em; 317 font-size: 2em;
318 318
319 @include bem.elem('subchild1') { 319 @include bem.elem('subchild1') {
320 font-size: 3em; 320 font-size: 3em;
321 } 321 }
322 } 322 }
323 323
324 @include bem.elem('child3') { 324 @include bem.elem('child3') {
325 font-size: 2em; 325 font-size: 2em;
326 326
327 @include bem.elem('subchild2', 'subchild3') { 327 @include bem.elem('subchild2', 'subchild3') {
328 font-size: 3em; 328 font-size: 3em;
329 } 329 }
330 } 330 }
331 } 331 }
332 } 332 }
333 333
334 @include expect { 334 @include expect {
335 .something__child1, 335 .something__child1,
336 .something__child2 { 336 .something__child2 {
337 font-size: 2em; 337 font-size: 2em;
338 } 338 }
339 339
340 .something__child1 .something__subchild1, 340 .something__child1 .something__subchild1,
341 .something__child2 .something__subchild1 { 341 .something__child2 .something__subchild1 {
342 font-size: 3em; 342 font-size: 3em;
343 } 343 }
344 344
345 .something__child3 { 345 .something__child3 {
346 font-size: 2em; 346 font-size: 2em;
347 } 347 }
348 348
349 .something__child3 .something__subchild2, 349 .something__child3 .something__subchild2,
350 .something__child3 .something__subchild3 { 350 .something__child3 .something__subchild3 {
351 font-size: 3em; 351 font-size: 3em;
352 } 352 }
353 } 353 }
354 } 354 }
355 355
356 @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// 356 @include assert('multiple elements, nested, manual selector in-between') { /// 12 ///
357 @include output(false) { 357 @include output(false) {
358 @include bem.block('something') { 358 @include bem.block('something') {
359 @include bem.elem('child1', 'child2') { 359 @include bem.elem('child1', 'child2') {
360 font-size: 2em; 360 font-size: 2em;
361 361
362 &:hover { 362 &:hover {
363 @include bem.elem('subchild1') { 363 @include bem.elem('subchild1') {
364 font-size: 3em; 364 font-size: 3em;
365 } 365 }
366 } 366 }
367 367
368 .test & { 368 .test & {
369 @include bem.elem('subchild2') { 369 @include bem.elem('subchild2') {
370 font-size: 3em; 370 font-size: 3em;
371 } 371 }
372 } 372 }
373 } 373 }
374 374
375 @include bem.elem('child3') { 375 @include bem.elem('child3') {
376 font-size: 2em; 376 font-size: 2em;
377 377
378 &:hover { 378 &:hover {
379 @include bem.elem('subchild3', 'subchild4') { 379 @include bem.elem('subchild3', 'subchild4') {
380 font-size: 3em; 380 font-size: 3em;
381 } 381 }
382 } 382 }
383 383
384 .test & { 384 .test & {
385 @include bem.elem('subchild5', 'subchild6') { 385 @include bem.elem('subchild5', 'subchild6') {
386 font-size: 3em; 386 font-size: 3em;
387 } 387 }
388 } 388 }
389 } 389 }
390 } 390 }
391 } 391 }
392 392
393 @include expect(false) { 393 @include expect(false) {
394 .something__child1, 394 .something__child1,
395 .something__child2 { 395 .something__child2 {
396 font-size: 2em; 396 font-size: 2em;
397 } 397 }
398 398
399 .something__child1:hover .something__subchild1, 399 .something__child1:hover .something__subchild1,
400 .something__child2:hover .something__subchild1 { 400 .something__child2:hover .something__subchild1 {
401 font-size: 3em; 401 font-size: 3em;
402 } 402 }
403 403
404 .test .something__child1 .something__subchild2, 404 .test .something__child1 .something__subchild2,
405 .test .something__child2 .something__subchild2 { 405 .test .something__child2 .something__subchild2 {
406 font-size: 3em; 406 font-size: 3em;
407 } 407 }
408 408
409 .something__child3 { 409 .something__child3 {
410 font-size: 2em; 410 font-size: 2em;
411 } 411 }
412 412
413 .something__child3:hover .something__subchild3, 413 .something__child3:hover .something__subchild3,
414 .something__child3:hover .something__subchild4 { 414 .something__child3:hover .something__subchild4 {
415 font-size: 3em; 415 font-size: 3em;
416 } 416 }
417 417
418 .test .something__child3 .something__subchild5, 418 .test .something__child3 .something__subchild5,
419 .test .something__child3 .something__subchild6 { 419 .test .something__child3 .something__subchild6 {
420 font-size: 3em; 420 font-size: 3em;
421 } 421 }
422 } 422 }
423 } 423 }
424 424
425 @include assert('multiple elements, nested, modifier in-between') { /// 13 /// 425 @include assert('multiple elements, nested, modifier in-between') { /// 13 ///
426 @include output { 426 @include output {
427 @include bem.block('something') { 427 @include bem.block('something') {
428 @include bem.elem('child1', 'child2') { 428 @include bem.elem('child1', 'child2') {
429 font-size: 2em; 429 font-size: 2em;
430 430
431 @include bem.modifier('mod') { 431 @include bem.modifier('mod') {
432 @include bem.elem('subchild1') { 432 @include bem.elem('subchild1') {
433 font-size: 3em; 433 font-size: 3em;
434 } 434 }
435 } 435 }
436 } 436 }
437 437
438 @include bem.elem('child3') { 438 @include bem.elem('child3') {
439 font-size: 2em; 439 font-size: 2em;
440 440
441 @include bem.modifier('mod') { 441 @include bem.modifier('mod') {
442 @include bem.elem('subchild2', 'subchild3') { 442 @include bem.elem('subchild2', 'subchild3') {
443 font-size: 3em; 443 font-size: 3em;
444 } 444 }
445 } 445 }
446 } 446 }
447 } 447 }
448 } 448 }
449 449
450 @include expect { 450 @include expect {
451 .something__child1, 451 .something__child1,
452 .something__child2 { 452 .something__child2 {
453 font-size: 2em; 453 font-size: 2em;
454 } 454 }
455 455
456 .something__child1--mod .something__subchild1, 456 .something__child1--mod .something__subchild1,
457 .something__child2--mod .something__subchild1 { 457 .something__child2--mod .something__subchild1 {
458 font-size: 3em; 458 font-size: 3em;
459 } 459 }
460 460
461 .something__child3 { 461 .something__child3 {
462 font-size: 2em; 462 font-size: 2em;
463 } 463 }
464 464
465 .something__child3--mod .something__subchild2, 465 .something__child3--mod .something__subchild2,
466 .something__child3--mod .something__subchild3 { 466 .something__child3--mod .something__subchild3 {
467 font-size: 3em; 467 font-size: 3em;
468 } 468 }
469 } 469 }
470 } 470 }
471 471
472 @include assert('multiple elements, in at-theme') { /// 14 /// 472 @include assert('multiple elements, in at-theme') { /// 14 ///
473 @include output(false) { 473 @include output(false) {
474 @include bem.block('something') { 474 @include bem.block('something') {
475 @include bem.at-theme('dark') { 475 @include bem.at-theme('dark') {
476 @include bem.elem('child1', 'child2') { 476 @include bem.elem('child1', 'child2') {
477 font-size: 2em; 477 font-size: 2em;
478 } 478 }
479 } 479 }
480 } 480 }
481 } 481 }
482 482
483 @include expect(false) { 483 @include expect(false) {
484 .t-dark .something__child1, 484 .t-dark .something__child1,
485 [class*=' t-'] .t-dark .something__child1, 485 [class*=' t-'] .t-dark .something__child1,
486 [class^='t-'] .t-dark .something__child1, 486 [class^='t-'] .t-dark .something__child1,
487 .t-dark .something__child2, 487 .t-dark .something__child2,
488 [class*=' t-'] .t-dark .something__child2, 488 [class*=' t-'] .t-dark .something__child2,
489 [class^='t-'] .t-dark .something__child2 { 489 [class^='t-'] .t-dark .something__child2 {
490 font-size: 2em; 490 font-size: 2em;
491 } 491 }
492 } 492 }
493 } 493 }
494} 494}
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 @@
11// 11//
12 12
13@include it('Examples') { 13@include it('Examples') {
14 @include assert('Media object') { /// 1 /// 14 @include assert('Media object') { /// 1 ///
15 @include output { 15 @include output {
16 @include bem.object('media') { 16 @include bem.object('media') {
17 display: flex; 17 display: flex;
18 align-items: flex-start; 18 align-items: flex-start;
19 justify-content: flex-start; 19 justify-content: flex-start;
20 20
21 @include bem.elem('image') { 21 @include bem.elem('image') {
22 display: block; 22 display: block;
23 flex: 0 0 auto; 23 flex: 0 0 auto;
24 order: 1; 24 order: 1;
25 overflow: hidden; 25 overflow: hidden;
26 } 26 }
27 27
28 @include bem.elem('body') { 28 @include bem.elem('body') {
29 order: 2; 29 order: 2;
30 } 30 }
31 31
32 @include bem.modifier('rtl') { 32 @include bem.modifier('rtl') {
33 justify-content: flex-end; 33 justify-content: flex-end;
34 34
35 @include bem.elem('image') { 35 @include bem.elem('image') {
36 order: 2; 36 order: 2;
37 } 37 }
38 38
39 @include bem.elem('body') { 39 @include bem.elem('body') {
40 order: 1; 40 order: 1;
41 } 41 }
42 } 42 }
43 } 43 }
44 } 44 }
45 45
46 @include expect { 46 @include expect {
47 .o-media { 47 @layer object {
48 display: flex; 48 .o-media {
49 align-items: flex-start; 49 display: flex;
50 justify-content: flex-start; 50 align-items: flex-start;
51 } 51 justify-content: flex-start;
52 }
52 53
53 .o-media__image { 54 .o-media__image {
54 display: block; 55 display: block;
55 flex: 0 0 auto; 56 flex: 0 0 auto;
56 order: 1; 57 order: 1;
57 overflow: hidden; 58 overflow: hidden;
58 } 59 }
59 60
60 .o-media__body { 61 .o-media__body {
61 order: 2; 62 order: 2;
62 } 63 }
63 64
64 .o-media--rtl { 65 .o-media--rtl {
65 justify-content: flex-end; 66 justify-content: flex-end;
66 67
67 .o-media__image { 68 .o-media__image {
68 order: 2; 69 order: 2;
69 } 70 }
70 71
71 .o-media__body { 72 .o-media__body {
72 order: 1; 73 order: 1;
73 } 74 }
74 } 75 }
75 } 76 }
76 } 77 }
78 }
77 79
78 @include assert('Tabs') { /// 2 /// 80 @include assert('Tabs') { /// 2 ///
79 @include output { 81 @include output {
80 @include bem.component('tabs') { 82 @include bem.component('tabs') {
81 position: relative; 83 position: relative;
82 84
83 @include bem.elem('tab') { 85 @include bem.elem('tab') {
84 float: left; 86 float: left;
85 } 87 }
86 88
87 @include bem.elem('tabRadio') { 89 @include bem.elem('tabRadio') {
88 position: absolute; 90 position: absolute;
89 top: -9999px; 91 top: -9999px;
90 left: -9999px; 92 left: -9999px;
91 93
92 &:checked { 94 &:checked {
93 @include bem.sibling-elem('tabLabel') { 95 @include bem.sibling-elem('tabLabel') {
94 font-weight: bold; 96 font-weight: bold;
95 } 97 }
96 98
97 @include bem.sibling-elem('tabContent') { 99 @include bem.sibling-elem('tabContent') {
98 display: block; 100 display: block;
99 } 101 }
100 } 102 }
101 } 103 }
102 104
103 @include bem.elem('tabLabel') { 105 @include bem.elem('tabLabel') {
104 cursor: pointer; 106 cursor: pointer;
105 107
106 &:hover, 108 &:hover,
107 &:active { 109 &:active {
108 text-decoration: underline; 110 text-decoration: underline;
109 } 111 }
110 } 112 }
111 113
112 @include bem.elem('tabContent') { 114 @include bem.elem('tabContent') {
113 position: absolute; 115 position: absolute;
114 left: 0; 116 left: 0;
115 display: none; 117 display: none;
116 } 118 }
117 } 119 }
118 } 120 }
119 121
120 @include expect { 122 @include expect {
121 .c-tabs { 123 @layer component {
122 position: relative; 124 .c-tabs {
123 } 125 position: relative;
126 }
124 127
125 .c-tabs__tab { 128 .c-tabs__tab {
126 float: left; 129 float: left;
127 } 130 }
128 131
129 .c-tabs__tabRadio { 132 .c-tabs__tabRadio {
130 position: absolute; 133 position: absolute;
131 top: -9999px; 134 top: -9999px;
132 left: -9999px; 135 left: -9999px;
133 } 136 }
134 137
135 .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel { 138 .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel {
136 font-weight: bold; 139 font-weight: bold;
137 } 140 }
138 141
139 .c-tabs__tabRadio:checked ~ .c-tabs__tabContent { 142 .c-tabs__tabRadio:checked ~ .c-tabs__tabContent {
140 display: block; 143 display: block;
141 } 144 }
142 145
143 .c-tabs__tabLabel { 146 .c-tabs__tabLabel {
144 cursor: pointer; 147 cursor: pointer;
145 } 148 }
146 149
147 .c-tabs__tabLabel:hover, 150 .c-tabs__tabLabel:hover,
148 .c-tabs__tabLabel:active { 151 .c-tabs__tabLabel:active {
149 text-decoration: underline; 152 text-decoration: underline;
150 } 153 }
151 154
152 .c-tabs__tabContent { 155 .c-tabs__tabContent {
153 position: absolute; 156 position: absolute;
154 left: 0; 157 left: 0;
155 display: none; 158 display: none;
156 } 159 }
157 } 160 }
158 } 161 }
162 }
159 163
160 @include assert('Accordion') { /// 3 /// 164 @include assert('Accordion') { /// 3 ///
161 @include output { 165 @include output {
162 @include bem.component('accordion') { 166 @include bem.component('accordion') {
163 @include bem.elem('section') { 167 @include bem.elem('section') {
164 // nothing to do 168 // nothing to do
165 } 169 }
166 170
167 @include bem.elem('sectionCheckbox') { 171 @include bem.elem('sectionCheckbox') {
168 position: absolute; 172 position: absolute;
169 top: -9999px; 173 top: -9999px;
170 left: -9999px; 174 left: -9999px;
171 175
172 &:checked { 176 &:checked {
173 @include bem.sibling-elem('sectionLabel') { 177 @include bem.sibling-elem('sectionLabel') {
174 font-weight: bold; 178 font-weight: bold;
175 } 179 }
176 180
177 @include bem.sibling-elem('sectionContent') { 181 @include bem.sibling-elem('sectionContent') {
178 display: block; 182 display: block;
179 } 183 }
180 } 184 }
181 } 185 }
182 186
183 @include bem.elem('sectionLabel') { 187 @include bem.elem('sectionLabel') {
184 cursor: pointer; 188 cursor: pointer;
185 189
186 &:hover, 190 &:hover,
187 &:active { 191 &:active {
188 text-decoration: underline; 192 text-decoration: underline;
189 } 193 }
190 } 194 }
191 195
192 @include bem.elem('sectionContent') { 196 @include bem.elem('sectionContent') {
193 display: none; 197 display: none;
194 } 198 }
195 } 199 }
196 } 200 }
197 201
198 @include expect { 202 @include expect {
199 .c-accordion__sectionCheckbox { 203 @layer component {
200 position: absolute; 204 .c-accordion__sectionCheckbox {
201 top: -9999px; 205 position: absolute;
202 left: -9999px; 206 top: -9999px;
203 } 207 left: -9999px;
208 }
204 209
205 .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel { 210 .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel {
206 font-weight: bold; 211 font-weight: bold;
207 } 212 }
208 213
209 .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent { 214 .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent {
210 display: block; 215 display: block;
211 } 216 }
212 217
213 .c-accordion__sectionLabel { 218 .c-accordion__sectionLabel {
214 cursor: pointer; 219 cursor: pointer;
215 } 220 }
216 221
217 .c-accordion__sectionLabel:hover, 222 .c-accordion__sectionLabel:hover,
218 .c-accordion__sectionLabel:active { 223 .c-accordion__sectionLabel:active {
219 text-decoration: underline; 224 text-decoration: underline;
220 } 225 }
221 226
222 .c-accordion__sectionContent { 227 .c-accordion__sectionContent {
223 display: none; 228 display: none;
224 } 229 }
225 } 230 }
226 } 231 }
232 }
227} 233}
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 @@
23// 23//
24 24
25@include it('modifier') { 25@include it('modifier') {
26 @include assert('block modifier') { /// 1 /// 26 @include assert('block modifier') { /// 1 ///
27 @include output { 27 @include output {
28 @include bem.block('something') { 28 @include bem.block('something') {
29 @include bem.modifier('mod') { 29 @include bem.modifier('mod') {
30 font-size: 1.5em; 30 font-size: 1.5em;
31 31
32 @include bem.modifier('submod') { 32 @include bem.modifier('submod') {
33 font-size: 1.75em; 33 font-size: 1.75em;
34 } 34 }
35 } 35 }
36 } 36 }
37 } 37 }
38 38
39 @include expect { 39 @include expect {
40 .something--mod { 40 .something--mod {
41 font-size: 1.5em; 41 font-size: 1.5em;
42 } 42 }
43 43
44 .something--mod.something--submod { 44 .something--mod.something--submod {
45 font-size: 1.75em; 45 font-size: 1.75em;
46 } 46 }
47 } 47 }
48 } 48 }
49 49
50 @include assert('block modifier, in at-theme') { /// 2 /// 50 @include assert('block modifier, in at-theme') { /// 2 ///
51 @include output(false) { 51 @include output(false) {
52 @include bem.block('something') { 52 @include bem.block('something') {
53 @include bem.at-theme('dark') { 53 @include bem.at-theme('dark') {
54 @include bem.modifier('mod') { 54 @include bem.modifier('mod') {
55 font-size: 1.5em; 55 font-size: 1.5em;
56 56
57 @include bem.modifier('submod') { 57 @include bem.modifier('submod') {
58 font-size: 1.75em; 58 font-size: 1.75em;
59 } 59 }
60 } 60 }
61 } 61 }
62 } 62 }
63 } 63 }
64 64
65 @include expect(false) { 65 @include expect(false) {
66 .t-dark .something--mod, 66 .t-dark .something--mod,
67 [class*=' t-'] .t-dark .something--mod, 67 [class*=' t-'] .t-dark .something--mod,
68 [class^='t-'] .t-dark .something--mod { 68 [class^='t-'] .t-dark .something--mod {
69 font-size: 1.5em; 69 font-size: 1.5em;
70 } 70 }
71 71
72 .t-dark .something--mod.something--submod, 72 .t-dark .something--mod.something--submod,
73 [class*=' t-'] .t-dark .something--mod.something--submod, 73 [class*=' t-'] .t-dark .something--mod.something--submod,
74 [class^='t-'] .t-dark .something--mod.something--submod { 74 [class^='t-'] .t-dark .something--mod.something--submod {
75 font-size: 1.75em; 75 font-size: 1.75em;
76 } 76 }
77 } 77 }
78 } 78 }
79 79
80 @include assert('element modifier, single element') { /// 3 /// 80 @include assert('element modifier, single element') { /// 3 ///
81 @include output { 81 @include output {
82 @include bem.block('something') { 82 @include bem.block('something') {
83 @include bem.elem('child') { 83 @include bem.elem('child') {
84 @include bem.modifier('mod') { 84 @include bem.modifier('mod') {
85 font-size: 2.5em; 85 font-size: 2.5em;
86 86
87 @include bem.modifier('submod') { 87 @include bem.modifier('submod') {
88 font-size: 2.75em; 88 font-size: 2.75em;
89 } 89 }
90 } 90 }
91 } 91 }
92 } 92 }
93 } 93 }
94 94
95 @include expect { 95 @include expect {
96 .something__child--mod { 96 .something__child--mod {
97 font-size: 2.5em; 97 font-size: 2.5em;
98 } 98 }
99 99
100 .something__child--mod.something__child--submod { 100 .something__child--mod.something__child--submod {
101 font-size: 2.75em; 101 font-size: 2.75em;
102 } 102 }
103 } 103 }
104 } 104 }
105 105
106 @include assert('element modifier, multiple elements') { /// 4 /// 106 @include assert('element modifier, multiple elements') { /// 4 ///
107 @include output { 107 @include output {
108 @include bem.block('something') { 108 @include bem.block('something') {
109 @include bem.elem('child1', 'child2') { 109 @include bem.elem('child1', 'child2') {
110 @include bem.modifier('mod') { 110 @include bem.modifier('mod') {
111 font-size: 2.5em; 111 font-size: 2.5em;
112 112
113 @include bem.modifier('submod') { 113 @include bem.modifier('submod') {
114 font-size: 2.75em; 114 font-size: 2.75em;
115 } 115 }
116 } 116 }
117 } 117 }
118 } 118 }
119 } 119 }
120 120
121 @include expect { 121 @include expect {
122 .something__child1--mod, 122 .something__child1--mod,
123 .something__child2--mod { 123 .something__child2--mod {
124 font-size: 2.5em; 124 font-size: 2.5em;
125 } 125 }
126 126
127 .something__child1--mod.something__child1--submod, 127 .something__child1--mod.something__child1--submod,
128 .something__child2--mod.something__child2--submod { 128 .something__child2--mod.something__child2--submod {
129 font-size: 2.75em; 129 font-size: 2.75em;
130 } 130 }
131 } 131 }
132 } 132 }
133 133
134 @include assert('element modifier, single related element') { /// 5 /// 134 @include assert('element modifier, single related element') { /// 5 ///
135 @include output { 135 @include output {
136 @include bem.block('something') { 136 @include bem.block('something') {
137 @include bem.elem('child1') { 137 @include bem.elem('child1') {
138 @include bem.next-elem('child2') { 138 @include bem.next-elem('child2') {
139 @include bem.modifier('mod') { 139 @include bem.modifier('mod') {
140 font-size: 2.5em; 140 font-size: 2.5em;
141 141
142 @include bem.modifier('submod') { 142 @include bem.modifier('submod') {
143 font-size: 2.75em; 143 font-size: 2.75em;
144 } 144 }
145 } 145 }
146 } 146 }
147 } 147 }
148 } 148 }
149 } 149 }
150 150
151 @include expect { 151 @include expect {
152 .something__child1 + .something__child2--mod { 152 .something__child1 + .something__child2--mod {
153 font-size: 2.5em; 153 font-size: 2.5em;
154 } 154 }
155 155
156 .something__child1 + .something__child2--mod.something__child2--submod { 156 .something__child1 + .something__child2--mod.something__child2--submod {
157 font-size: 2.75em; 157 font-size: 2.75em;
158 } 158 }
159 } 159 }
160 } 160 }
161 161
162 @include assert('element modifier, multiple related elements') { /// 6 /// 162 @include assert('element modifier, multiple related elements') { /// 6 ///
163 @include output { 163 @include output {
164 @include bem.block('something') { 164 @include bem.block('something') {
165 @include bem.elem('child1') { 165 @include bem.elem('child1') {
166 @include bem.next-elem('child2', 'child3') { 166 @include bem.next-elem('child2', 'child3') {
167 @include bem.modifier('mod') { 167 @include bem.modifier('mod') {
168 font-size: 2.5em; 168 font-size: 2.5em;
169 169
170 @include bem.modifier('submod') { 170 @include bem.modifier('submod') {
171 font-size: 2.75em; 171 font-size: 2.75em;
172 } 172 }
173 } 173 }
174 } 174 }
175 } 175 }
176 } 176 }
177 } 177 }
178 178
179 @include expect { 179 @include expect {
180 .something__child1 + .something__child2--mod, 180 .something__child1 + .something__child2--mod,
181 .something__child1 + .something__child3--mod { 181 .something__child1 + .something__child3--mod {
182 font-size: 2.5em; 182 font-size: 2.5em;
183 } 183 }
184 184
185 .something__child1 + .something__child2--mod.something__child2--submod, 185 .something__child1 + .something__child2--mod.something__child2--submod,
186 .something__child1 + .something__child3--mod.something__child3--submod { 186 .something__child1 + .something__child3--mod.something__child3--submod {
187 font-size: 2.75em; 187 font-size: 2.75em;
188 } 188 }
189 } 189 }
190 } 190 }
191 191
192 @include assert('element modifier, single element, manual selector before') { /// 7 /// 192 @include assert('element modifier, single element, manual selector before') { /// 7 ///
193 @include output(false) { 193 @include output(false) {
194 @include bem.block('something') { 194 @include bem.block('something') {
195 &:hover { 195 &:hover {
196 @include bem.elem('child1') { 196 @include bem.elem('child1') {
197 @include bem.modifier('mod') { 197 @include bem.modifier('mod') {
198 font-size: 2.5em; 198 font-size: 2.5em;
199 199
200 @include bem.modifier('submod') { 200 @include bem.modifier('submod') {
201 font-size: 2.75em; 201 font-size: 2.75em;
202 } 202 }
203 } 203 }
204 } 204 }
205 } 205 }
206 206
207 .test & { 207 .test & {
208 @include bem.elem('child2') { 208 @include bem.elem('child2') {
209 @include bem.modifier('mod') { 209 @include bem.modifier('mod') {
210 font-size: 2.5em; 210 font-size: 2.5em;
211 211
212 @include bem.modifier('submod') { 212 @include bem.modifier('submod') {
213 font-size: 2.75em; 213 font-size: 2.75em;
214 } 214 }
215 } 215 }
216 } 216 }
217 } 217 }
218 } 218 }
219 } 219 }
220 220
221 @include expect(false) { 221 @include expect(false) {
222 .something:hover .something__child1--mod { 222 .something:hover .something__child1--mod {
223 font-size: 2.5em; 223 font-size: 2.5em;
224 } 224 }
225 225
226 .something:hover .something__child1--mod.something__child1--submod { 226 .something:hover .something__child1--mod.something__child1--submod {
227 font-size: 2.75em; 227 font-size: 2.75em;
228 } 228 }
229 229
230 .test .something__child2--mod { 230 .test .something__child2--mod {
231 font-size: 2.5em; 231 font-size: 2.5em;
232 } 232 }
233 233
234 .test .something__child2--mod.something__child2--submod { 234 .test .something__child2--mod.something__child2--submod {
235 font-size: 2.75em; 235 font-size: 2.75em;
236 } 236 }
237 } 237 }
238 } 238 }
239 239
240 @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// 240 @include assert('element modifier, multiple elements, manual selector before') { /// 8 ///
241 @include output(false) { 241 @include output(false) {
242 @include bem.block('something') { 242 @include bem.block('something') {
243 &:hover { 243 &:hover {
244 @include bem.elem('child1', 'child2') { 244 @include bem.elem('child1', 'child2') {
245 @include bem.modifier('mod') { 245 @include bem.modifier('mod') {
246 font-size: 2.5em; 246 font-size: 2.5em;
247 247
248 @include bem.modifier('submod') { 248 @include bem.modifier('submod') {
249 font-size: 2.75em; 249 font-size: 2.75em;
250 } 250 }
251 } 251 }
252 } 252 }
253 } 253 }
254 254
255 .test & { 255 .test & {
256 @include bem.elem('child3', 'child4') { 256 @include bem.elem('child3', 'child4') {
257 @include bem.modifier('mod') { 257 @include bem.modifier('mod') {
258 font-size: 2.5em; 258 font-size: 2.5em;
259 259
260 @include bem.modifier('submod') { 260 @include bem.modifier('submod') {
261 font-size: 2.75em; 261 font-size: 2.75em;
262 } 262 }
263 } 263 }
264 } 264 }
265 } 265 }
266 } 266 }
267 } 267 }
268 268
269 @include expect(false) { 269 @include expect(false) {
270 .something:hover .something__child1--mod, 270 .something:hover .something__child1--mod,
271 .something:hover .something__child2--mod { 271 .something:hover .something__child2--mod {
272 font-size: 2.5em; 272 font-size: 2.5em;
273 } 273 }
274 274
275 .something:hover .something__child1--mod.something__child1--submod, 275 .something:hover .something__child1--mod.something__child1--submod,
276 .something:hover .something__child2--mod.something__child2--submod { 276 .something:hover .something__child2--mod.something__child2--submod {
277 font-size: 2.75em; 277 font-size: 2.75em;
278 } 278 }
279 279
280 .test .something__child3--mod, 280 .test .something__child3--mod,
281 .test .something__child4--mod { 281 .test .something__child4--mod {
282 font-size: 2.5em; 282 font-size: 2.5em;
283 } 283 }
284 284
285 .test .something__child3--mod.something__child3--submod, 285 .test .something__child3--mod.something__child3--submod,
286 .test .something__child4--mod.something__child4--submod { 286 .test .something__child4--mod.something__child4--submod {
287 font-size: 2.75em; 287 font-size: 2.75em;
288 } 288 }
289 } 289 }
290 } 290 }
291 291
292 @include assert('element modifier, single related element, manual selector before') { /// 9 /// 292 @include assert('element modifier, single related element, manual selector before') { /// 9 ///
293 @include output(false) { 293 @include output(false) {
294 @include bem.block('something') { 294 @include bem.block('something') {
295 &:hover { 295 &:hover {
296 @include bem.elem('child1') { 296 @include bem.elem('child1') {
297 @include bem.next-elem('child2') { 297 @include bem.next-elem('child2') {
298 @include bem.modifier('mod1') { 298 @include bem.modifier('mod1') {
299 font-size: 2.5em; 299 font-size: 2.5em;
300 300
301 @include bem.modifier('submod1') { 301 @include bem.modifier('submod1') {
302 font-size: 2.75em; 302 font-size: 2.75em;
303 } 303 }
304 } 304 }
305 } 305 }
306 } 306 }
307 } 307 }
308 308
309 .test & { 309 .test & {
310 @include bem.elem('child3') { 310 @include bem.elem('child3') {
311 @include bem.next-elem('child4') { 311 @include bem.next-elem('child4') {
312 @include bem.modifier('mod1') { 312 @include bem.modifier('mod1') {
313 font-size: 2.5em; 313 font-size: 2.5em;
314 314
315 @include bem.modifier('submod1') { 315 @include bem.modifier('submod1') {
316 font-size: 2.75em; 316 font-size: 2.75em;
317 } 317 }
318 } 318 }
319 } 319 }
320 } 320 }
321 } 321 }
322 322
323 @include bem.elem('child5') { 323 @include bem.elem('child5') {
324 &:hover { 324 &:hover {
325 @include bem.next-elem('child6') { 325 @include bem.next-elem('child6') {
326 @include bem.modifier('mod2') { 326 @include bem.modifier('mod2') {
327 font-size: 2.5em; 327 font-size: 2.5em;
328 328
329 @include bem.modifier('submod2') { 329 @include bem.modifier('submod2') {
330 font-size: 2.75em; 330 font-size: 2.75em;
331 } 331 }
332 } 332 }
333 } 333 }
334 } 334 }
335 335
336 .test & { 336 .test & {
337 @include bem.next-elem('child7') { 337 @include bem.next-elem('child7') {
338 @include bem.modifier('mod2') { 338 @include bem.modifier('mod2') {
339 font-size: 2.5em; 339 font-size: 2.5em;
340 340
341 @include bem.modifier('submod2') { 341 @include bem.modifier('submod2') {
342 font-size: 2.75em; 342 font-size: 2.75em;
343 } 343 }
344 } 344 }
345 } 345 }
346 } 346 }
347 } 347 }
348 } 348 }
349 } 349 }
350 350
351 @include expect(false) { 351 @include expect(false) {
352 .something:hover .something__child1 + .something__child2--mod1 { 352 .something:hover .something__child1 + .something__child2--mod1 {
353 font-size: 2.5em; 353 font-size: 2.5em;
354 } 354 }
355 355
356 .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 { 356 .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 {
357 font-size: 2.75em; 357 font-size: 2.75em;
358 } 358 }
359 359
360 .test .something__child3 + .something__child4--mod1 { 360 .test .something__child3 + .something__child4--mod1 {
361 font-size: 2.5em; 361 font-size: 2.5em;
362 } 362 }
363 363
364 .test .something__child3 + .something__child4--mod1.something__child4--submod1 { 364 .test .something__child3 + .something__child4--mod1.something__child4--submod1 {
365 font-size: 2.75em; 365 font-size: 2.75em;
366 } 366 }
367 367
368 .something__child5:hover + .something__child6--mod2 { 368 .something__child5:hover + .something__child6--mod2 {
369 font-size: 2.5em; 369 font-size: 2.5em;
370 } 370 }
371 371
372 .something__child5:hover + .something__child6--mod2.something__child6--submod2 { 372 .something__child5:hover + .something__child6--mod2.something__child6--submod2 {
373 font-size: 2.75em; 373 font-size: 2.75em;
374 } 374 }
375 375
376 .test .something__child5 + .something__child7--mod2 { 376 .test .something__child5 + .something__child7--mod2 {
377 font-size: 2.5em; 377 font-size: 2.5em;
378 } 378 }
379 379
380 .test .something__child5 + .something__child7--mod2.something__child7--submod2 { 380 .test .something__child5 + .something__child7--mod2.something__child7--submod2 {
381 font-size: 2.75em; 381 font-size: 2.75em;
382 } 382 }
383 } 383 }
384 } 384 }
385 385
386 @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// 386 @include assert('element modifier, multiple related elements, manual selector before') { /// 10 ///
387 @include output(false) { 387 @include output(false) {
388 @include bem.block('something') { 388 @include bem.block('something') {
389 &:hover { 389 &:hover {
390 @include bem.elem('child1') { 390 @include bem.elem('child1') {
391 @include bem.next-elem('child2', 'child3') { 391 @include bem.next-elem('child2', 'child3') {
392 @include bem.modifier('mod1') { 392 @include bem.modifier('mod1') {
393 font-size: 2.5em; 393 font-size: 2.5em;
394 394
395 @include bem.modifier('submod1') { 395 @include bem.modifier('submod1') {
396 font-size: 2.75em; 396 font-size: 2.75em;
397 } 397 }
398 } 398 }
399 } 399 }
400 } 400 }
401 } 401 }
402 402
403 .test & { 403 .test & {
404 @include bem.elem('child4') { 404 @include bem.elem('child4') {
405 @include bem.next-elem('child5', 'child6') { 405 @include bem.next-elem('child5', 'child6') {
406 @include bem.modifier('mod1') { 406 @include bem.modifier('mod1') {
407 font-size: 2.5em; 407 font-size: 2.5em;
408 408
409 @include bem.modifier('submod1') { 409 @include bem.modifier('submod1') {
410 font-size: 2.75em; 410 font-size: 2.75em;
411 } 411 }
412 } 412 }
413 } 413 }
414 } 414 }
415 } 415 }
416 416
417 @include bem.elem('child7') { 417 @include bem.elem('child7') {
418 &:hover { 418 &:hover {
419 @include bem.next-elem('child8', 'child9') { 419 @include bem.next-elem('child8', 'child9') {
420 @include bem.modifier('mod2') { 420 @include bem.modifier('mod2') {
421 font-size: 2.5em; 421 font-size: 2.5em;
422 422
423 @include bem.modifier('submod2') { 423 @include bem.modifier('submod2') {
424 font-size: 2.75em; 424 font-size: 2.75em;
425 } 425 }
426 } 426 }
427 } 427 }
428 } 428 }
429 429
430 .test & { 430 .test & {
431 @include bem.next-elem('child10', 'child11') { 431 @include bem.next-elem('child10', 'child11') {
432 @include bem.modifier('mod2') { 432 @include bem.modifier('mod2') {
433 font-size: 2.5em; 433 font-size: 2.5em;
434 434
435 @include bem.modifier('submod2') { 435 @include bem.modifier('submod2') {
436 font-size: 2.75em; 436 font-size: 2.75em;
437 } 437 }
438 } 438 }
439 } 439 }
440 } 440 }
441 } 441 }
442 } 442 }
443 } 443 }
444 444
445 @include expect(false) { 445 @include expect(false) {
446 .something:hover .something__child1 + .something__child2--mod1, 446 .something:hover .something__child1 + .something__child2--mod1,
447 .something:hover .something__child1 + .something__child3--mod1 { 447 .something:hover .something__child1 + .something__child3--mod1 {
448 font-size: 2.5em; 448 font-size: 2.5em;
449 } 449 }
450 450
451 .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1, 451 .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1,
452 .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 { 452 .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 {
453 font-size: 2.75em; 453 font-size: 2.75em;
454 } 454 }
455 455
456 .test .something__child4 + .something__child5--mod1, 456 .test .something__child4 + .something__child5--mod1,
457 .test .something__child4 + .something__child6--mod1 { 457 .test .something__child4 + .something__child6--mod1 {
458 font-size: 2.5em; 458 font-size: 2.5em;
459 } 459 }
460 460
461 .test .something__child4 + .something__child5--mod1.something__child5--submod1, 461 .test .something__child4 + .something__child5--mod1.something__child5--submod1,
462 .test .something__child4 + .something__child6--mod1.something__child6--submod1 { 462 .test .something__child4 + .something__child6--mod1.something__child6--submod1 {
463 font-size: 2.75em; 463 font-size: 2.75em;
464 } 464 }
465 465
466 .something__child7:hover + .something__child8--mod2, 466 .something__child7:hover + .something__child8--mod2,
467 .something__child7:hover + .something__child9--mod2 { 467 .something__child7:hover + .something__child9--mod2 {
468 font-size: 2.5em; 468 font-size: 2.5em;
469 } 469 }
470 470
471 .something__child7:hover + .something__child8--mod2.something__child8--submod2, 471 .something__child7:hover + .something__child8--mod2.something__child8--submod2,
472 .something__child7:hover + .something__child9--mod2.something__child9--submod2 { 472 .something__child7:hover + .something__child9--mod2.something__child9--submod2 {
473 font-size: 2.75em; 473 font-size: 2.75em;
474 } 474 }
475 475
476 .test .something__child7 + .something__child10--mod2, 476 .test .something__child7 + .something__child10--mod2,
477 .test .something__child7 + .something__child11--mod2 { 477 .test .something__child7 + .something__child11--mod2 {
478 font-size: 2.5em; 478 font-size: 2.5em;
479 } 479 }
480 480
481 .test .something__child7 + .something__child10--mod2.something__child10--submod2, 481 .test .something__child7 + .something__child10--mod2.something__child10--submod2,
482 .test .something__child7 + .something__child11--mod2.something__child11--submod2 { 482 .test .something__child7 + .something__child11--mod2.something__child11--submod2 {
483 font-size: 2.75em; 483 font-size: 2.75em;
484 } 484 }
485 } 485 }
486 } 486 }
487 487
488 // @include assert('element modifier, in at-theme') { /// 11 /// 488 // @include assert('element modifier, in at-theme') { /// 11 ///
489 // @include output(false) { 489 // @include output(false) {
490 // @include bem.block('something') { 490 // @include bem.block('something') {
491 // @include bem.at-theme('dark') { 491 // @include bem.at-theme('dark') {
492 // @include bem.elem('child') { 492 // @include bem.elem('child') {
493 // @include bem.modifier('mod') { 493 // @include bem.modifier('mod') {
494 // font-size: 2.5em; 494 // font-size: 2.5em;
495 // 495 //
496 // @include bem.modifier('submod') { 496 // @include bem.modifier('submod') {
497 // font-size: 2.75em; 497 // font-size: 2.75em;
498 // } 498 // }
499 // } 499 // }
500 // } 500 // }
501 // } 501 // }
502 // } 502 // }
503 // } 503 // }
504 // 504 //
505 // @include expect(false) { 505 // @include expect(false) {
506 // .t-dark .something__child--mod, 506 // .t-dark .something__child--mod,
507 // [class*=' t-'] .t-dark .something__child--mod, 507 // [class*=' t-'] .t-dark .something__child--mod,
508 // [class^='t-'] .t-dark .something__child--mod { 508 // [class^='t-'] .t-dark .something__child--mod {
509 // font-size: 2.5em; 509 // font-size: 2.5em;
510 // } 510 // }
511 // 511 //
512 // .t-dark .something__child--mod.something__child--submod, 512 // .t-dark .something__child--mod.something__child--submod,
513 // [class*=' t-'] .t-dark .something__child--mod.something__child--submod, 513 // [class*=' t-'] .t-dark .something__child--mod.something__child--submod,
514 // [class^='t-'] .t-dark .something__child--mod.something__child--submod { 514 // [class^='t-'] .t-dark .something__child--mod.something__child--submod {
515 // font-size: 2.75em; 515 // font-size: 2.75em;
516 // } 516 // }
517 // } 517 // }
518 // } 518 // }
519 519
520 @include assert('nested block modifiers, extending') { /// 12 /// 520 @include assert('nested block modifiers, extending') { /// 12 ///
521 @include output { 521 @include output {
522 @include bem.block('something') { 522 @include bem.block('something') {
523 @include bem.modifier('mod') { 523 @include bem.modifier('mod') {
524 font-size: 1.5em; 524 font-size: 1.5em;
525 525
526 @include bem.modifier('submod' true) { 526 @include bem.modifier('submod' true) {
527 font-size: 1.75em; 527 font-size: 1.75em;
528 } 528 }
529 } 529 }
530 } 530 }
531 } 531 }
532 532
533 @include expect { 533 @include expect {
534 .something--mod { 534 .something--mod {
535 font-size: 1.5em; 535 font-size: 1.5em;
536 } 536 }
537 537
538 .something--mod--submod { 538 .something--mod--submod {
539 font-size: 1.75em; 539 font-size: 1.75em;
540 } 540 }
541 } 541 }
542 } 542 }
543 543
544 @include assert('nested element modifiers, extending') { /// 13 /// 544 @include assert('nested element modifiers, extending') { /// 13 ///
545 @include output { 545 @include output {
546 @include bem.block('something') { 546 @include bem.block('something') {
547 @include bem.elem('child') { 547 @include bem.elem('child') {
548 @include bem.modifier('mod') { 548 @include bem.modifier('mod') {
549 font-size: 2.5em; 549 font-size: 2.5em;
550 550
551 @include bem.modifier('submod' true) { 551 @include bem.modifier('submod' true) {
552 font-size: 2.75em; 552 font-size: 2.75em;
553 } 553 }
554 } 554 }
555 } 555 }
556 } 556 }
557 } 557 }
558 558
559 @include expect { 559 @include expect {
560 .something__child--mod { 560 .something__child--mod {
561 font-size: 2.5em; 561 font-size: 2.5em;
562 } 562 }
563 563
564 .something__child--mod--submod { 564 .something__child--mod--submod {
565 font-size: 2.75em; 565 font-size: 2.75em;
566 } 566 }
567 } 567 }
568 } 568 }
569 569
570 @include assert('block and element modifiers, single element') { /// 14 /// 570 @include assert('block and element modifiers, single element') { /// 14 ///
571 @include output { 571 @include output {
572 @include bem.block('something') { 572 @include bem.block('something') {
573 @include bem.modifier('mod1') { 573 @include bem.modifier('mod1') {
574 font-size: 1.5em; 574 font-size: 1.5em;
575 575
576 @include bem.modifier('submod1') { 576 @include bem.modifier('submod1') {
577 font-size: 1.75em; 577 font-size: 1.75em;
578 } 578 }
579 579
580 @include bem.elem('child') { 580 @include bem.elem('child') {
581 @include bem.modifier('mod2') { 581 @include bem.modifier('mod2') {
582 font-size: 2.5em; 582 font-size: 2.5em;
583 583
584 @include bem.modifier('submod2') { 584 @include bem.modifier('submod2') {
585 font-size: 2.75em; 585 font-size: 2.75em;
586 } 586 }
587 } 587 }
588 } 588 }
589 } 589 }
590 } 590 }
591 } 591 }
592 592
593 @include expect { 593 @include expect {
594 .something--mod1 { 594 .something--mod1 {
595 font-size: 1.5em; 595 font-size: 1.5em;
596 } 596 }
597 597
598 .something--mod1.something--submod1 { 598 .something--mod1.something--submod1 {
599 font-size: 1.75em; 599 font-size: 1.75em;
600 } 600 }
601 601
602 .something--mod1 .something__child--mod2 { 602 .something--mod1 .something__child--mod2 {
603 font-size: 2.5em; 603 font-size: 2.5em;
604 } 604 }
605 605
606 .something--mod1 .something__child--mod2.something__child--submod2 { 606 .something--mod1 .something__child--mod2.something__child--submod2 {
607 font-size: 2.75em; 607 font-size: 2.75em;
608 } 608 }
609 } 609 }
610 } 610 }
611 611
612 @include assert('block and element modifiers, multiple elements') { /// 15 /// 612 @include assert('block and element modifiers, multiple elements') { /// 15 ///
613 @include output { 613 @include output {
614 @include bem.block('something') { 614 @include bem.block('something') {
615 @include bem.modifier('mod1') { 615 @include bem.modifier('mod1') {
616 font-size: 1.5em; 616 font-size: 1.5em;
617 617
618 @include bem.modifier('submod1') { 618 @include bem.modifier('submod1') {
619 font-size: 1.75em; 619 font-size: 1.75em;
620 } 620 }
621 621
622 @include bem.elem('child1', 'child2') { 622 @include bem.elem('child1', 'child2') {
623 @include bem.modifier('mod2') { 623 @include bem.modifier('mod2') {
624 font-size: 2.5em; 624 font-size: 2.5em;
625 625
626 @include bem.modifier('submod2') { 626 @include bem.modifier('submod2') {
627 font-size: 2.75em; 627 font-size: 2.75em;
628 } 628 }
629 } 629 }
630 } 630 }
631 } 631 }
632 } 632 }
633 } 633 }
634 634
635 @include expect { 635 @include expect {
636 .something--mod1 { 636 .something--mod1 {
637 font-size: 1.5em; 637 font-size: 1.5em;
638 } 638 }
639 639
640 .something--mod1.something--submod1 { 640 .something--mod1.something--submod1 {
641 font-size: 1.75em; 641 font-size: 1.75em;
642 } 642 }
643 643
644 .something--mod1 .something__child1--mod2, 644 .something--mod1 .something__child1--mod2,
645 .something--mod1 .something__child2--mod2 { 645 .something--mod1 .something__child2--mod2 {
646 font-size: 2.5em; 646 font-size: 2.5em;
647 } 647 }
648 648
649 .something--mod1 .something__child1--mod2.something__child1--submod2, 649 .something--mod1 .something__child1--mod2.something__child1--submod2,
650 .something--mod1 .something__child2--mod2.something__child2--submod2 { 650 .something--mod1 .something__child2--mod2.something__child2--submod2 {
651 font-size: 2.75em; 651 font-size: 2.75em;
652 } 652 }
653 } 653 }
654 } 654 }
655} 655}
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 @@
26// 26//
27 27
28@include it('multi') { 28@include it('multi') {
29 @include assert('in root, 2 blocks') { /// 1 /// 29 @include assert('in root, 2 blocks') { /// 1 ///
30 @include output { 30 @include output {
31 @include bem.multi('component:' 'block1', 'object:' 'block2') { 31 @include bem.multi('component:' 'block1', 'object:' 'block2') {
32 font-size: 1em; 32 font-size: 1em;
33 33
34 @include bem.elem('child2') { 34 @include bem.elem('child2') {
35 font-size: 2em; 35 font-size: 2em;
36 } 36 }
37 } 37 }
38 } 38 }
39 39
40 @include expect { 40 @include expect {
41 .c-block1 { 41 .c-block1 {
42 font-size: 1em; 42 font-size: 1em;
43 } 43 }
44 44
45 .c-block1__child2 { 45 .c-block1__child2 {
46 font-size: 2em; 46 font-size: 2em;
47 } 47 }
48 48
49 .o-block2 { 49 .o-block2 {
50 font-size: 1em; 50 font-size: 1em;
51 } 51 }
52 52
53 .o-block2__child2 { 53 .o-block2__child2 {
54 font-size: 2em; 54 font-size: 2em;
55 } 55 }
56 } 56 }
57 } 57 }
58 58
59 @include assert('in root, 1 block, 1 manual selector') { /// 2 /// 59 @include assert('in root, 1 block, 1 manual selector') { /// 2 ///
60 @include output { 60 @include output {
61 @include bem.multi('component:' 'block1', 'a:hover') { 61 @include bem.multi('component:' 'block1', 'a:hover') {
62 font-size: 1em; 62 font-size: 1em;
63 } 63 }
64 } 64 }
65 65
66 @include expect { 66 @include expect {
67 .c-block1 { 67 .c-block1 {
68 font-size: 1em; 68 font-size: 1em;
69 } 69 }
70 70
71 a:hover { 71 a:hover {
72 font-size: 1em; 72 font-size: 1em;
73 } 73 }
74 } 74 }
75 } 75 }
76 76
77 @include assert('in block, 2 elements') { /// 3 /// 77 @include assert('in block, 2 elements') { /// 3 ///
78 @include output { 78 @include output {
79 @include bem.block('something') { 79 @include bem.block('something') {
80 @include bem.multi('elem:' 'child1' 'child2') { 80 @include bem.multi('elem:' 'child1' 'child2') {
81 font-size: 2em; 81 font-size: 2em;
82 82
83 @include bem.modifier('mod') { 83 @include bem.modifier('mod') {
84 font-size: 2.5em; 84 font-size: 2.5em;
85 } 85 }
86 } 86 }
87 } 87 }
88 } 88 }
89 89
90 @include expect { 90 @include expect {
91 .something__child1, 91 .something__child1,
92 .something__child2 { 92 .something__child2 {
93 font-size: 2em; 93 font-size: 2em;
94 } 94 }
95 95
96 .something__child1--mod, 96 .something__child1--mod,
97 .something__child2--mod { 97 .something__child2--mod {
98 font-size: 2.5em; 98 font-size: 2.5em;
99 } 99 }
100 } 100 }
101 } 101 }
102 102
103 @include assert('in block, 1 element, 1 modifier') { /// 4 /// 103 @include assert('in block, 1 element, 1 modifier') { /// 4 ///
104 @include output { 104 @include output {
105 @include bem.block('something') { 105 @include bem.block('something') {
106 @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { 106 @include bem.multi('elem:' 'child', 'modifier:' 'mod1') {
107 font-size: 2em; 107 font-size: 2em;
108 108
109 @include bem.modifier('mod2') { 109 @include bem.modifier('mod2') {
110 font-size: 2.5em; 110 font-size: 2.5em;
111 } 111 }
112 } 112 }
113 } 113 }
114 } 114 }
115 115
116 @include expect { 116 @include expect {
117 .something__child { 117 .something__child {
118 font-size: 2em; 118 font-size: 2em;
119 } 119 }
120 120
121 .something__child--mod2 { 121 .something__child--mod2 {
122 font-size: 2.5em; 122 font-size: 2.5em;
123 } 123 }
124 124
125 .something--mod1 { 125 .something--mod1 {
126 font-size: 2em; 126 font-size: 2em;
127 } 127 }
128 128
129 .something--mod1.something--mod2 { 129 .something--mod1.something--mod2 {
130 font-size: 2.5em; 130 font-size: 2.5em;
131 } 131 }
132 } 132 }
133 } 133 }
134 134
135 @include assert('in block, 1 element, 1 extending modifier') { /// 5 /// 135 @include assert('in block, 1 element, 1 extending modifier') { /// 5 ///
136 @include output { 136 @include output {
137 @include bem.block('something') { 137 @include bem.block('something') {
138 @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { 138 @include bem.multi('elem:' 'child', 'modifier:' 'mod1') {
139 font-size: 2em; 139 font-size: 2em;
140 140
141 @include bem.modifier('mod2' true) { 141 @include bem.modifier('mod2' true) {
142 font-size: 2.5em; 142 font-size: 2.5em;
143 } 143 }
144 } 144 }
145 } 145 }
146 } 146 }
147 147
148 @include expect { 148 @include expect {
149 .something__child { 149 .something__child {
150 font-size: 2em; 150 font-size: 2em;
151 } 151 }
152 152
153 .something__child--mod2 { 153 .something__child--mod2 {
154 font-size: 2.5em; 154 font-size: 2.5em;
155 } 155 }
156 156
157 .something--mod1 { 157 .something--mod1 {
158 font-size: 2em; 158 font-size: 2em;
159 } 159 }
160 160
161 .something--mod1--mod2 { 161 .something--mod1--mod2 {
162 font-size: 2.5em; 162 font-size: 2.5em;
163 } 163 }
164 } 164 }
165 } 165 }
166 166
167 @include assert('in block, 1 element, 1 & selector') { /// 6 /// 167 @include assert('in block, 1 element, 1 & selector') { /// 6 ///
168 @include output { 168 @include output {
169 @include bem.block('something') { 169 @include bem.block('something') {
170 @include bem.multi('&', 'elem:' 'child') { 170 @include bem.multi('&', 'elem:' 'child') {
171 font-size: 2em; 171 font-size: 2em;
172 172
173 @include bem.modifier('mod') { 173 @include bem.modifier('mod') {
174 font-size: 2.5em; 174 font-size: 2.5em;
175 } 175 }
176 } 176 }
177 } 177 }
178 } 178 }
179 179
180 @include expect { 180 @include expect {
181 .something { 181 .something {
182 font-size: 2em; 182 font-size: 2em;
183 } 183 }
184 184
185 .something--mod { 185 .something--mod {
186 font-size: 2.5em; 186 font-size: 2.5em;
187 } 187 }
188 188
189 .something__child { 189 .something__child {
190 font-size: 2em; 190 font-size: 2em;
191 } 191 }
192 192
193 .something__child--mod { 193 .something__child--mod {
194 font-size: 2.5em; 194 font-size: 2.5em;
195 } 195 }
196 } 196 }
197 } 197 }
198 198
199 @include assert('in block, 1 element, 1 manual selector') { /// 7 /// 199 @include assert('in block, 1 element, 1 manual selector') { /// 7 ///
200 @include output { 200 @include output {
201 @include bem.block('something') { 201 @include bem.block('something') {
202 @include bem.multi('> a:hover', 'elem:' 'child1') { 202 @include bem.multi('> a:hover', 'elem:' 'child1') {
203 font-size: 2em; 203 font-size: 2em;
204 204
205 @include bem.elem('child2') { 205 @include bem.elem('child2') {
206 font-size: 3em; 206 font-size: 3em;
207 } 207 }
208 } 208 }
209 } 209 }
210 } 210 }
211 211
212 @include expect { 212 @include expect {
213 .something > a:hover { 213 .something > a:hover {
214 font-size: 2em; 214 font-size: 2em;
215 } 215 }
216 216
217 .something > a:hover .something__child2 { 217 .something > a:hover .something__child2 {
218 font-size: 3em; 218 font-size: 3em;
219 } 219 }
220 220
221 .something__child1 { 221 .something__child1 {
222 font-size: 2em; 222 font-size: 2em;
223 } 223 }
224 224
225 .something__child1 .something__child2 { 225 .something__child1 .something__child2 {
226 font-size: 3em; 226 font-size: 3em;
227 } 227 }
228 } 228 }
229 } 229 }
230 230
231 @include assert('in element, 2 elements, 1 modifier') { /// 8 /// 231 @include assert('in element, 2 elements, 1 modifier') { /// 8 ///
232 @include output { 232 @include output {
233 @include bem.block('something') { 233 @include bem.block('something') {
234 @include bem.elem('child') { 234 @include bem.elem('child') {
235 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { 235 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod1') {
236 font-size: 3em; 236 font-size: 3em;
237 237
238 @include bem.modifier('mod2') { 238 @include bem.modifier('mod2') {
239 font-size: 3.5em; 239 font-size: 3.5em;
240 } 240 }
241 } 241 }
242 } 242 }
243 } 243 }
244 } 244 }
245 245
246 @include expect { 246 @include expect {
247 .something__child .something__subchild1, 247 .something__child .something__subchild1,
248 .something__child .something__subchild2 { 248 .something__child .something__subchild2 {
249 font-size: 3em; 249 font-size: 3em;
250 } 250 }
251 251
252 .something__child .something__subchild1--mod2, 252 .something__child .something__subchild1--mod2,
253 .something__child .something__subchild2--mod2 { 253 .something__child .something__subchild2--mod2 {
254 font-size: 3.5em; 254 font-size: 3.5em;
255 } 255 }
256 256
257 .something__child--mod1 { 257 .something__child--mod1 {
258 font-size: 3em; 258 font-size: 3em;
259 } 259 }
260 260
261 .something__child--mod1.something__child--mod2 { 261 .something__child--mod1.something__child--mod2 {
262 font-size: 3.5em; 262 font-size: 3.5em;
263 } 263 }
264 } 264 }
265 } 265 }
266 266
267 @include assert('in element, 1 element, 1 & selector') { /// 9 /// 267 @include assert('in element, 1 element, 1 & selector') { /// 9 ///
268 @include output { 268 @include output {
269 @include bem.block('something') { 269 @include bem.block('something') {
270 @include bem.elem('child') { 270 @include bem.elem('child') {
271 @include bem.multi('elem:' 'subchild', '&') { 271 @include bem.multi('elem:' 'subchild', '&') {
272 font-size: 3em; 272 font-size: 3em;
273 273
274 @include bem.modifier('mod') { 274 @include bem.modifier('mod') {
275 font-size: 3.5em; 275 font-size: 3.5em;
276 } 276 }
277 } 277 }
278 } 278 }
279 } 279 }
280 } 280 }
281 281
282 @include expect { 282 @include expect {
283 .something__child .something__subchild { 283 .something__child .something__subchild {
284 font-size: 3em; 284 font-size: 3em;
285 } 285 }
286 286
287 .something__child .something__subchild--mod { 287 .something__child .something__subchild--mod {
288 font-size: 3.5em; 288 font-size: 3.5em;
289 } 289 }
290 290
291 .something__child { 291 .something__child {
292 font-size: 3em; 292 font-size: 3em;
293 } 293 }
294 294
295 .something__child--mod { 295 .something__child--mod {
296 font-size: 3.5em; 296 font-size: 3.5em;
297 } 297 }
298 } 298 }
299 } 299 }
300 300
301 @include assert('in element in manual selector, 2 elements') { /// 10 /// 301 @include assert('in element in manual selector, 2 elements') { /// 10 ///
302 @include output { 302 @include output {
303 @include bem.block('something') { 303 @include bem.block('something') {
304 @include bem.elem('child') { 304 @include bem.elem('child') {
305 &:hover { 305 &:hover {
306 @include bem.multi('elem:' 'subchild1' 'subchild2') { 306 @include bem.multi('elem:' 'subchild1' 'subchild2') {
307 font-size: 3em; 307 font-size: 3em;
308 308
309 @include bem.modifier('mod2') { 309 @include bem.modifier('mod2') {
310 font-size: 3.5em; 310 font-size: 3.5em;
311 } 311 }
312 } 312 }
313 } 313 }
314 } 314 }
315 } 315 }
316 } 316 }
317 317
318 @include expect { 318 @include expect {
319 .something__child:hover .something__subchild1, 319 .something__child:hover .something__subchild1,
320 .something__child:hover .something__subchild2 { 320 .something__child:hover .something__subchild2 {
321 font-size: 3em; 321 font-size: 3em;
322 } 322 }
323 323
324 .something__child:hover .something__subchild1--mod2, 324 .something__child:hover .something__subchild1--mod2,
325 .something__child:hover .something__subchild2--mod2 { 325 .something__child:hover .something__subchild2--mod2 {
326 font-size: 3.5em; 326 font-size: 3.5em;
327 } 327 }
328 } 328 }
329 } 329 }
330 330
331 @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 /// 331 @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 ///
332 @include output { 332 @include output {
333 @include bem.block('something') { 333 @include bem.block('something') {
334 @include bem.elem('child') { 334 @include bem.elem('child') {
335 &:hover { 335 &:hover {
336 @include bem.multi('elem:' 'subchild', '&') { 336 @include bem.multi('elem:' 'subchild', '&') {
337 font-size: 3em; 337 font-size: 3em;
338 } 338 }
339 } 339 }
340 } 340 }
341 } 341 }
342 } 342 }
343 343
344 @include expect { 344 @include expect {
345 .something__child:hover .something__subchild { 345 .something__child:hover .something__subchild {
346 font-size: 3em; 346 font-size: 3em;
347 } 347 }
348 348
349 .something__child:hover { 349 .something__child:hover {
350 font-size: 3em; 350 font-size: 3em;
351 } 351 }
352 } 352 }
353 } 353 }
354 354
355 @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 /// 355 @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 ///
356 @include output { 356 @include output {
357 @include bem.block('something') { 357 @include bem.block('something') {
358 @include bem.elem('child1', 'child2') { 358 @include bem.elem('child1', 'child2') {
359 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { 359 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') {
360 font-size: 3em; 360 font-size: 3em;
361 } 361 }
362 } 362 }
363 } 363 }
364 } 364 }
365 365
366 @include expect { 366 @include expect {
367 .something__child1 .something__subchild1, 367 .something__child1 .something__subchild1,
368 .something__child2 .something__subchild1, 368 .something__child2 .something__subchild1,
369 .something__child1 .something__subchild2, 369 .something__child1 .something__subchild2,
370 .something__child2 .something__subchild2 { 370 .something__child2 .something__subchild2 {
371 font-size: 3em; 371 font-size: 3em;
372 } 372 }
373 373
374 .something__child1--mod, 374 .something__child1--mod,
375 .something__child2--mod { 375 .something__child2--mod {
376 font-size: 3em; 376 font-size: 3em;
377 } 377 }
378 } 378 }
379 } 379 }
380 380
381 @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 /// 381 @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 ///
382 @include output { 382 @include output {
383 @include bem.block('something') { 383 @include bem.block('something') {
384 @include bem.elem('child1', 'child2') { 384 @include bem.elem('child1', 'child2') {
385 @include bem.multi('elem:' 'subchild', '&') { 385 @include bem.multi('elem:' 'subchild', '&') {
386 font-size: 3em; 386 font-size: 3em;
387 387
388 @include bem.modifier('mod') { 388 @include bem.modifier('mod') {
389 font-size: 3.5em; 389 font-size: 3.5em;
390 } 390 }
391 } 391 }
392 } 392 }
393 } 393 }
394 } 394 }
395 395
396 @include expect { 396 @include expect {
397 .something__child1 .something__subchild, 397 .something__child1 .something__subchild,
398 .something__child2 .something__subchild { 398 .something__child2 .something__subchild {
399 font-size: 3em; 399 font-size: 3em;
400 } 400 }
401 401
402 .something__child1 .something__subchild--mod, 402 .something__child1 .something__subchild--mod,
403 .something__child2 .something__subchild--mod { 403 .something__child2 .something__subchild--mod {
404 font-size: 3.5em; 404 font-size: 3.5em;
405 } 405 }
406 406
407 .something__child1, 407 .something__child1,
408 .something__child2 { 408 .something__child2 {
409 font-size: 3em; 409 font-size: 3em;
410 } 410 }
411 411
412 .something__child1--mod, 412 .something__child1--mod,
413 .something__child2--mod { 413 .something__child2--mod {
414 font-size: 3.5em; 414 font-size: 3.5em;
415 } 415 }
416 } 416 }
417 } 417 }
418 418
419 @include assert('in related elements, 2 elements, 1 modifier') { /// 14 /// 419 @include assert('in related elements, 2 elements, 1 modifier') { /// 14 ///
420 @include output { 420 @include output {
421 @include bem.block('something') { 421 @include bem.block('something') {
422 @include bem.elem('child1') { 422 @include bem.elem('child1') {
423 @include bem.next-elem('child2', 'child3') { 423 @include bem.next-elem('child2', 'child3') {
424 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { 424 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') {
425 font-size: 3em; 425 font-size: 3em;
426 } 426 }
427 } 427 }
428 } 428 }
429 } 429 }
430 } 430 }
431 431
432 @include expect { 432 @include expect {
433 .something__child1 + .something__child2 .something__subchild1, 433 .something__child1 + .something__child2 .something__subchild1,
434 .something__child1 + .something__child3 .something__subchild1, 434 .something__child1 + .something__child3 .something__subchild1,
435 .something__child1 + .something__child2 .something__subchild2, 435 .something__child1 + .something__child2 .something__subchild2,
436 .something__child1 + .something__child3 .something__subchild2 { 436 .something__child1 + .something__child3 .something__subchild2 {
437 font-size: 3em; 437 font-size: 3em;
438 } 438 }
439 439
440 .something__child1 + .something__child2--mod, 440 .something__child1 + .something__child2--mod,
441 .something__child1 + .something__child3--mod { 441 .something__child1 + .something__child3--mod {
442 font-size: 3em; 442 font-size: 3em;
443 } 443 }
444 } 444 }
445 } 445 }
446 446
447 @include assert('in related elements, 1 element, 1 & selector') { /// 15 /// 447 @include assert('in related elements, 1 element, 1 & selector') { /// 15 ///
448 @include output { 448 @include output {
449 @include bem.block('something') { 449 @include bem.block('something') {
450 @include bem.elem('child1') { 450 @include bem.elem('child1') {
451 @include bem.next-elem('child2', 'child3') { 451 @include bem.next-elem('child2', 'child3') {
452 @include bem.multi('elem:' 'subchild', '&') { 452 @include bem.multi('elem:' 'subchild', '&') {
453 font-size: 4em; 453 font-size: 4em;
454 454
455 @include bem.modifier('mod') { 455 @include bem.modifier('mod') {
456 font-size: 4.5em; 456 font-size: 4.5em;
457 } 457 }
458 } 458 }
459 } 459 }
460 } 460 }
461 } 461 }
462 } 462 }
463 463
464 @include expect { 464 @include expect {
465 .something__child1 + .something__child2 .something__subchild, 465 .something__child1 + .something__child2 .something__subchild,
466 .something__child1 + .something__child3 .something__subchild { 466 .something__child1 + .something__child3 .something__subchild {
467 font-size: 4em; 467 font-size: 4em;
468 } 468 }
469 469
470 .something__child1 + .something__child2 .something__subchild--mod, 470 .something__child1 + .something__child2 .something__subchild--mod,
471 .something__child1 + .something__child3 .something__subchild--mod { 471 .something__child1 + .something__child3 .something__subchild--mod {
472 font-size: 4.5em; 472 font-size: 4.5em;
473 } 473 }
474 474
475 .something__child1 + .something__child2, 475 .something__child1 + .something__child2,
476 .something__child1 + .something__child3 { 476 .something__child1 + .something__child3 {
477 font-size: 4em; 477 font-size: 4em;
478 } 478 }
479 479
480 .something__child1 + .something__child2--mod, 480 .something__child1 + .something__child2--mod,
481 .something__child1 + .something__child3--mod { 481 .something__child1 + .something__child3--mod {
482 font-size: 4.5em; 482 font-size: 4.5em;
483 } 483 }
484 } 484 }
485 } 485 }
486 486
487 @include assert('in element, 2 related elements, 1 modifier') { /// 16 /// 487 @include assert('in element, 2 related elements, 1 modifier') { /// 16 ///
488 @include output { 488 @include output {
489 @include bem.block('something') { 489 @include bem.block('something') {
490 @include bem.elem('child1') { 490 @include bem.elem('child1') {
491 @include bem.multi('next-elem:' 'child2' 'child3', 'modifier:' 'mod1') { 491 @include bem.multi('next-elem:' 'child2' 'child3', 'modifier:' 'mod1') {
492 font-size: 3em; 492 font-size: 3em;
493 493
494 @include bem.modifier('mod2') { 494 @include bem.modifier('mod2') {
495 font-size: 3.5em; 495 font-size: 3.5em;
496 } 496 }
497 } 497 }
498 } 498 }
499 } 499 }
500 } 500 }
501 501
502 @include expect { 502 @include expect {
503 .something__child1 + .something__child2, 503 .something__child1 + .something__child2,
504 .something__child1 + .something__child3 { 504 .something__child1 + .something__child3 {
505 font-size: 3em; 505 font-size: 3em;
506 } 506 }
507 507
508 .something__child1 + .something__child2--mod2, 508 .something__child1 + .something__child2--mod2,
509 .something__child1 + .something__child3--mod2 { 509 .something__child1 + .something__child3--mod2 {
510 font-size: 3.5em; 510 font-size: 3.5em;
511 } 511 }
512 512
513 .something__child1--mod1 { 513 .something__child1--mod1 {
514 font-size: 3em; 514 font-size: 3em;
515 } 515 }
516 516
517 .something__child1--mod1.something__child1--mod2 { 517 .something__child1--mod1.something__child1--mod2 {
518 font-size: 3.5em; 518 font-size: 3.5em;
519 } 519 }
520 } 520 }
521 } 521 }
522 522
523 @include assert('in element, 1 twin element, 1 modifier') { /// 17 /// 523 @include assert('in element, 1 twin element, 1 modifier') { /// 17 ///
524 @include output { 524 @include output {
525 @include bem.block('something') { 525 @include bem.block('something') {
526 @include bem.elem('child') { 526 @include bem.elem('child') {
527 @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { 527 @include bem.multi('next-twin-elem', 'modifier:' 'mod1') {
528 font-size: 3em; 528 font-size: 3em;
529 529
530 @include bem.modifier('mod2') { 530 @include bem.modifier('mod2') {
531 font-size: 3.5em; 531 font-size: 3.5em;
532 } 532 }
533 } 533 }
534 } 534 }
535 } 535 }
536 } 536 }
537 537
538 @include expect { 538 @include expect {
539 .something__child + .something__child { 539 .something__child + .something__child {
540 font-size: 3em; 540 font-size: 3em;
541 } 541 }
542 542
543 .something__child + .something__child--mod2 { 543 .something__child + .something__child--mod2 {
544 font-size: 3.5em; 544 font-size: 3.5em;
545 } 545 }
546 546
547 .something__child--mod1 { 547 .something__child--mod1 {
548 font-size: 3em; 548 font-size: 3em;
549 } 549 }
550 550
551 .something__child--mod1.something__child--mod2 { 551 .something__child--mod1.something__child--mod2 {
552 font-size: 3.5em; 552 font-size: 3.5em;
553 } 553 }
554 } 554 }
555 } 555 }
556 556
557 @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 /// 557 @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 ///
558 @include output { 558 @include output {
559 @include bem.block('something') { 559 @include bem.block('something') {
560 @include bem.elem('child1', 'child2') { 560 @include bem.elem('child1', 'child2') {
561 @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { 561 @include bem.multi('next-twin-elem', 'modifier:' 'mod1') {
562 font-size: 3em; 562 font-size: 3em;
563 563
564 @include bem.modifier('mod2') { 564 @include bem.modifier('mod2') {
565 font-size: 3.5em; 565 font-size: 3.5em;
566 } 566 }
567 } 567 }
568 } 568 }
569 } 569 }
570 } 570 }
571 571
572 @include expect { 572 @include expect {
573 .something__child1 + .something__child1, 573 .something__child1 + .something__child1,
574 .something__child2 + .something__child2 { 574 .something__child2 + .something__child2 {
575 font-size: 3em; 575 font-size: 3em;
576 } 576 }
577 577
578 .something__child1 + .something__child1--mod2, 578 .something__child1 + .something__child1--mod2,
579 .something__child2 + .something__child2--mod2 { 579 .something__child2 + .something__child2--mod2 {
580 font-size: 3.5em; 580 font-size: 3.5em;
581 } 581 }
582 582
583 .something__child1--mod1, 583 .something__child1--mod1,
584 .something__child2--mod1 { 584 .something__child2--mod1 {
585 font-size: 3em; 585 font-size: 3em;
586 } 586 }
587 587
588 .something__child1--mod1.something__child1--mod2, 588 .something__child1--mod1.something__child1--mod2,
589 .something__child2--mod1.something__child2--mod2 { 589 .something__child2--mod1.something__child2--mod2 {
590 font-size: 3.5em; 590 font-size: 3.5em;
591 } 591 }
592 } 592 }
593 } 593 }
594} 594}
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 @@
14// 14//
15 15
16@include it('next-twin-elem') { 16@include it('next-twin-elem') {
17 @include assert('single element') { /// 1 /// 17 @include assert('single element') { /// 1 ///
18 @include output { 18 @include output {
19 @include bem.block('something') { 19 @include bem.block('something') {
20 @include bem.elem('child') { 20 @include bem.elem('child') {
21 @include bem.next-twin-elem { 21 @include bem.next-twin-elem {
22 font-size: 2em; 22 font-size: 2em;
23 } 23 }
24 } 24 }
25 } 25 }
26 } 26 }
27 27
28 @include expect { 28 @include expect {
29 .something__child + .something__child { 29 .something__child + .something__child {
30 font-size: 2em; 30 font-size: 2em;
31 } 31 }
32 } 32 }
33 } 33 }
34 34
35 @include assert('single element, manual selector in-between') { /// 2 /// 35 @include assert('single element, manual selector in-between') { /// 2 ///
36 @include output(false) { 36 @include output(false) {
37 @include bem.block('something') { 37 @include bem.block('something') {
38 @include bem.elem('child') { 38 @include bem.elem('child') {
39 &:hover { 39 &:hover {
40 @include bem.next-twin-elem { 40 @include bem.next-twin-elem {
41 font-size: 2em; 41 font-size: 2em;
42 } 42 }
43 } 43 }
44 44
45 .test & { 45 .test & {
46 @include bem.next-twin-elem { 46 @include bem.next-twin-elem {
47 font-size: 2em; 47 font-size: 2em;
48 } 48 }
49 } 49 }
50 } 50 }
51 } 51 }
52 } 52 }
53 53
54 @include expect(false) { 54 @include expect(false) {
55 .something__child:hover + .something__child { 55 .something__child:hover + .something__child {
56 font-size: 2em; 56 font-size: 2em;
57 } 57 }
58 58
59 .test .something__child + .something__child { 59 .test .something__child + .something__child {
60 font-size: 2em; 60 font-size: 2em;
61 } 61 }
62 } 62 }
63 } 63 }
64 64
65 @include assert('single element, modifier in-between') { /// 3 /// 65 @include assert('single element, modifier in-between') { /// 3 ///
66 @include output { 66 @include output {
67 @include bem.block('something') { 67 @include bem.block('something') {
68 @include bem.elem('child') { 68 @include bem.elem('child') {
69 @include bem.modifier('mod') { 69 @include bem.modifier('mod') {
70 @include bem.next-twin-elem { 70 @include bem.next-twin-elem {
71 font-size: 2.5em; 71 font-size: 2.5em;
72 } 72 }
73 } 73 }
74 } 74 }
75 } 75 }
76 } 76 }
77 77
78 @include expect { 78 @include expect {
79 .something__child--mod + .something__child { 79 .something__child--mod + .something__child {
80 font-size: 2.5em; 80 font-size: 2.5em;
81 } 81 }
82 } 82 }
83 } 83 }
84 84
85 @include assert('multiple elements') { /// 4 /// 85 @include assert('multiple elements') { /// 4 ///
86 @include output { 86 @include output {
87 @include bem.block('something') { 87 @include bem.block('something') {
88 @include bem.elem('child1', 'child2') { 88 @include bem.elem('child1', 'child2') {
89 @include bem.next-twin-elem { 89 @include bem.next-twin-elem {
90 font-size: 2em; 90 font-size: 2em;
91 } 91 }
92 } 92 }
93 } 93 }
94 } 94 }
95 95
96 @include expect { 96 @include expect {
97 .something__child1 + .something__child1, 97 .something__child1 + .something__child1,
98 .something__child2 + .something__child2 { 98 .something__child2 + .something__child2 {
99 font-size: 2em; 99 font-size: 2em;
100 } 100 }
101 } 101 }
102 } 102 }
103 103
104 @include assert('multiple elements, manual selector in-between') { /// 5 /// 104 @include assert('multiple elements, manual selector in-between') { /// 5 ///
105 @include output(false) { 105 @include output(false) {
106 @include bem.block('something') { 106 @include bem.block('something') {
107 @include bem.elem('child1', 'child2') { 107 @include bem.elem('child1', 'child2') {
108 &:hover { 108 &:hover {
109 @include bem.next-twin-elem { 109 @include bem.next-twin-elem {
110 font-size: 2em; 110 font-size: 2em;
111 } 111 }
112 } 112 }
113 113
114 .test & { 114 .test & {
115 @include bem.next-twin-elem { 115 @include bem.next-twin-elem {
116 font-size: 2em; 116 font-size: 2em;
117 } 117 }
118 } 118 }
119 } 119 }
120 } 120 }
121 } 121 }
122 122
123 @include expect(false) { 123 @include expect(false) {
124 .something__child1:hover + .something__child1, 124 .something__child1:hover + .something__child1,
125 .something__child2:hover + .something__child2 { 125 .something__child2:hover + .something__child2 {
126 font-size: 2em; 126 font-size: 2em;
127 } 127 }
128 128
129 .test .something__child1 + .something__child1, 129 .test .something__child1 + .something__child1,
130 .test .something__child2 + .something__child2 { 130 .test .something__child2 + .something__child2 {
131 font-size: 2em; 131 font-size: 2em;
132 } 132 }
133 } 133 }
134 } 134 }
135 135
136 @include assert('multiple elements, modifier in-between') { /// 6 /// 136 @include assert('multiple elements, modifier in-between') { /// 6 ///
137 @include output { 137 @include output {
138 @include bem.block('something') { 138 @include bem.block('something') {
139 @include bem.elem('child1', 'child2') { 139 @include bem.elem('child1', 'child2') {
140 @include bem.modifier('mod') { 140 @include bem.modifier('mod') {
141 @include bem.next-twin-elem { 141 @include bem.next-twin-elem {
142 font-size: 2.5em; 142 font-size: 2.5em;
143 } 143 }
144 } 144 }
145 } 145 }
146 } 146 }
147 } 147 }
148 148
149 @include expect { 149 @include expect {
150 .something__child1--mod + .something__child1, 150 .something__child1--mod + .something__child1,
151 .something__child2--mod + .something__child2 { 151 .something__child2--mod + .something__child2 {
152 font-size: 2.5em; 152 font-size: 2.5em;
153 } 153 }
154 } 154 }
155 } 155 }
156} 156}
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 @@
20// 20//
21 21
22@include it('related-element') { 22@include it('related-element') {
23 @include assert('single element, single related element') { /// 1 /// 23 @include assert('single element, single related element') { /// 1 ///
24 @include output { 24 @include output {
25 @include bem.block('something') { 25 @include bem.block('something') {
26 @include bem.elem('child') { 26 @include bem.elem('child') {
27 @include bem.related-elem('+', 'subchild1') { 27 @include bem.related-elem('+', 'subchild1') {
28 font-size: 2em; 28 font-size: 2em;
29 } 29 }
30 30
31 @include bem.related-elem('~', 'subchild2') { 31 @include bem.related-elem('~', 'subchild2') {
32 font-size: 2em; 32 font-size: 2em;
33 } 33 }
34 } 34 }
35 } 35 }
36 } 36 }
37 37
38 @include expect { 38 @include expect {
39 .something__child + .something__subchild1 { 39 .something__child + .something__subchild1 {
40 font-size: 2em; 40 font-size: 2em;
41 } 41 }
42 42
43 .something__child ~ .something__subchild2 { 43 .something__child ~ .something__subchild2 {
44 font-size: 2em; 44 font-size: 2em;
45 } 45 }
46 } 46 }
47 } 47 }
48 48
49 @include assert('single element, single related element, manual selector in-between') { /// 2 /// 49 @include assert('single element, single related element, manual selector in-between') { /// 2 ///
50 @include output(false) { 50 @include output(false) {
51 @include bem.block('something') { 51 @include bem.block('something') {
52 @include bem.elem('child') { 52 @include bem.elem('child') {
53 &:hover { 53 &:hover {
54 @include bem.related-elem('+', 'subchild1') { 54 @include bem.related-elem('+', 'subchild1') {
55 font-size: 2em; 55 font-size: 2em;
56 } 56 }
57 57
58 @include bem.related-elem('~', 'subchild2') { 58 @include bem.related-elem('~', 'subchild2') {
59 font-size: 2em; 59 font-size: 2em;
60 } 60 }
61 } 61 }
62 62
63 .test & { 63 .test & {
64 @include bem.related-elem('+', 'subchild3') { 64 @include bem.related-elem('+', 'subchild3') {
65 font-size: 2em; 65 font-size: 2em;
66 } 66 }
67 67
68 @include bem.related-elem('~', 'subchild4') { 68 @include bem.related-elem('~', 'subchild4') {
69 font-size: 2em; 69 font-size: 2em;
70 } 70 }
71 } 71 }
72 } 72 }
73 } 73 }
74 } 74 }
75 75
76 @include expect(false) { 76 @include expect(false) {
77 .something__child:hover + .something__subchild1 { 77 .something__child:hover + .something__subchild1 {
78 font-size: 2em; 78 font-size: 2em;
79 } 79 }
80 80
81 .something__child:hover ~ .something__subchild2 { 81 .something__child:hover ~ .something__subchild2 {
82 font-size: 2em; 82 font-size: 2em;
83 } 83 }
84 84
85 .test .something__child + .something__subchild3 { 85 .test .something__child + .something__subchild3 {
86 font-size: 2em; 86 font-size: 2em;
87 } 87 }
88 88
89 .test .something__child ~ .something__subchild4 { 89 .test .something__child ~ .something__subchild4 {
90 font-size: 2em; 90 font-size: 2em;
91 } 91 }
92 } 92 }
93 } 93 }
94 94
95 @include assert('single element, single related element, modifier in-between') { /// 3 /// 95 @include assert('single element, single related element, modifier in-between') { /// 3 ///
96 @include output { 96 @include output {
97 @include bem.block('something') { 97 @include bem.block('something') {
98 @include bem.elem('child') { 98 @include bem.elem('child') {
99 @include bem.modifier('mod') { 99 @include bem.modifier('mod') {
100 @include bem.related-elem('+', 'subchild1') { 100 @include bem.related-elem('+', 'subchild1') {
101 font-size: 2.5em; 101 font-size: 2.5em;
102 } 102 }
103 103
104 @include bem.related-elem('~', 'subchild2') { 104 @include bem.related-elem('~', 'subchild2') {
105 font-size: 2.5em; 105 font-size: 2.5em;
106 } 106 }
107 } 107 }
108 } 108 }
109 } 109 }
110 } 110 }
111 111
112 @include expect { 112 @include expect {
113 .something__child--mod + .something__subchild1 { 113 .something__child--mod + .something__subchild1 {
114 font-size: 2.5em; 114 font-size: 2.5em;
115 } 115 }
116 116
117 .something__child--mod ~ .something__subchild2 { 117 .something__child--mod ~ .something__subchild2 {
118 font-size: 2.5em; 118 font-size: 2.5em;
119 } 119 }
120 } 120 }
121 } 121 }
122 122
123 @include assert('single element, multiple related elements') { /// 4 /// 123 @include assert('single element, multiple related elements') { /// 4 ///
124 @include output { 124 @include output {
125 @include bem.block('something') { 125 @include bem.block('something') {
126 @include bem.elem('child') { 126 @include bem.elem('child') {
127 @include bem.related-elem('+', 'subchild1', 'subchild2') { 127 @include bem.related-elem('+', 'subchild1', 'subchild2') {
128 font-size: 2.5em; 128 font-size: 2.5em;
129 } 129 }
130 130
131 @include bem.related-elem('~', 'subchild3', 'subchild4') { 131 @include bem.related-elem('~', 'subchild3', 'subchild4') {
132 font-size: 2.5em; 132 font-size: 2.5em;
133 } 133 }
134 } 134 }
135 } 135 }
136 } 136 }
137 137
138 @include expect { 138 @include expect {
139 .something__child + .something__subchild1, 139 .something__child + .something__subchild1,
140 .something__child + .something__subchild2 { 140 .something__child + .something__subchild2 {
141 font-size: 2.5em; 141 font-size: 2.5em;
142 } 142 }
143 143
144 .something__child ~ .something__subchild3, 144 .something__child ~ .something__subchild3,
145 .something__child ~ .something__subchild4 { 145 .something__child ~ .something__subchild4 {
146 font-size: 2.5em; 146 font-size: 2.5em;
147 } 147 }
148 } 148 }
149 } 149 }
150 150
151 @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// 151 @include assert('single element, multiple related elements, manual selector in-between') { /// 5 ///
152 @include output(false) { 152 @include output(false) {
153 @include bem.block('something') { 153 @include bem.block('something') {
154 @include bem.elem('child') { 154 @include bem.elem('child') {
155 &:hover { 155 &:hover {
156 @include bem.related-elem('+', 'subchild1', 'subchild2') { 156 @include bem.related-elem('+', 'subchild1', 'subchild2') {
157 font-size: 2.5em; 157 font-size: 2.5em;
158 } 158 }
159 159
160 @include bem.related-elem('~', 'subchild3', 'subchild4') { 160 @include bem.related-elem('~', 'subchild3', 'subchild4') {
161 font-size: 2.5em; 161 font-size: 2.5em;
162 } 162 }
163 } 163 }
164 164
165 .test & { 165 .test & {
166 @include bem.related-elem('+', 'subchild5', 'subchild6') { 166 @include bem.related-elem('+', 'subchild5', 'subchild6') {
167 font-size: 2.5em; 167 font-size: 2.5em;
168 } 168 }
169 169
170 @include bem.related-elem('~', 'subchild7', 'subchild8') { 170 @include bem.related-elem('~', 'subchild7', 'subchild8') {
171 font-size: 2.5em; 171 font-size: 2.5em;
172 } 172 }
173 } 173 }
174 } 174 }
175 } 175 }
176 } 176 }
177 177
178 @include expect(false) { 178 @include expect(false) {
179 .something__child:hover + .something__subchild1, 179 .something__child:hover + .something__subchild1,
180 .something__child:hover + .something__subchild2 { 180 .something__child:hover + .something__subchild2 {
181 font-size: 2.5em; 181 font-size: 2.5em;
182 } 182 }
183 183
184 .something__child:hover ~ .something__subchild3, 184 .something__child:hover ~ .something__subchild3,
185 .something__child:hover ~ .something__subchild4 { 185 .something__child:hover ~ .something__subchild4 {
186 font-size: 2.5em; 186 font-size: 2.5em;
187 } 187 }
188 188
189 .test .something__child + .something__subchild5, 189 .test .something__child + .something__subchild5,
190 .test .something__child + .something__subchild6 { 190 .test .something__child + .something__subchild6 {
191 font-size: 2.5em; 191 font-size: 2.5em;
192 } 192 }
193 193
194 .test .something__child ~ .something__subchild7, 194 .test .something__child ~ .something__subchild7,
195 .test .something__child ~ .something__subchild8 { 195 .test .something__child ~ .something__subchild8 {
196 font-size: 2.5em; 196 font-size: 2.5em;
197 } 197 }
198 } 198 }
199 } 199 }
200 200
201 @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// 201 @include assert('single element, multiple related elements, modifier in-between') { /// 6 ///
202 @include output { 202 @include output {
203 @include bem.block('something') { 203 @include bem.block('something') {
204 @include bem.elem('child') { 204 @include bem.elem('child') {
205 @include bem.modifier('mod') { 205 @include bem.modifier('mod') {
206 @include bem.related-elem('+', 'subchild1', 'subchild2') { 206 @include bem.related-elem('+', 'subchild1', 'subchild2') {
207 font-size: 2.5em; 207 font-size: 2.5em;
208 } 208 }
209 209
210 @include bem.related-elem('~', 'subchild3', 'subchild4') { 210 @include bem.related-elem('~', 'subchild3', 'subchild4') {
211 font-size: 2.5em; 211 font-size: 2.5em;
212 } 212 }
213 } 213 }
214 } 214 }
215 } 215 }
216 } 216 }
217 217
218 @include expect { 218 @include expect {
219 .something__child--mod + .something__subchild1, 219 .something__child--mod + .something__subchild1,
220 .something__child--mod + .something__subchild2 { 220 .something__child--mod + .something__subchild2 {
221 font-size: 2.5em; 221 font-size: 2.5em;
222 } 222 }
223 223
224 .something__child--mod ~ .something__subchild3, 224 .something__child--mod ~ .something__subchild3,
225 .something__child--mod ~ .something__subchild4 { 225 .something__child--mod ~ .something__subchild4 {
226 font-size: 2.5em; 226 font-size: 2.5em;
227 } 227 }
228 } 228 }
229 } 229 }
230 230
231 @include assert('multiple elements, single related element') { /// 7 /// 231 @include assert('multiple elements, single related element') { /// 7 ///
232 @include output { 232 @include output {
233 @include bem.block('something') { 233 @include bem.block('something') {
234 @include bem.elem('child1', 'child2') { 234 @include bem.elem('child1', 'child2') {
235 @include bem.related-elem('+', 'subchild1') { 235 @include bem.related-elem('+', 'subchild1') {
236 font-size: 2em; 236 font-size: 2em;
237 } 237 }
238 238
239 @include bem.related-elem('~', 'subchild2') { 239 @include bem.related-elem('~', 'subchild2') {
240 font-size: 2em; 240 font-size: 2em;
241 } 241 }
242 } 242 }
243 } 243 }
244 } 244 }
245 245
246 @include expect { 246 @include expect {
247 .something__child1 + .something__subchild1, 247 .something__child1 + .something__subchild1,
248 .something__child2 + .something__subchild1 { 248 .something__child2 + .something__subchild1 {
249 font-size: 2em; 249 font-size: 2em;
250 } 250 }
251 251
252 .something__child1 ~ .something__subchild2, 252 .something__child1 ~ .something__subchild2,
253 .something__child2 ~ .something__subchild2 { 253 .something__child2 ~ .something__subchild2 {
254 font-size: 2em; 254 font-size: 2em;
255 } 255 }
256 } 256 }
257 } 257 }
258 258
259 @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// 259 @include assert('multiple elements, single related element, manual selector in-between') { /// 8 ///
260 @include output(false) { 260 @include output(false) {
261 @include bem.block('something') { 261 @include bem.block('something') {
262 @include bem.elem('child1', 'child2') { 262 @include bem.elem('child1', 'child2') {
263 &:hover { 263 &:hover {
264 @include bem.related-elem('+', 'subchild1') { 264 @include bem.related-elem('+', 'subchild1') {
265 font-size: 2em; 265 font-size: 2em;
266 } 266 }
267 267
268 @include bem.related-elem('~', 'subchild2') { 268 @include bem.related-elem('~', 'subchild2') {
269 font-size: 2em; 269 font-size: 2em;
270 } 270 }
271 } 271 }
272 272
273 .test & { 273 .test & {
274 @include bem.related-elem('+', 'subchild3') { 274 @include bem.related-elem('+', 'subchild3') {
275 font-size: 2em; 275 font-size: 2em;
276 } 276 }
277 277
278 @include bem.related-elem('~', 'subchild4') { 278 @include bem.related-elem('~', 'subchild4') {
279 font-size: 2em; 279 font-size: 2em;
280 } 280 }
281 } 281 }
282 } 282 }
283 } 283 }
284 } 284 }
285 285
286 @include expect(false) { 286 @include expect(false) {
287 .something__child1:hover + .something__subchild1, 287 .something__child1:hover + .something__subchild1,
288 .something__child2:hover + .something__subchild1 { 288 .something__child2:hover + .something__subchild1 {
289 font-size: 2em; 289 font-size: 2em;
290 } 290 }
291 291
292 .something__child1:hover ~ .something__subchild2, 292 .something__child1:hover ~ .something__subchild2,
293 .something__child2:hover ~ .something__subchild2 { 293 .something__child2:hover ~ .something__subchild2 {
294 font-size: 2em; 294 font-size: 2em;
295 } 295 }
296 296
297 .test .something__child1 + .something__subchild3, 297 .test .something__child1 + .something__subchild3,
298 .test .something__child2 + .something__subchild3 { 298 .test .something__child2 + .something__subchild3 {
299 font-size: 2em; 299 font-size: 2em;
300 } 300 }
301 301
302 .test .something__child1 ~ .something__subchild4, 302 .test .something__child1 ~ .something__subchild4,
303 .test .something__child2 ~ .something__subchild4 { 303 .test .something__child2 ~ .something__subchild4 {
304 font-size: 2em; 304 font-size: 2em;
305 } 305 }
306 } 306 }
307 } 307 }
308 308
309 @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// 309 @include assert('multiple elements, single related element, modifier in-between') { /// 9 ///
310 @include output { 310 @include output {
311 @include bem.block('something') { 311 @include bem.block('something') {
312 @include bem.elem('child1', 'child2') { 312 @include bem.elem('child1', 'child2') {
313 @include bem.modifier('mod') { 313 @include bem.modifier('mod') {
314 @include bem.related-elem('+', 'subchild1') { 314 @include bem.related-elem('+', 'subchild1') {
315 font-size: 2.5em; 315 font-size: 2.5em;
316 } 316 }
317 317
318 @include bem.related-elem('~', 'subchild2') { 318 @include bem.related-elem('~', 'subchild2') {
319 font-size: 2.5em; 319 font-size: 2.5em;
320 } 320 }
321 } 321 }
322 } 322 }
323 } 323 }
324 } 324 }
325 325
326 @include expect { 326 @include expect {
327 .something__child1--mod + .something__subchild1, 327 .something__child1--mod + .something__subchild1,
328 .something__child2--mod + .something__subchild1 { 328 .something__child2--mod + .something__subchild1 {
329 font-size: 2.5em; 329 font-size: 2.5em;
330 } 330 }
331 331
332 .something__child1--mod ~ .something__subchild2, 332 .something__child1--mod ~ .something__subchild2,
333 .something__child2--mod ~ .something__subchild2 { 333 .something__child2--mod ~ .something__subchild2 {
334 font-size: 2.5em; 334 font-size: 2.5em;
335 } 335 }
336 } 336 }
337 } 337 }
338 338
339 @include assert('multiple elements, multiple related elements') { /// 10 /// 339 @include assert('multiple elements, multiple related elements') { /// 10 ///
340 @include output { 340 @include output {
341 @include bem.block('something') { 341 @include bem.block('something') {
342 @include bem.elem('child1', 'child2') { 342 @include bem.elem('child1', 'child2') {
343 @include bem.related-elem('+', 'subchild1', 'subchild2') { 343 @include bem.related-elem('+', 'subchild1', 'subchild2') {
344 font-size: 2em; 344 font-size: 2em;
345 } 345 }
346 346
347 @include bem.related-elem('~', 'subchild3', 'subchild4') { 347 @include bem.related-elem('~', 'subchild3', 'subchild4') {
348 font-size: 2em; 348 font-size: 2em;
349 } 349 }
350 } 350 }
351 } 351 }
352 } 352 }
353 353
354 @include expect { 354 @include expect {
355 .something__child1 + .something__subchild1, 355 .something__child1 + .something__subchild1,
356 .something__child2 + .something__subchild1, 356 .something__child2 + .something__subchild1,
357 .something__child1 + .something__subchild2, 357 .something__child1 + .something__subchild2,
358 .something__child2 + .something__subchild2 { 358 .something__child2 + .something__subchild2 {
359 font-size: 2em; 359 font-size: 2em;
360 } 360 }
361 361
362 .something__child1 ~ .something__subchild3, 362 .something__child1 ~ .something__subchild3,
363 .something__child2 ~ .something__subchild3, 363 .something__child2 ~ .something__subchild3,
364 .something__child1 ~ .something__subchild4, 364 .something__child1 ~ .something__subchild4,
365 .something__child2 ~ .something__subchild4 { 365 .something__child2 ~ .something__subchild4 {
366 font-size: 2em; 366 font-size: 2em;
367 } 367 }
368 } 368 }
369 } 369 }
370 370
371 @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// 371 @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 ///
372 @include output(false) { 372 @include output(false) {
373 @include bem.block('something') { 373 @include bem.block('something') {
374 @include bem.elem('child1', 'child2') { 374 @include bem.elem('child1', 'child2') {
375 &:hover { 375 &:hover {
376 @include bem.related-elem('+', 'subchild1', 'subchild2') { 376 @include bem.related-elem('+', 'subchild1', 'subchild2') {
377 font-size: 2em; 377 font-size: 2em;
378 } 378 }
379 379
380 @include bem.related-elem('~', 'subchild3', 'subchild4') { 380 @include bem.related-elem('~', 'subchild3', 'subchild4') {
381 font-size: 2em; 381 font-size: 2em;
382 } 382 }
383 } 383 }
384 384
385 .test & { 385 .test & {
386 @include bem.related-elem('+', 'subchild5', 'subchild6') { 386 @include bem.related-elem('+', 'subchild5', 'subchild6') {
387 font-size: 2em; 387 font-size: 2em;
388 } 388 }
389 389
390 @include bem.related-elem('~', 'subchild7', 'subchild8') { 390 @include bem.related-elem('~', 'subchild7', 'subchild8') {
391 font-size: 2em; 391 font-size: 2em;
392 } 392 }
393 } 393 }
394 } 394 }
395 } 395 }
396 } 396 }
397 397
398 @include expect(false) { 398 @include expect(false) {
399 .something__child1:hover + .something__subchild1, 399 .something__child1:hover + .something__subchild1,
400 .something__child2:hover + .something__subchild1, 400 .something__child2:hover + .something__subchild1,
401 .something__child1:hover + .something__subchild2, 401 .something__child1:hover + .something__subchild2,
402 .something__child2:hover + .something__subchild2 { 402 .something__child2:hover + .something__subchild2 {
403 font-size: 2em; 403 font-size: 2em;
404 } 404 }
405 405
406 .something__child1:hover ~ .something__subchild3, 406 .something__child1:hover ~ .something__subchild3,
407 .something__child2:hover ~ .something__subchild3, 407 .something__child2:hover ~ .something__subchild3,
408 .something__child1:hover ~ .something__subchild4, 408 .something__child1:hover ~ .something__subchild4,
409 .something__child2:hover ~ .something__subchild4 { 409 .something__child2:hover ~ .something__subchild4 {
410 font-size: 2em; 410 font-size: 2em;
411 } 411 }
412 412
413 .test .something__child1 + .something__subchild5, 413 .test .something__child1 + .something__subchild5,
414 .test .something__child2 + .something__subchild5, 414 .test .something__child2 + .something__subchild5,
415 .test .something__child1 + .something__subchild6, 415 .test .something__child1 + .something__subchild6,
416 .test .something__child2 + .something__subchild6 { 416 .test .something__child2 + .something__subchild6 {
417 font-size: 2em; 417 font-size: 2em;
418 } 418 }
419 419
420 .test .something__child1 ~ .something__subchild7, 420 .test .something__child1 ~ .something__subchild7,
421 .test .something__child2 ~ .something__subchild7, 421 .test .something__child2 ~ .something__subchild7,
422 .test .something__child1 ~ .something__subchild8, 422 .test .something__child1 ~ .something__subchild8,
423 .test .something__child2 ~ .something__subchild8 { 423 .test .something__child2 ~ .something__subchild8 {
424 font-size: 2em; 424 font-size: 2em;
425 } 425 }
426 } 426 }
427 } 427 }
428 428
429 @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// 429 @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 ///
430 @include output { 430 @include output {
431 @include bem.block('something') { 431 @include bem.block('something') {
432 @include bem.elem('child1', 'child2') { 432 @include bem.elem('child1', 'child2') {
433 @include bem.modifier('mod') { 433 @include bem.modifier('mod') {
434 @include bem.related-elem('+', 'subchild1', 'subchild2') { 434 @include bem.related-elem('+', 'subchild1', 'subchild2') {
435 font-size: 2em; 435 font-size: 2em;
436 } 436 }
437 437
438 @include bem.related-elem('~', 'subchild3', 'subchild4') { 438 @include bem.related-elem('~', 'subchild3', 'subchild4') {
439 font-size: 2em; 439 font-size: 2em;
440 } 440 }
441 } 441 }
442 } 442 }
443 } 443 }
444 } 444 }
445 445
446 @include expect { 446 @include expect {
447 .something__child1--mod + .something__subchild1, 447 .something__child1--mod + .something__subchild1,
448 .something__child2--mod + .something__subchild1, 448 .something__child2--mod + .something__subchild1,
449 .something__child1--mod + .something__subchild2, 449 .something__child1--mod + .something__subchild2,
450 .something__child2--mod + .something__subchild2 { 450 .something__child2--mod + .something__subchild2 {
451 font-size: 2em; 451 font-size: 2em;
452 } 452 }
453 453
454 .something__child1--mod ~ .something__subchild3, 454 .something__child1--mod ~ .something__subchild3,
455 .something__child2--mod ~ .something__subchild3, 455 .something__child2--mod ~ .something__subchild3,
456 .something__child1--mod ~ .something__subchild4, 456 .something__child1--mod ~ .something__subchild4,
457 .something__child2--mod ~ .something__subchild4 { 457 .something__child2--mod ~ .something__subchild4 {
458 font-size: 2em; 458 font-size: 2em;
459 } 459 }
460 } 460 }
461 } 461 }
462} 462}
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 @@
14// 14//
15 15
16@include it('state') { 16@include it('state') {
17 @include assert('single block, single state') { /// 1 /// 17 @include assert('single block, single state') { /// 1 ///
18 @include output { 18 @include output {
19 @include bem.block('something') { 19 @include bem.block('something') {
20 @include bem.is('active') { 20 @include bem.is('active') {
21 font-size: 1.25em; 21 font-size: 1.25em;
22 } 22 }
23 23
24 @include bem.has('state') { 24 @include bem.has('state') {
25 font-size: 1.75em; 25 font-size: 1.75em;
26 } 26 }
27 } 27 }
28 } 28 }
29 29
30 @include expect { 30 @include expect {
31 .something.is-active { 31 .something.is-active {
32 font-size: 1.25em; 32 font-size: 1.25em;
33 } 33 }
34 34
35 .something.has-state { 35 .something.has-state {
36 font-size: 1.75em; 36 font-size: 1.75em;
37 } 37 }
38 } 38 }
39 } 39 }
40 40
41 @include assert('single element, single state') { /// 2 /// 41 @include assert('single element, single state') { /// 2 ///
42 @include output { 42 @include output {
43 @include bem.block('something') { 43 @include bem.block('something') {
44 @include bem.elem('child') { 44 @include bem.elem('child') {
45 @include bem.is('active') { 45 @include bem.is('active') {
46 font-size: 2.25em; 46 font-size: 2.25em;
47 } 47 }
48 48
49 @include bem.has('state') { 49 @include bem.has('state') {
50 font-size: 2.75em; 50 font-size: 2.75em;
51 } 51 }
52 } 52 }
53 } 53 }
54 } 54 }
55 55
56 @include expect { 56 @include expect {
57 .something__child.is-active { 57 .something__child.is-active {
58 font-size: 2.25em; 58 font-size: 2.25em;
59 } 59 }
60 60
61 .something__child.has-state { 61 .something__child.has-state {
62 font-size: 2.75em; 62 font-size: 2.75em;
63 } 63 }
64 } 64 }
65 } 65 }
66 66
67 @include assert('single block, multiple states') { /// 3 /// 67 @include assert('single block, multiple states') { /// 3 ///
68 @include output { 68 @include output {
69 @include bem.block('something') { 69 @include bem.block('something') {
70 @include bem.is('active', 'primary') { 70 @include bem.is('active', 'primary') {
71 font-size: 1.25em; 71 font-size: 1.25em;
72 } 72 }
73 73
74 @include bem.has('state', 'indicator') { 74 @include bem.has('state', 'indicator') {
75 font-size: 1.75em; 75 font-size: 1.75em;
76 } 76 }
77 } 77 }
78 } 78 }
79 79
80 @include expect { 80 @include expect {
81 .something.is-active, 81 .something.is-active,
82 .something.is-primary { 82 .something.is-primary {
83 font-size: 1.25em; 83 font-size: 1.25em;
84 } 84 }
85 85
86 .something.has-state, 86 .something.has-state,
87 .something.has-indicator { 87 .something.has-indicator {
88 font-size: 1.75em; 88 font-size: 1.75em;
89 } 89 }
90 } 90 }
91 } 91 }
92 92
93 @include assert('single element, multiple states') { /// 4 /// 93 @include assert('single element, multiple states') { /// 4 ///
94 @include output { 94 @include output {
95 @include bem.block('something') { 95 @include bem.block('something') {
96 @include bem.elem('child') { 96 @include bem.elem('child') {
97 @include bem.is('active', 'primary') { 97 @include bem.is('active', 'primary') {
98 font-size: 2.25em; 98 font-size: 2.25em;
99 } 99 }
100 100
101 @include bem.has('state', 'indicator') { 101 @include bem.has('state', 'indicator') {
102 font-size: 2.75em; 102 font-size: 2.75em;
103 } 103 }
104 } 104 }
105 } 105 }
106 } 106 }
107 107
108 @include expect { 108 @include expect {
109 .something__child.is-active, 109 .something__child.is-active,
110 .something__child.is-primary { 110 .something__child.is-primary {
111 font-size: 2.25em; 111 font-size: 2.25em;
112 } 112 }
113 113
114 .something__child.has-state, 114 .something__child.has-state,
115 .something__child.has-indicator { 115 .something__child.has-indicator {
116 font-size: 2.75em; 116 font-size: 2.75em;
117 } 117 }
118 } 118 }
119 } 119 }
120 120
121 @include assert('multiple elements, single state') { /// 5 /// 121 @include assert('multiple elements, single state') { /// 5 ///
122 @include output { 122 @include output {
123 @include bem.block('something') { 123 @include bem.block('something') {
124 @include bem.elem('child1', 'child2') { 124 @include bem.elem('child1', 'child2') {
125 @include bem.is('active') { 125 @include bem.is('active') {
126 font-size: 2.25em; 126 font-size: 2.25em;
127 } 127 }
128 128
129 @include bem.has('state') { 129 @include bem.has('state') {
130 font-size: 2.75em; 130 font-size: 2.75em;
131 } 131 }
132 } 132 }
133 } 133 }
134 } 134 }
135 135
136 @include expect { 136 @include expect {
137 .something__child1.is-active, 137 .something__child1.is-active,
138 .something__child2.is-active { 138 .something__child2.is-active {
139 font-size: 2.25em; 139 font-size: 2.25em;
140 } 140 }
141 141
142 .something__child1.has-state, 142 .something__child1.has-state,
143 .something__child2.has-state { 143 .something__child2.has-state {
144 font-size: 2.75em; 144 font-size: 2.75em;
145 } 145 }
146 } 146 }
147 } 147 }
148 148
149 @include assert('multiple elements, multiple states') { /// 6 /// 149 @include assert('multiple elements, multiple states') { /// 6 ///
150 @include output { 150 @include output {
151 @include bem.block('something') { 151 @include bem.block('something') {
152 @include bem.elem('child1', 'child2') { 152 @include bem.elem('child1', 'child2') {
153 @include bem.is('active', 'primary') { 153 @include bem.is('active', 'primary') {
154 font-size: 2.25em; 154 font-size: 2.25em;
155 } 155 }
156 156
157 @include bem.has('state', 'indicator') { 157 @include bem.has('state', 'indicator') {
158 font-size: 2.75em; 158 font-size: 2.75em;
159 } 159 }
160 } 160 }
161 } 161 }
162 } 162 }
163 163
164 @include expect { 164 @include expect {
165 .something__child1.is-active, 165 .something__child1.is-active,
166 .something__child2.is-active, 166 .something__child2.is-active,
167 .something__child1.is-primary, 167 .something__child1.is-primary,
168 .something__child2.is-primary { 168 .something__child2.is-primary {
169 font-size: 2.25em; 169 font-size: 2.25em;
170 } 170 }
171 171
172 .something__child1.has-state, 172 .something__child1.has-state,
173 .something__child2.has-state, 173 .something__child2.has-state,
174 .something__child1.has-indicator, 174 .something__child1.has-indicator,
175 .something__child2.has-indicator { 175 .something__child2.has-indicator {
176 font-size: 2.75em; 176 font-size: 2.75em;
177 } 177 }
178 } 178 }
179 } 179 }
180} 180}
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 @@
12// 12//
13 13
14@include it('suffix') { 14@include it('suffix') {
15 @include assert('block suffix') { /// 1 /// 15 @include assert('block suffix') { /// 1 ///
16 @include output { 16 @include output {
17 @include bem.block('something') { 17 @include bem.block('something') {
18 @include bem.suffix('sm') { 18 @include bem.suffix('sm') {
19 font-size: 1.5em; 19 font-size: 1.5em;
20 } 20 }
21 } 21 }
22 } 22 }
23 23
24 @include expect { 24 @include expect {
25 .something\@sm { 25 .something\@sm {
26 font-size: 1.5em; 26 font-size: 1.5em;
27 } 27 }
28 } 28 }
29 } 29 }
30 30
31 @include assert('element suffix') { /// 2 /// 31 @include assert('element suffix') { /// 2 ///
32 @include output { 32 @include output {
33 @include bem.block('something') { 33 @include bem.block('something') {
34 @include bem.elem('child') { 34 @include bem.elem('child') {
35 @include bem.suffix('sm') { 35 @include bem.suffix('sm') {
36 font-size: 2.5em; 36 font-size: 2.5em;
37 } 37 }
38 } 38 }
39 } 39 }
40 } 40 }
41 41
42 @include expect { 42 @include expect {
43 .something__child\@sm { 43 .something__child\@sm {
44 font-size: 2.5em; 44 font-size: 2.5em;
45 } 45 }
46 } 46 }
47 } 47 }
48 48
49 @include assert('modifier suffix') { /// 3 /// 49 @include assert('modifier suffix') { /// 3 ///
50 @include output { 50 @include output {
51 @include bem.block('something') { 51 @include bem.block('something') {
52 @include bem.modifier('mod1') { 52 @include bem.modifier('mod1') {
53 @include bem.suffix('sm') { 53 @include bem.suffix('sm') {
54 font-size: 1.75em; 54 font-size: 1.75em;
55 } 55 }
56 } 56 }
57 57
58 @include bem.elem('child') { 58 @include bem.elem('child') {
59 @include bem.modifier('mod2') { 59 @include bem.modifier('mod2') {
60 @include bem.suffix('sm') { 60 @include bem.suffix('sm') {
61 font-size: 2.75em; 61 font-size: 2.75em;
62 } 62 }
63 } 63 }
64 } 64 }
65 } 65 }
66 } 66 }
67 67
68 @include expect { 68 @include expect {
69 .something--mod1\@sm { 69 .something--mod1\@sm {
70 font-size: 1.75em; 70 font-size: 1.75em;
71 } 71 }
72 72
73 .something__child--mod2\@sm { 73 .something__child--mod2\@sm {
74 font-size: 2.75em; 74 font-size: 2.75em;
75 } 75 }
76 } 76 }
77 } 77 }
78 78
79 @include assert('multiple element suffix') { /// 4 /// 79 @include assert('multiple element suffix') { /// 4 ///
80 @include output { 80 @include output {
81 @include bem.block('something') { 81 @include bem.block('something') {
82 @include bem.elem('child1', 'child2') { 82 @include bem.elem('child1', 'child2') {
83 @include bem.suffix('sm') { 83 @include bem.suffix('sm') {
84 font-size: 2.5em; 84 font-size: 2.5em;
85 } 85 }
86 } 86 }
87 } 87 }
88 } 88 }
89 89
90 @include expect { 90 @include expect {
91 .something__child1\@sm, 91 .something__child1\@sm,
92 .something__child2\@sm { 92 .something__child2\@sm {
93 font-size: 2.5em; 93 font-size: 2.5em;
94 } 94 }
95 } 95 }
96 } 96 }
97} 97}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-01 11:22:07 +0000