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