aboutsummaryrefslogtreecommitdiffstats
path: root/test
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
downloadiro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.gz
iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.bz2
iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.zip
Init
Diffstat (limited to 'test')
-rw-r--r--test/_bem.scss19
-rw-r--r--test/_contexts.scss65
-rw-r--r--test/_functions.scss103
-rw-r--r--test/_gradients.scss264
-rw-r--r--test/_harmony.scss249
-rw-r--r--test/_math.scss21
-rw-r--r--test/_props.scss282
-rw-r--r--test/_responsive.scss9
-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
-rw-r--r--test/test.js4
-rw-r--r--test/test.scss16
21 files changed, 4164 insertions, 0 deletions
diff --git a/test/_bem.scss b/test/_bem.scss
new file mode 100644
index 0000000..30ed131
--- /dev/null
+++ b/test/_bem.scss
@@ -0,0 +1,19 @@
1@include describe('BEM') {
2 //
3 // The following unit tests only test the BEM mixins.
4 // Since they are wrappers for the BEM functions, the latter are
5 // automatically covered.
6 //
7
8 @import 'bem/iro-bem-block';
9 @import 'bem/iro-bem-composed-of';
10 @import 'bem/iro-bem-at-theme';
11 @import 'bem/iro-bem-element';
12 @import 'bem/iro-bem-related-element';
13 @import 'bem/iro-bem-next-twin-element';
14 @import 'bem/iro-bem-modifier';
15 @import 'bem/iro-bem-suffix';
16 @import 'bem/iro-bem-state';
17 @import 'bem/iro-bem-multi';
18 @import 'bem/examples';
19}
diff --git a/test/_contexts.scss b/test/_contexts.scss
new file mode 100644
index 0000000..1b0e602
--- /dev/null
+++ b/test/_contexts.scss
@@ -0,0 +1,65 @@
1@include describe('Contexts') {
2 @include it('Creating / deleting context stacks') {
3 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created');
4 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted');
5 }
6
7 @include it('Adding / removing contexts') {
8 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created');
9
10 @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed');
11 @include assert-equal(iro-context-push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed');
12 @include assert-equal(iro-context-push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed');
13
14 @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped');
15 @include assert-equal(iro-context-pop('test'), 'another' 'text', 'Check if context 2 was popped');
16 @include assert-equal(iro-context-pop('test'), 'ctx' 1234, 'Check if context 1 was popped');
17
18 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted');
19 }
20
21 @include it('Clearing / counting context stacks') {
22 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created');
23
24 @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed');
25 @include assert-equal(iro-context-push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed');
26 @include assert-equal(iro-context-push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed');
27
28 @include assert-equal(iro-context-stack-count('test'), 3, 'Check if context stack contains 3 contexts');
29 @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped');
30 @include assert-equal(iro-context-stack-count('test'), 2, 'Check if context stack contains 2 contexts');
31 @include assert-equal(iro-context-stack-clear('test'), null, 'Check if context stack was cleared');
32 @include assert-equal(iro-context-stack-count('test'), 0, 'Check if context stack contains no contexts');
33
34 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted');
35 }
36
37 @include it('Retrieving contexts') {
38 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created');
39
40 @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed');
41 @include assert-equal(iro-context-push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed');
42 @include assert-equal(iro-context-push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed');
43
44 @include assert-equal(iro-context-get('test', 1), 'ctx' 56, 'Check if context at position 1 is context 3');
45 @include assert-equal(iro-context-get('test', 'ctx'), 'ctx' 56, 'Check if latest context with id "ctx" is context 3');
46 @include assert-equal(iro-context-get('test', 2), 'another' 'text', 'Check if latest context with id "another" is context 2');
47
48 @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped');
49
50 @include assert-equal(iro-context-get('test', 1), 'another' 'text', 'Check if context at position 1 is context 2');
51 @include assert-equal(iro-context-get('test', -1), 'ctx' 1234, 'Check if latest context with id "ctx" is context 1');
52
53 @include assert-equal(iro-context-push('test', 'more', 'string'), 'more' 'string', 'Check if context 4 was pushed');
54
55 @include assert-equal(iro-context-get('test', 1), 'more' 'string', 'Check if context at position 1 is context 4');
56 @include assert-equal(iro-context-get('test', 'more'), 'more' 'string', 'Check if latest context with id "more" is context 4');
57
58 @include assert-equal(iro-context-pop('test'), 'more' 'string', 'Check if context 4 was popped');
59 @include assert-equal(iro-context-pop('test'), 'another' 'text', 'Check if context 2 was popped');
60
61 @include assert-equal(iro-context-get('test', 1), iro-context-get('test', -1), 'Check if first and last context are context 1');
62
63 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted');
64 }
65}
diff --git a/test/_functions.scss b/test/_functions.scss
new file mode 100644
index 0000000..54e37c5
--- /dev/null
+++ b/test/_functions.scss
@@ -0,0 +1,103 @@
1@include describe('Functions') {
2 @include it('iro-str-replace') {
3 $str: 'Hello world!';
4
5 @include assert-equal(iro-str-replace($str, 'world', 'neighbor'), 'Hello neighbor!', 'Replace "world" with "neighbor"');
6 @include assert-equal(iro-str-replace($str, 'neighbor', 'moon'), 'Hello world!', 'Replace "neighbor" with "moon"');
7 @include assert-equal(iro-str-replace($str, 'Hello', 'Bye'), 'Bye world!', 'Replace "Hello" with "Bye"');
8 }
9
10 @include it('iro-list-slice') {
11 $list: 'this' 'is' 'a' 'list';
12
13 @include assert-equal(iro-list-slice($list, 2), 'is' 'a' 'list', 'Discard first item');
14 @include assert-equal(iro-list-slice($list, 1, 3), 'this' 'is' 'a', 'Keep first 3 items');
15 @include assert-equal(iro-list-slice($list, 2, 3), 'is' 'a', 'Extract list from index 2 to 3');
16 @include assert-equal(iro-list-slice($list, -1, -1), join((), 'list'), 'Keep last item');
17 @include assert-equal(iro-list-slice($list, -1, 1), 'list' 'this', 'Extract first and last item');
18 }
19
20 @include it('iro-list-prepend') {
21 $list: 'this' 'is' 'a' 'list';
22
23 @include assert-equal(iro-list-prepend($list, 'and'), 'and' 'this' 'is' 'a' 'list', 'Prepend "and"');
24 @include assert-equal(iro-list-prepend($list, 2), 2 'this' 'is' 'a' 'list', 'Prepend 2');
25 }
26
27 @include it('iro-quicksort') {
28 @include assert-equal(iro-quicksort(1 2 3 4 5), 1 2 3 4 5, 'Already sorted list of 5 items');
29 @include assert-equal(iro-quicksort(1 3 2), 1 2 3, 'Random list of 3 items');
30 @include assert-equal(iro-quicksort(6 3 7 3 8 1 4), 1 3 3 4 6 7 8, 'Random list of 7 items, one duplicate');
31 @include assert-equal(iro-quicksort(1 1 1 1), 1 1 1 1, 'List of 4 identical items');
32 }
33
34 @include it('iro-map-get-default') {
35 $map: ('key': 'value', 'another': 'item');
36
37 @include assert-equal(iro-map-get-default($map, 'another', 0), map-get($map, 'another'), 'Get existing value');
38 @include assert-equal(iro-map-get-default($map, 'index', 'nothing'), 'nothing', 'Get missing value');
39 }
40
41 @include it('iro-map-get-deep') {
42 $map: (
43 'key': 'value',
44 'sub': (
45 'item1': 1,
46 'item2': 2,
47 'subsub': (
48 'item1': 11,
49 'item2': 12,
50 )
51 )
52 );
53
54 @include assert-equal(iro-map-get-deep($map, 'key'), map-get($map, 'key'), 'Get value in root level');
55 @include assert-equal(iro-map-get-deep($map, 'sub' 'item1'), map-get(map-get($map, 'sub'), 'item1'), 'Get value in first level');
56 @include assert-equal(iro-map-get-deep($map, 'sub' 'item2'), map-get(map-get($map, 'sub'), 'item2'), 'Get value in first level');
57 @include assert-equal(iro-map-get-deep($map, 'sub' 'subsub' 'item1'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item1'), 'Get value in second level');
58 @include assert-equal(iro-map-get-deep($map, 'sub' 'subsub' 'item2'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item2'), 'Get value in second level');
59 }
60
61 @include it('iro-map-merge-recursive') {
62 $map1: (
63 'key': 'value',
64 'sub': (
65 'item1': 1,
66 'item3': 2
67 )
68 );
69 $map2: (
70 'another': 'item',
71 'sub': (
72 'item1': 0,
73 'item2': 1
74 )
75 );
76
77 $expected: (
78 'key': 'value',
79 'another': 'item',
80 'sub': (
81 'item1': 0,
82 'item2': 1,
83 'item3': 2
84 )
85 );
86
87 @include assert-equal(iro-map-merge-recursive($map1, $map2), $expected);
88 }
89
90 @include it('iro-strip-unit') {
91 @include assert-true(unitless(iro-strip-unit(1em)), 'Remove unit from 1em');
92 @include assert-true(unitless(iro-strip-unit(2rem)), 'Remove unit from 2rem');
93 @include assert-true(unitless(iro-strip-unit(3px)), 'Remove unit from 3px');
94 @include assert-true(unitless(iro-strip-unit(4)), 'Remove unit from 4');
95 @include assert-true(unitless(iro-strip-unit(5pt)), 'Remove unit from 5pt');
96 }
97
98 @include it('iro-px-to-rem') {
99 @include assert-equal(iro-px-to-rem(16px, 16px), 1rem, 'Convert 16px');
100 @include assert-equal(iro-px-to-rem(32px, 16px), 2rem, 'Convert 16px');
101 @include assert-equal(iro-px-to-rem(8px, 16px), 0.5rem, 'Convert 16px');
102 }
103}
diff --git a/test/_gradients.scss b/test/_gradients.scss
new file mode 100644
index 0000000..c1145aa
--- /dev/null
+++ b/test/_gradients.scss
@@ -0,0 +1,264 @@
1// sass-lint:disable no-color-literals zero-unit
2
3@include describe('Gradients') {
4 @include it('iro-easing-gradient') {
5 $gradient1: iro-easing-gradient(
6 linear,
7 to right,
8 #000,
9 ease-in-quad,
10 transparent
11 );
12
13 $expected1: linear-gradient(
14 to right,
15 #000 0,
16 mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 25%,
17 mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) 50%,
18 mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 75%,
19 transparent 100%
20 );
21
22 @include assert-equal($gradient1, $expected1, 'Simple linear gradient');
23
24 // ---------------------------------------------------------------------------
25
26 $gradient2: iro-easing-gradient(
27 radial,
28 1em 2em at 50% 60%,
29 #000,
30 ease-out-cubic,
31 transparent
32 );
33
34 $expected2: radial-gradient(
35 1em 2em at 50% 60%,
36 #000 0,
37 mix(transparent, #000, iro-ease-out-cubic(0.25) * 100%) 25%,
38 mix(transparent, #000, iro-ease-out-cubic(0.5) * 100%) 50%,
39 mix(transparent, #000, iro-ease-out-cubic(0.75) * 100%) 75%,
40 transparent 100%
41 );
42
43 @include assert-equal($gradient2, $expected2, 'Simple radial gradient');
44
45 // ---------------------------------------------------------------------------
46
47 $gradient3: iro-easing-gradient(
48 linear,
49 to right,
50 #000 2em,
51 ease-in-quad,
52 transparent 10em
53 );
54
55 $expected3: linear-gradient(
56 to right,
57 #000 2em,
58 mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 4em,
59 mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) 6em,
60 mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 8em,
61 transparent 10em
62 );
63
64 @include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
65
66 // ---------------------------------------------------------------------------
67
68 $gradient4: iro-easing-gradient(
69 linear,
70 to right,
71 #000 20%,
72 ease-in-quad,
73 transparent calc(20% + 10em)
74 );
75
76 $expected4: linear-gradient(
77 to right,
78 #000 20%,
79 mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25),
80 mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) calc(20% + (20% + 10em - 20%) * 0.5),
81 mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),
82 transparent calc(20% + 10em)
83 );
84
85 @include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
86
87 // ---------------------------------------------------------------------------
88
89 $gradient5: iro-easing-gradient(
90 linear,
91 to right,
92 #000 2em,
93 #f00 7em,
94 ease-in-quad,
95 transparent 10em
96 );
97
98 $expected5: linear-gradient(
99 to right,
100 #000 2em,
101 #f00 7em,
102 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
103 mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 7em + 3em * 0.5,
104 mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
105 transparent 10em
106 );
107
108 @include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
109
110 // ---------------------------------------------------------------------------
111
112 $gradient6: iro-easing-gradient(
113 linear,
114 to right,
115 #000 2em,
116 ease-in-quad,
117 #f00 7em,
118 ease-in-quad,
119 transparent 10em
120 );
121
122 $expected6: linear-gradient(
123 to right,
124 #000 2em,
125 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 2em + 5em * 0.25,
126 mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 2em + 5em * 0.5,
127 mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,
128 #f00 7em,
129 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
130 mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 7em + 3em * 0.5,
131 mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
132 transparent 10em
133 );
134
135 @include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
136
137 // ---------------------------------------------------------------------------
138
139 $gradient7: iro-easing-gradient(
140 linear,
141 to right,
142 #000 2em,
143 ease-in-quad,
144 #f00,
145 ease-in-quad,
146 transparent 10em
147 );
148
149 $expected7: linear-gradient(
150 to right,
151 #000 2em,
152 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 2em + 4em * 0.25,
153 mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 2em + 4em * 0.5,
154 mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,
155 #f00 6em,
156 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 6em + 4em * 0.25,
157 mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 6em + 4em * 0.5,
158 mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,
159 transparent 10em
160 );
161
162 @include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
163
164 // ---------------------------------------------------------------------------
165
166 $gradient8: iro-easing-gradient(
167 linear,
168 to right,
169 #000,
170 ease-in-quad,
171 #f00,
172 ease-in-quad,
173 transparent
174 );
175
176 $expected8: linear-gradient(
177 to right,
178 #000 0,
179 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 50% * 0.25,
180 mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 50% * 0.5,
181 mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 50% * 0.75,
182 #f00 50%,
183 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 50% + 50% * 0.25,
184 mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 50% + 50% * 0.5,
185 mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,
186 transparent 100%
187 );
188
189 @include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
190
191 // ---------------------------------------------------------------------------
192
193 $gradient9: iro-easing-gradient(
194 linear,
195 to right,
196 #000,
197 ease-in-quad,
198 #f00,
199 ease-in-quad,
200 transparent 20em
201 );
202
203 $expected9: linear-gradient(
204 to right,
205 #000 0,
206 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 10em * 0.25,
207 mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 10em * 0.5,
208 mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 10em * 0.75,
209 #f00 10em,
210 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 10em + 10em * 0.25,
211 mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 10em + 10em * 0.5,
212 mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,
213 transparent 20em
214 );
215
216 @include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
217
218 // ---------------------------------------------------------------------------
219
220 $gradient10: iro-easing-gradient(
221 linear,
222 to right,
223 #000,
224 cubic-bezier 0.47 0 0.745 0.715,
225 transparent
226 );
227
228 $expected10: linear-gradient(
229 to right,
230 #000 0,
231 mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%,
232 mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.5) * 100%) 50%,
233 mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,
234 transparent 100%
235 );
236
237 @include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
238
239 // ---------------------------------------------------------------------------
240
241 $gradient11: iro-easing-gradient(
242 linear,
243 to right,
244 #000,
245 steps 4 jump-start,
246 transparent
247 );
248
249 $expected11: linear-gradient(
250 to right,
251 #000 0,
252 mix(transparent, #000, 0.25 * 100%) 0,
253 mix(transparent, #000, 0.25 * 100%) 25%,
254 mix(transparent, #000, 0.5 * 100%) 25%,
255 mix(transparent, #000, 0.5 * 100%) 50%,
256 mix(transparent, #000, 0.75 * 100%) 50%,
257 mix(transparent, #000, 0.75 * 100%) 75%,
258 transparent 75%,
259 transparent 100%
260 );
261
262 @include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
263 }
264}
diff --git a/test/_harmony.scss b/test/_harmony.scss
new file mode 100644
index 0000000..25560f0
--- /dev/null
+++ b/test/_harmony.scss
@@ -0,0 +1,249 @@
1@function _limit-decimals($n) {
2 @return floor($n * 1000) / 1000;
3}
4
5@include describe('Harmony') {
6 @include it('iro-harmony-modular-scale') {
7 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale');
8 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale');
9 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale');
10 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale');
11 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale');
12
13 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale');
14 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale');
15 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale');
16 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-1, 1em 1.5em, 1.2)), 0.868em, '-1 iteration, 1em 2em base, 1.1 scale');
17 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-2, 1em 1.5em, 1.2)), 0.833em, '-2 iterations, 1em 2em base, 1.1 scale');
18 }
19
20 @include it('iro-responsive-modular-scale') {
21 @include assert('Single-stranded, fluid') {
22 $ms: (
23 320px: (1rem, 1.1),
24 640px: (1rem, 1.2)
25 );
26
27 $rem320px: iro-px-to-rem(320px);
28 $rem640px: iro-px-to-rem(640px);
29 $diff320px: iro-strip-unit($rem640px - $rem320px);
30
31 @include output {
32 h3 {
33 @include iro-responsive-modular-scale(font-size, 0, $ms);
34 }
35
36 h2 {
37 @include iro-responsive-modular-scale(font-size, 1, $ms);
38 }
39
40 h1 {
41 @include iro-responsive-modular-scale(font-size, 2, $ms);
42 }
43 }
44
45 @include expect {
46 h3 {
47 font-size: 1rem;
48
49 @media (min-width: 320px) and (max-width: 640px) {
50 font-size: calc(1rem + 0 * ((100vw - #{$rem320px}) / #{$diff320px}));
51 }
52
53 @media (min-width: 640px) {
54 font-size: 1rem;
55 }
56 }
57
58 h2 {
59 font-size: 1.1rem;
60
61 @media (min-width: 320px) and (max-width: 640px) {
62 font-size: calc(1.1rem + 0.1 * ((100vw - #{$rem320px}) / #{$diff320px}));
63 }
64
65 @media (min-width: 640px) {
66 font-size: 1.2rem;
67 }
68 }
69
70 h1 {
71 font-size: 1.21rem;
72
73 @media (min-width: 320px) and (max-width: 640px) {
74 font-size: calc(1.21rem + 0.23 * ((100vw - #{$rem320px}) / #{$diff320px}));
75 }
76
77 @media (min-width: 640px) {
78 font-size: 1.44rem;
79 }
80 }
81 }
82 }
83
84 @include assert('Single-stranded, non-fluid') {
85 $ms: (
86 320px: (1rem, 1.1),
87 640px: (1rem, 1.2)
88 );
89
90 $rem320px: iro-px-to-rem(320px);
91 $rem640px: iro-px-to-rem(640px);
92 $diff320px: iro-strip-unit($rem640px - $rem320px);
93
94 @include output {
95 h3 {
96 @include iro-responsive-modular-scale(font-size, 0, $ms, false);
97 }
98
99 h2 {
100 @include iro-responsive-modular-scale(font-size, 1, $ms, false);
101 }
102
103 h1 {
104 @include iro-responsive-modular-scale(font-size, 2, $ms, false);
105 }
106 }
107
108 @include expect {
109 h3 {
110 font-size: 1rem;
111
112 @media (min-width: 640px) {
113 font-size: 1rem;
114 }
115 }
116
117 h2 {
118 font-size: 1.1rem;
119
120 @media (min-width: 640px) {
121 font-size: 1.2rem;
122 }
123 }
124
125 h1 {
126 font-size: 1.21rem;
127
128 @media (min-width: 640px) {
129 font-size: 1.44rem;
130 }
131 }
132 }
133 }
134
135 @include assert('Double-stranded, fluid') {
136 $ms: (
137 320px: (1rem 2rem, 1.1),
138 640px: (1rem 2rem, 1.2)
139 );
140
141 $rem320px: iro-px-to-rem(320px);
142 $rem640px: iro-px-to-rem(640px);
143 $diff320px: iro-strip-unit($rem640px - $rem320px);
144
145 @include output {
146 h3 {
147 @include iro-responsive-modular-scale(font-size, 0, $ms);
148 }
149
150 h2 {
151 @include iro-responsive-modular-scale(font-size, 1, $ms);
152 }
153
154 h1 {
155 @include iro-responsive-modular-scale(font-size, 2, $ms);
156 }
157 }
158
159 @include expect {
160 h3 {
161 font-size: 1rem;
162
163 @media (min-width: 320px) and (max-width: 640px) {
164 font-size: calc(1rem + 0 * ((100vw - #{$rem320px}) / #{$diff320px}));
165 }
166
167 @media (min-width: 640px) {
168 font-size: 1rem;
169 }
170 }
171
172 h2 {
173 font-size: 1.0263162365rem;
174
175 @media (min-width: 320px) and (max-width: 640px) {
176 font-size: calc(1.0263162365rem + 0.1310911709 * ((100vw - #{$rem320px}) / #{$diff320px}));
177 }
178
179 @media (min-width: 640px) {
180 font-size: 1.1574074074rem;
181 }
182 }
183
184 h1 {
185 font-size: 1.1rem;
186
187 @media (min-width: 320px) and (max-width: 640px) {
188 font-size: calc(1.1rem + 0.1 * ((100vw - #{$rem320px}) / #{$diff320px}));
189 }
190
191 @media (min-width: 640px) {
192 font-size: 1.2rem;
193 }
194 }
195 }
196 }
197
198 @include assert('Double-stranded, non-fluid') {
199 $ms: (
200 320px: (1rem 2rem, 1.1),
201 640px: (1rem 2rem, 1.2)
202 );
203
204 $rem320px: iro-px-to-rem(320px);
205 $rem640px: iro-px-to-rem(640px);
206 $diff320px: iro-strip-unit($rem640px - $rem320px);
207
208 @include output {
209 h3 {
210 @include iro-responsive-modular-scale(font-size, 0, $ms, false);
211 }
212
213 h2 {
214 @include iro-responsive-modular-scale(font-size, 1, $ms, false);
215 }
216
217 h1 {
218 @include iro-responsive-modular-scale(font-size, 2, $ms, false);
219 }
220 }
221
222 @include expect {
223 h3 {
224 font-size: 1rem;
225
226 @media (min-width: 640px) {
227 font-size: 1rem;
228 }
229 }
230
231 h2 {
232 font-size: 1.0263162365rem;;
233
234 @media (min-width: 640px) {
235 font-size: 1.1574074074rem;;
236 }
237 }
238
239 h1 {
240 font-size: 1.1rem;
241
242 @media (min-width: 640px) {
243 font-size: 1.2rem;
244 }
245 }
246 }
247 }
248 }
249}
diff --git a/test/_math.scss b/test/_math.scss
new file mode 100644
index 0000000..5f40499
--- /dev/null
+++ b/test/_math.scss
@@ -0,0 +1,21 @@
1// sass-lint:disable empty-args
2
3@include describe('Math') {
4 @include it('iro-math-pow') {
5 @include assert-equal(iro-math-pow(2, 2), 2 * 2, '2^2');
6 @include assert-equal(iro-math-pow(2, 3), 2 * 2 * 2, '2^3');
7 @include assert-equal(iro-math-pow(4, 3), 4 * 4 * 4, '4^3');
8 @include assert-equal(iro-math-pow(3, -1), 1 / 3, '3^(-1)');
9 @include assert-equal(iro-math-pow(4, -2), 1 / (4 * 4), '4^(-2)');
10 @include assert-equal(iro-math-pow(3, 0), 1, '3^0');
11 }
12
13 @include it('iro-math-clamp') {
14 @include assert-equal(iro-math-clamp(0, 0, 10), 0, '0 in [0, 10]');
15 @include assert-equal(iro-math-clamp(10, 0, 10), 10, '10 in [0, 10]');
16 @include assert-equal(iro-math-clamp(20, 0, 10), 10, '20 in [0, 10]');
17 @include assert-equal(iro-math-clamp(3, 10, 20), 10, '3 in [10, 20]');
18 @include assert-equal(iro-math-clamp(-5, -30, -10), -10, '-5 in [-30, -10]');
19 @include assert-equal(iro-math-clamp(-5, -30, -2), -5, '-5 in [-30, -2]');
20 }
21}
diff --git a/test/_props.scss b/test/_props.scss
new file mode 100644
index 0000000..4e0a5b4
--- /dev/null
+++ b/test/_props.scss
@@ -0,0 +1,282 @@
1// sass-lint:disable empty-args
2
3@include describe('Property trees') {
4 @include it('Validate names') {
5 $map-valid: (
6 --background: #fff,
7 --text: #000,
8 --buttons: (
9 --primary: (
10 --background: #f00,
11 --text: #fff
12 )
13 )
14 );
15
16 $map-invalid: (
17 --background: #fff,
18 --text: #000,
19 --buttons: (
20 --primary: (
21 background: #f00,
22 text: #fff
23 )
24 )
25 );
26
27 @include assert-equal(iro-props-validate($map-valid), true, 'Check valid map');
28 @include assert-equal(iro-props-validate($map-invalid), false, 'Check invalid map');
29 }
30
31 @include it('Save / Delete') {
32 $map: (
33 --background: #fff,
34 --text: #000,
35 --buttons: (
36 --primary: (
37 --background: #f00,
38 --text: #fff
39 ),
40 --default: (
41 --background: #ddd,
42 --text: #000
43 )
44 )
45 );
46
47 @include assert-equal(iro-props-save($map), null, 'Save default tree');
48 @include assert-equal(iro-props-delete(), null, 'Delete default tree');
49 }
50
51 @include it('Read') {
52 $map1: (
53 --background: #fff,
54 --text: #000,
55 --buttons: (
56 --primary: (
57 --background: #f00,
58 --text: #fff
59 ),
60 --default: (
61 --background: #ddd,
62 --text: #000
63 )
64 )
65 );
66
67 $map2: (
68 --background: #222,
69 --text: #fff,
70 --buttons: (
71 --primary: (
72 --background: #f00,
73 --text: #fff
74 ),
75 --default: (
76 --background: #444,
77 --text: #fff
78 )
79 )
80 );
81
82 @include assert-equal(iro-props-save($map1), null, 'Save default tree');
83 @include assert-equal(iro-props-save($map2, 'test'), null, 'Save "test" tree');
84
85 @include assert-equal(iro-props-get(--background), map-get($map1, --background), 'Get --background in default');
86 @include assert-equal(iro-props-get(--buttons --primary --background), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get --buttons --primary --background in default');
87 @include assert-equal(iro-props-get(--buttons --default --text), map-get(map-get(map-get($map1, --buttons), --default), --text), 'Get --buttons --default --text in default');
88 @include assert-equal(iro-props-get(--box, $default: false), false, 'Get nonexistent in default');
89
90 @include assert-equal(iro-props-get(--background, 'test'), map-get($map2, --background), 'Get --background in "test"');
91 @include assert-equal(iro-props-get(--buttons --primary --background, 'test'), map-get(map-get(map-get($map2, --buttons), --primary), --background), 'Get --buttons --primary --background in "test"');
92 @include assert-equal(iro-props-get(--buttons --default --text, 'test'), map-get(map-get(map-get($map2, --buttons), --default), --text), 'Get --buttons --default --text in "test"');
93 @include assert-equal(iro-props-get(--box, 'test', $default: false), false, 'Get nonexistent in "test"');
94
95 @include assert-equal(iro-props-delete(), null, 'Delete default tree');
96 @include assert-equal(iro-props-delete('test'), null, 'Delete "test" tree');
97 }
98
99 @include it('Overwrite') {
100 $map1: (
101 --background: #fff,
102 --text: #000,
103 --buttons: (
104 --primary: (
105 --background: #f00,
106 --text: #fff
107 )
108 )
109 );
110
111 $map2: (
112 --background: #eee,
113 --buttons: (
114 --primary: (
115 --background: #00f
116 ),
117 --default: (
118 --background: #444,
119 --text: #fff
120 )
121 )
122 );
123
124 @include assert-equal(iro-props-save($map1), null, 'Save default tree');
125
126 @include assert-equal(iro-props-get(), $map1, 'Before update, get whole map');
127 @include assert-equal(iro-props-get(--background), map-get($map1, --background), 'Before update, get --background');
128 @include assert-equal(iro-props-get(--text), map-get($map1, --text), 'Before update, get --text');
129 @include assert-equal(iro-props-get(--buttons --primary --background), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Before update, get --buttons --primary --background');
130 @include assert-equal(iro-props-get(--buttons --default --text, $default: false), false, 'Before update, get --buttons --default --text (returns default)');
131
132 @include assert-equal(iro-props-save($map2, $merge: true), null, 'Overwrite default tree');
133
134 @include assert-equal(iro-props-get(), iro-map-merge-recursive($map1, $map2), 'After update, get whole map');
135 @include assert-equal(iro-props-get(--background), map-get($map2, --background), 'After update, get --background');
136 @include assert-equal(iro-props-get(--text), map-get($map1, --text), 'After update, get --text');
137 @include assert-equal(iro-props-get(--buttons --primary --background), map-get(map-get(map-get($map2, --buttons), --primary), --background), 'After update, get --buttons --primary --background');
138 @include assert-equal(iro-props-get(--buttons --default --text), map-get(map-get(map-get($map2, --buttons), --default), --text), 'After update, get --buttons --default --text');
139
140 @include assert-equal(iro-props-delete(), null, 'Delete default tree');
141 }
142
143 @include it('Native assignment') {
144 @include assert('Simple') {
145 $map: (
146 --background: #fff,
147 --text: #000,
148 --buttons: (
149 --primary: (
150 --background: #f00,
151 --text: #fff
152 ),
153 --default: (
154 --background: #ddd,
155 --text: #000
156 )
157 )
158 );
159
160 @include iro-props-save($map);
161
162 @include output {
163 @include iro-props-assign-native;
164 }
165
166 @include expect {
167 --background: #{map-get($map, --background)};
168 --text: #{map-get($map, --text)};
169 --buttons--primary--background: #{map-get(map-get(map-get($map, --buttons), --primary), --background)};
170 --buttons--primary--text: #{map-get(map-get(map-get($map, --buttons), --primary), --text)};
171 --buttons--default--background: #{map-get(map-get(map-get($map, --buttons), --default), --background)};
172 --buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)};
173 }
174
175 @include iro-props-delete;
176 }
177
178 @include assert('Filtered') {
179 $map: (
180 --background: #fff,
181 --text: #000,
182 --buttons: (
183 --primary: (
184 --background: #f00,
185 --text: #fff
186 ),
187 --default: (
188 --background: #ddd,
189 --text: #000
190 )
191 )
192 );
193
194 @include iro-props-save($map);
195
196 @include output {
197 @include iro-props-assign-native($skip: --buttons);
198 }
199
200 @include expect {
201 --background: #{map-get($map, --background)};
202 --text: #{map-get($map, --text)};
203 }
204
205 @include iro-props-delete;
206 }
207 }
208
209 @include it('Native get') {
210 $map: (
211 --background: #fff,
212 --text: #000,
213 --buttons: (
214 --primary: (
215 --background: #f00,
216 --text: #fff
217 ),
218 --default: (
219 --background: #ddd,
220 --text: #000
221 )
222 )
223 );
224
225 @include assert-equal(iro-props-save($map), null, 'Save default tree');
226
227 @include assert-equal(iro-props-get-native(--background), var(--background), 'Get --background');
228 @include assert-equal(iro-props-get-native(--buttons --primary --text), var(--buttons--primary--text), 'Get --buttons --primary --text');
229 @include assert-equal(iro-props-get-native(--buttons --secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get --buttons --secondary --text with default');
230
231 @include assert-equal(iro-props-delete(), null, 'Delete default tree');
232 }
233
234 @include it('References') {
235 $map1: (
236 --background: #fff,
237 --text: #000,
238 --buttons: (
239 --primary: (
240 --background: #f00,
241 --text: #fff
242 )
243 )
244 );
245
246 $map2: (
247 --background: #eee,
248 --buttons: (
249 --primary: (
250 --background: iro-props-ref($key: --background)
251 ),
252 --default: iro-props-ref($key: --buttons --primary)
253 )
254 );
255
256 @include assert-equal(iro-props-save($map1), null, 'Save default tree');
257 @include assert-equal(iro-props-save($map2, 'second'), null, 'Save "second" tree');
258
259 @include assert-equal(iro-props-get(--buttons --primary --background, 'second'), map-get($map1, --background), 'Get referenced value');
260 @include assert-equal(iro-props-get-native(--buttons --primary --background, 'second'), var(--buttons--primary--background), 'Get referenced value, native');
261
262 @include assert-equal(iro-props-get(--buttons --default, 'second'), map-get(map-get($map1, --buttons), --primary), 'Get referenced subtree, whole');
263 @include assert-equal(iro-props-get(--buttons --default --background, 'second'), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get referenced subtree, inner value');
264 @include assert-equal(iro-props-get-native(--buttons --default --background, 'second'), var(--buttons--default--background), 'Get referenced subtree, native');
265
266 @include assert('Native assignment') {
267 @include output {
268 @include iro-props-assign-native('second');
269 }
270
271 @include expect {
272 --background: #{map-get($map2, --background)};
273 --buttons--primary--background: #{map-get($map1, --background)};
274 --buttons--default--background: #{map-get(map-get(map-get($map1, --buttons), --primary), --background)};
275 --buttons--default--text: #{map-get(map-get(map-get($map1, --buttons), --primary), --text)};
276 }
277 }
278
279 @include assert-equal(iro-props-delete(), null, 'Delete default tree');
280 @include assert-equal(iro-props-delete('second'), null, 'Delete "second" tree');
281 }
282}
diff --git a/test/_responsive.scss b/test/_responsive.scss
new file mode 100644
index 0000000..cdda40c
--- /dev/null
+++ b/test/_responsive.scss
@@ -0,0 +1,9 @@
1@include describe('Responsive') {
2 @include it('iro-responsive-fluid-calc') {
3 $rem600px: iro-px-to-rem(600px);
4 $rem800px: iro-px-to-rem(800px);
5
6 @include assert-equal(iro-responsive-fluid-calc(2rem, 4rem, 600px, 800px), 'calc(2rem + 2 * ((100vw - #{$rem600px}) / #{iro-strip-unit($rem800px - $rem600px)}))', 'Responsive value from 2rem to 4rem over 600px to 800px');
7 @include assert-equal(iro-responsive-fluid-calc(4px, 12px, 600px, 800px), 'calc(4px + 8 * ((100vw - 600px) / 200))', 'Responsive value from 4px to 12px over 600px to 800px');
8 }
9}
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}
diff --git a/test/test.js b/test/test.js
new file mode 100644
index 0000000..94d16da
--- /dev/null
+++ b/test/test.js
@@ -0,0 +1,4 @@
1const path = require("path");
2const sassTrue = require("sass-true");
3
4sassTrue.runSass({ file: path.join(__dirname, "test.scss") }, { describe, it });
diff --git a/test/test.scss b/test/test.scss
new file mode 100644
index 0000000..9e3cf6b
--- /dev/null
+++ b/test/test.scss
@@ -0,0 +1,16 @@
1@import '../src/main';
2
3@import 'true';
4
5$iro-easing-gradient-steps: 4;
6
7@import 'functions';
8@import 'math';
9@import 'contexts';
10@import 'bem';
11@import 'responsive';
12@import 'harmony';
13@import 'gradients';
14@import 'props';
15
16@include report;
generated by cgit v1.2.3-54-g00ecf (git 2.44.0) at 2024-05-10 20:57:56 +0000