aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json1
-rw-r--r--src/_bem.scss27
-rw-r--r--src/_contexts.scss114
-rw-r--r--src/_easing.scss172
-rw-r--r--src/_functions.scss49
-rw-r--r--src/_gradients.scss127
-rw-r--r--src/_harmony.scss24
-rw-r--r--src/_props.scss127
-rw-r--r--src/_responsive.scss89
-rw-r--r--src/_vars.scss2
-rw-r--r--src/bem-shortcodes.scss349
-rw-r--r--src/bem/_block.scss166
-rw-r--r--src/bem/_debug.scss8
-rw-r--r--src/bem/_element.scss191
-rw-r--r--src/bem/_functions.scss6
-rw-r--r--src/bem/_modifier.scss63
-rw-r--r--src/bem/_multi.scss56
-rw-r--r--src/bem/_state.scss50
-rw-r--r--src/bem/_suffix.scss37
-rw-r--r--src/bem/_theme.scss27
-rw-r--r--src/bem/_validators.scss68
-rw-r--r--src/bem/_vars.scss20
-rw-r--r--src/harmony-shortcodes.scss35
-rw-r--r--src/main.scss9
-rw-r--r--src/prep.scss2
-rw-r--r--src/props-shortcodes.scss79
-rw-r--r--src/responsive-shortcodes.scss14
-rw-r--r--test/_bem.scss24
-rw-r--r--test/_contexts.scss79
-rw-r--r--test/_functions.scss83
-rw-r--r--test/_gradients.scss114
-rw-r--r--test/_harmony.scss79
-rw-r--r--test/_props.scss124
-rw-r--r--test/_responsive.scss16
-rw-r--r--test/bem/_at-theme.scss (renamed from test/bem/_iro-bem-at-theme.scss)15
-rw-r--r--test/bem/_block.scss (renamed from test/bem/_iro-bem-block.scss)21
-rw-r--r--test/bem/_composed-of.scss (renamed from test/bem/_iro-bem-composed-of.scss)43
-rw-r--r--test/bem/_element.scss (renamed from test/bem/_iro-bem-element.scss)123
-rw-r--r--test/bem/_examples.scss43
-rw-r--r--test/bem/_modifier.scss (renamed from test/bem/_iro-bem-modifier.scss)249
-rw-r--r--test/bem/_multi.scss (renamed from test/bem/_iro-bem-multi.scss)127
-rw-r--r--test/bem/_next-twin-element.scss (renamed from test/bem/_iro-bem-next-twin-element.scss)49
-rw-r--r--test/bem/_related-element.scss (renamed from test/bem/_iro-bem-related-element.scss)125
-rw-r--r--test/bem/_state.scss (renamed from test/bem/_iro-bem-state.scss)49
-rw-r--r--test/bem/_suffix.scss (renamed from test/bem/_iro-bem-suffix.scss)33
-rw-r--r--test/test.scss7
46 files changed, 1481 insertions, 1834 deletions
diff --git a/package.json b/package.json
index b436642..3bdc8b0 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
4 "author": "Volpeon <me@volpeon.ink>", 4 "author": "Volpeon <me@volpeon.ink>",
5 "license": "MIT", 5 "license": "MIT",
6 "description": "A mixin-based Sass framework that makes it easier to work with BEM, organize variables and more.", 6 "description": "A mixin-based Sass framework that makes it easier to work with BEM, organize variables and more.",
7 "main": "src/main.scss",
8 "keywords": [ 7 "keywords": [
9 "sass", 8 "sass",
10 "scss", 9 "scss",
diff --git a/src/_bem.scss b/src/_bem.scss
index b6032ea..e34b79b 100644
--- a/src/_bem.scss
+++ b/src/_bem.scss
@@ -47,16 +47,19 @@
47/// @access public 47/// @access public
48//// 48////
49 49
50@import 'bem/vars'; 50@forward 'bem/vars';
51@import 'bem/functions'; 51@forward 'bem/functions';
52@import 'bem/validators'; 52@forward 'bem/validators';
53@import 'bem/block'; 53@forward 'bem/block';
54@import 'bem/element'; 54@forward 'bem/element';
55@import 'bem/modifier'; 55@forward 'bem/modifier';
56@import 'bem/suffix'; 56@forward 'bem/suffix';
57@import 'bem/state'; 57@forward 'bem/state';
58@import 'bem/theme'; 58@forward 'bem/theme';
59@import 'bem/multi'; 59@forward 'bem/multi';
60@import 'bem/debug'; 60@forward 'bem/debug';
61 61
62@include iro-context-stack-create($iro-bem-context-id); 62@use 'bem/vars';
63@use './contexts';
64
65@include contexts.create(vars.$context-id);
diff --git a/src/_contexts.scss b/src/_contexts.scss
index 9fe0e8c..8542056 100644
--- a/src/_contexts.scss
+++ b/src/_contexts.scss
@@ -5,16 +5,18 @@
5/// It's an essential part for the BEM-related mixins. 5/// It's an essential part for the BEM-related mixins.
6/// 6///
7/// If you want to create a new context, the easiest pattern is to create a new mixin and wrap 7/// If you want to create a new context, the easiest pattern is to create a new mixin and wrap
8/// the @content between a pair of iro-context-push and iro-context-pop. 8/// the @content between a pair of push and pop.
9/// From within the @content, you can access the context's data with iro-context-get. 9/// From within the @content, you can access the context's data with get.
10/// To make the compilation fail if a certain nesting order is violated, use 10/// To make the compilation fail if a certain nesting order is violated, use
11/// iro-context-assert-stack-must-contain and iro-context-assert-stack-must-not-contain. 11/// assert-stack-must-contain and assert-stack-must-not-contain.
12/// 12///
13/// @group Contexts 13/// @group Contexts
14/// 14///
15/// @access public 15/// @access public
16//// 16////
17 17
18@use './functions';
19
18/// 20///
19/// Map of all context stacks. 21/// Map of all context stacks.
20/// 22///
@@ -22,7 +24,7 @@
22/// 24///
23/// @access private 25/// @access private
24/// 26///
25$iro-context-stacks: (); 27$stacks: ();
26 28
27/// 29///
28/// Create a new context stack. 30/// Create a new context stack.
@@ -31,8 +33,8 @@ $iro-context-stacks: ();
31/// 33///
32/// @throw If context stack already exists 34/// @throw If context stack already exists
33/// 35///
34@mixin iro-context-stack-create($stack-id) { 36@mixin create($stack-id) {
35 $noop: iro-context-stack-create($stack-id); 37 $noop: create($stack-id);
36} 38}
37 39
38/// 40///
@@ -40,12 +42,12 @@ $iro-context-stacks: ();
40/// 42///
41/// @param {string} $stack-id - ID of context stack 43/// @param {string} $stack-id - ID of context stack
42/// 44///
43@function iro-context-stack-create($stack-id) { 45@function create($stack-id) {
44 @if map-has-key($iro-context-stacks, $stack-id) { 46 @if map-has-key($stacks, $stack-id) {
45 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 47 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
46 } 48 }
47 49
48 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: ())) !global; 50 $stacks: map-merge($stacks, ($stack-id: ())) !global;
49 51
50 @return null; 52 @return null;
51} 53}
@@ -55,8 +57,8 @@ $iro-context-stacks: ();
55/// 57///
56/// @param {string} $stack-id - ID of context stack 58/// @param {string} $stack-id - ID of context stack
57/// 59///
58@mixin iro-context-stack-clear($stack-id) { 60@mixin clear($stack-id) {
59 $noop: iro-context-stack-clear($stack-id); 61 $noop: clear($stack-id);
60} 62}
61 63
62/// 64///
@@ -64,13 +66,13 @@ $iro-context-stacks: ();
64/// 66///
65/// @param {string} $stack-id - ID of context stack 67/// @param {string} $stack-id - ID of context stack
66/// 68///
67@function iro-context-stack-clear($stack-id) { 69@function clear($stack-id) {
68 @if not map-has-key($iro-context-stacks, $stack-id) { 70 @if not map-has-key($stacks, $stack-id) {
69 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 71 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
70 } 72 }
71 73
72 $context-stack: (); 74 $context-stack: ();
73 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; 75 $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global;
74 76
75 @return null; 77 @return null;
76} 78}
@@ -80,8 +82,8 @@ $iro-context-stacks: ();
80/// 82///
81/// @param {string} $stack-id - ID of context stack 83/// @param {string} $stack-id - ID of context stack
82/// 84///
83@mixin iro-context-stack-delete($stack-id) { 85@mixin delete($stack-id) {
84 $noop: iro-context-stack-delete($stack-id); 86 $noop: delete($stack-id);
85} 87}
86 88
87/// 89///
@@ -89,12 +91,12 @@ $iro-context-stacks: ();
89/// 91///
90/// @param {string} $stack-id - ID of context stack 92/// @param {string} $stack-id - ID of context stack
91/// 93///
92@function iro-context-stack-delete($stack-id) { 94@function delete($stack-id) {
93 @if not map-has-key($iro-context-stacks, $stack-id) { 95 @if not map-has-key($stacks, $stack-id) {
94 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 96 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
95 } 97 }
96 98
97 $iro-context-stacks: map-remove($iro-context-stacks, $stack-id) !global; 99 $stacks: map-remove($stacks, $stack-id) !global;
98 100
99 @return null; 101 @return null;
100} 102}
@@ -106,8 +108,8 @@ $iro-context-stacks: ();
106/// @param {string} $id - ID of new context 108/// @param {string} $id - ID of new context
107/// @param {any} $data [()] - Data that belongs to the context 109/// @param {any} $data [()] - Data that belongs to the context
108/// 110///
109@mixin iro-context-push($stack-id, $id, $data: ()) { 111@mixin push($stack-id, $id, $data: ()) {
110 $noop: iro-context-push($stack-id, $id, $data); 112 $noop: push($stack-id, $id, $data);
111} 113}
112 114
113/// 115///
@@ -119,15 +121,15 @@ $iro-context-stacks: ();
119/// 121///
120/// @return {list} A list with two items: 1 = context id, 2 = context data 122/// @return {list} A list with two items: 1 = context id, 2 = context data
121/// 123///
122@function iro-context-push($stack-id, $id, $data: ()) { 124@function push($stack-id, $id, $data: ()) {
123 @if not map-has-key($iro-context-stacks, $stack-id) { 125 @if not map-has-key($stacks, $stack-id) {
124 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 126 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
125 } 127 }
126 128
127 $context: $id $data; 129 $context: $id $data;
128 $context-stack: map-get($iro-context-stacks, $stack-id); 130 $context-stack: map-get($stacks, $stack-id);
129 $context-stack: append($context-stack, $context); 131 $context-stack: append($context-stack, $context);
130 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; 132 $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global;
131 133
132 @return $context; 134 @return $context;
133} 135}
@@ -139,8 +141,8 @@ $iro-context-stacks: ();
139/// 141///
140/// @throw If context stack doesn't exist 142/// @throw If context stack doesn't exist
141/// 143///
142@mixin iro-context-pop($stack-id) { 144@mixin pop($stack-id) {
143 $noop: iro-context-pop($stack-id); 145 $noop: pop($stack-id);
144} 146}
145 147
146/// 148///
@@ -150,12 +152,12 @@ $iro-context-stacks: ();
150/// 152///
151/// @return {list} A list with two items: 1 = context id, 2 = context data 153/// @return {list} A list with two items: 1 = context id, 2 = context data
152/// 154///
153@function iro-context-pop($stack-id) { 155@function pop($stack-id) {
154 @if not map-has-key($iro-context-stacks, $stack-id) { 156 @if not map-has-key($stacks, $stack-id) {
155 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 157 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
156 } 158 }
157 159
158 $context-stack: map-get($iro-context-stacks, $stack-id); 160 $context-stack: map-get($stacks, $stack-id);
159 161
160 @if length($context-stack) == 0 { 162 @if length($context-stack) == 0 {
161 @error 'Context stack "#{inspect($stack-id)}" is already empty.'; 163 @error 'Context stack "#{inspect($stack-id)}" is already empty.';
@@ -166,10 +168,10 @@ $iro-context-stacks: ();
166 @if length($context-stack) == 1 { 168 @if length($context-stack) == 1 {
167 $context-stack: (); 169 $context-stack: ();
168 } @else { 170 } @else {
169 $context-stack: iro-list-slice($context-stack, 1, length($context-stack) - 1); 171 $context-stack: functions.list-slice($context-stack, 1, length($context-stack) - 1);
170 } 172 }
171 173
172 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; 174 $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global;
173 175
174 @return $popped-context; 176 @return $popped-context;
175} 177}
@@ -183,10 +185,16 @@ $iro-context-stacks: ();
183/// 185///
184/// @throw If assertion fails 186/// @throw If assertion fails
185/// 187///
186@mixin iro-context-assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) { 188@function assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) {
187 @if not iro-context-stack-contains($stack-id, $context-ids, $check-head-only) { 189 @if not contains($stack-id, $context-ids, $check-head-only) {
188 @error 'Must be called inside of contexts "#{inspect($context-ids)}".'; 190 @error 'Must be called inside of contexts "#{inspect($context-ids)}".';
189 } 191 }
192
193 @return null;
194}
195
196@mixin assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) {
197 $noop: assert-stack-must-contain($stack-id, $context-ids, $check-head-only)
190} 198}
191 199
192/// 200///
@@ -198,10 +206,16 @@ $iro-context-stacks: ();
198/// 206///
199/// @throw If assertion fails 207/// @throw If assertion fails
200/// 208///
201@mixin iro-context-assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) { 209@function assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) {
202 @if iro-context-stack-contains($stack-id, $context-ids, $check-head-only) { 210 @if contains($stack-id, $context-ids, $check-head-only) {
203 @error 'Must not be called inside of contexts "#{inspect($context-ids)}".'; 211 @error 'Must not be called inside of contexts "#{inspect($context-ids)}".';
204 } 212 }
213
214 @return null;
215}
216
217@mixin assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) {
218 $noop: assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only);
205} 219}
206 220
207/// 221///
@@ -213,12 +227,12 @@ $iro-context-stacks: ();
213/// 227///
214/// @return {bool} `true` if the context stack contains one of the context IDs, otherwise `false` 228/// @return {bool} `true` if the context stack contains one of the context IDs, otherwise `false`
215/// 229///
216@function iro-context-stack-contains($stack-id, $context-ids, $check-head-only: false) { 230@function contains($stack-id, $context-ids, $check-head-only: false) {
217 @if not map-has-key($iro-context-stacks, $stack-id) { 231 @if not map-has-key($stacks, $stack-id) {
218 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 232 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
219 } 233 }
220 234
221 $context-stack: map-get($iro-context-stacks, $stack-id); 235 $context-stack: map-get($stacks, $stack-id);
222 236
223 @if length($context-stack) == 0 { 237 @if length($context-stack) == 0 {
224 @return false; 238 @return false;
@@ -247,10 +261,16 @@ $iro-context-stacks: ();
247/// 261///
248/// @throw If assertion fails 262/// @throw If assertion fails
249/// 263///
250@mixin iro-context-assert-stack-count($stack-id, $max-count) { 264@function assert-stack-count($stack-id, $max-count) {
251 @if iro-context-stack-count($stack-id) > $max-count { 265 @if count($stack-id) > $max-count {
252 @error 'Maximum context count "#{inspect($max-count)}" exceeded.'; 266 @error 'Maximum context count "#{inspect($max-count)}" exceeded.';
253 } 267 }
268
269 @return null;
270}
271
272@mixin assert-stack-count($stack-id, $max-count) {
273 $noop: assert-stack-count($stack-id, $max-count);
254} 274}
255 275
256/// 276///
@@ -260,12 +280,12 @@ $iro-context-stacks: ();
260/// 280///
261/// @return {number} The number of contexts 281/// @return {number} The number of contexts
262/// 282///
263@function iro-context-stack-count($stack-id) { 283@function count($stack-id) {
264 @if not map-has-key($iro-context-stacks, $stack-id) { 284 @if not map-has-key($stacks, $stack-id) {
265 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 285 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
266 } 286 }
267 287
268 $context-stack: map-get($iro-context-stacks, $stack-id); 288 $context-stack: map-get($stacks, $stack-id);
269 289
270 @return length($context-stack); 290 @return length($context-stack);
271} 291}
@@ -278,12 +298,12 @@ $iro-context-stacks: ();
278/// 298///
279/// @return {list} Null if no match was found, otherwise a list with two items: 1. context ID, 2. context data. 299/// @return {list} Null if no match was found, otherwise a list with two items: 1. context ID, 2. context data.
280/// 300///
281@function iro-context-get($stack-id, $type-or-level: null) { 301@function get($stack-id, $type-or-level: null) {
282 @if not map-has-key($iro-context-stacks, $stack-id) { 302 @if not map-has-key($stacks, $stack-id) {
283 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 303 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
284 } 304 }
285 305
286 $context-stack: map-get($iro-context-stacks, $stack-id); 306 $context-stack: map-get($stacks, $stack-id);
287 307
288 @if length($context-stack) == 0 { 308 @if length($context-stack) == 0 {
289 @return null; 309 @return null;
diff --git a/src/_easing.scss b/src/_easing.scss
index a39f317..8b06632 100644
--- a/src/_easing.scss
+++ b/src/_easing.scss
@@ -14,32 +14,32 @@
14/// 14///
15/// @access private 15/// @access private
16/// 16///
17$iro-cubic-bezier-sample-pool: (); 17$cubic-bezier-sample-pool: ();
18 18
19/// 19///
20/// Sample pool size for cubic bezier calculations. 20/// Sample pool size for cubic bezier calculations.
21/// 21///
22$iro-cubic-bezier-sample-pool-size: 10 !default; 22$cubic-bezier-sample-pool-size: 10 !default;
23 23
24/// 24///
25/// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations. 25/// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations.
26/// 26///
27$iro-cubic-bezier-newton-min-slope: 0.001 !default; 27$cubic-bezier-newton-min-slope: 0.001 !default;
28 28
29/// 29///
30/// Number of iterations of the Newton-Raphson method. 30/// Number of iterations of the Newton-Raphson method.
31/// 31///
32$iro-cubic-bezier-newton-iters: 4 !default; 32$cubic-bezier-newton-iters: 4 !default;
33 33
34/// 34///
35/// Precision of the subdivision method for cubic bezier calculations. 35/// Precision of the subdivision method for cubic bezier calculations.
36/// 36///
37$iro-cubic-bezier-subdiv-precision: 0.0000001 !default; 37$cubic-bezier-subdiv-precision: 0.0000001 !default;
38 38
39/// 39///
40/// Maximum iterations of the subdivision method for cubic bezier calculations. 40/// Maximum iterations of the subdivision method for cubic bezier calculations.
41/// 41///
42$iro-cubic-bezier-subdiv-max-iters: 10 !default; 42$cubic-bezier-subdiv-max-iters: 10 !default;
43 43
44/// 44///
45/// A cubic bezier function identical to the CSS cubic-bezier function. 45/// A cubic bezier function identical to the CSS cubic-bezier function.
@@ -52,7 +52,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
52/// 52///
53/// @return {number} 53/// @return {number}
54/// 54///
55@function iro-cubic-bezier($x1, $y1, $x2, $y2, $x) { 55@function cubic-bezier($x1, $y1, $x2, $y2, $x) {
56 // 56 //
57 // Cover simple cases 57 // Cover simple cases
58 // 58 //
@@ -73,41 +73,41 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
73 73
74 $sample-pool-key: $x1 + '_' + $x2; 74 $sample-pool-key: $x1 + '_' + $x2;
75 75
76 @if not map-has-key($iro-cubic-bezier-sample-pool, $sample-pool-key) { 76 @if not map-has-key($cubic-bezier-sample-pool, $sample-pool-key) {
77 $samples: (); 77 $samples: ();
78 78
79 @for $i from 0 through $iro-cubic-bezier-sample-pool-size { 79 @for $i from 0 through $cubic-bezier-sample-pool-size {
80 $samples: append($samples, iro-cubic-bezier-func($x1, $x2, math.div($i, $iro-cubic-bezier-sample-pool-size))); 80 $samples: append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size)));
81 } 81 }
82 82
83 $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; 83 $cubic-bezier-sample-pool: map-merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global;
84 } 84 }
85 85
86 // 86 //
87 // Calculate cubic bezier 87 // Calculate cubic bezier
88 // 88 //
89 89
90 @return iro-cubic-bezier-func($y1, $y2, iro-cubic-bezier-t-for-x($x1, $x2, $x)); 90 @return cubic-bezier-func($y1, $y2, cubic-bezier-t-for-x($x1, $x2, $x));
91} 91}
92 92
93/// 93///
94/// @access private 94/// @access private
95/// 95///
96@function iro-cubic-bezier-func-a($p1, $p2) { 96@function cubic-bezier-func-a($p1, $p2) {
97 @return 1 - 3 * $p2 + 3 * $p1; 97 @return 1 - 3 * $p2 + 3 * $p1;
98} 98}
99 99
100/// 100///
101/// @access private 101/// @access private
102/// 102///
103@function iro-cubic-bezier-func-b($p1, $p2) { 103@function cubic-bezier-func-b($p1, $p2) {
104 @return 3 * $p2 - 6 * $p1; 104 @return 3 * $p2 - 6 * $p1;
105} 105}
106 106
107/// 107///
108/// @access private 108/// @access private
109/// 109///
110@function iro-cubic-bezier-func-c($p1) { 110@function cubic-bezier-func-c($p1) {
111 @return 3 * $p1; 111 @return 3 * $p1;
112} 112}
113 113
@@ -116,8 +116,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
116/// 116///
117/// @access private 117/// @access private
118/// 118///
119@function iro-cubic-bezier-func($p1, $p2, $t) { 119@function cubic-bezier-func($p1, $p2, $t) {
120 @return ((iro-cubic-bezier-func-a($p1, $p2) * $t + iro-cubic-bezier-func-b($p1, $p2)) * $t + iro-cubic-bezier-func-c($p1)) * $t; 120 @return ((cubic-bezier-func-a($p1, $p2) * $t + cubic-bezier-func-b($p1, $p2)) * $t + cubic-bezier-func-c($p1)) * $t;
121} 121}
122 122
123/// 123///
@@ -125,8 +125,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
125/// 125///
126/// @access private 126/// @access private
127/// 127///
128@function iro-cubic-bezier-func-slope($p1, $p2, $t) { 128@function cubic-bezier-func-slope($p1, $p2, $t) {
129 @return 3 * iro-cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * iro-cubic-bezier-func-b($p1, $p2) * $t + iro-cubic-bezier-func-c($p1); 129 @return 3 * cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * cubic-bezier-func-b($p1, $p2) * $t + cubic-bezier-func-c($p1);
130} 130}
131 131
132/// 132///
@@ -134,15 +134,15 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
134/// 134///
135/// @access private 135/// @access private
136/// 136///
137@function iro-cubic-bezier-newton-raphson($x1, $x2, $x, $t) { 137@function cubic-bezier-newton-raphson($x1, $x2, $x, $t) {
138 @for $i from 1 through $iro-cubic-bezier-newton-iters { 138 @for $i from 1 through $cubic-bezier-newton-iters {
139 $cur-slope: iro-cubic-bezier-func-slope($x1, $x2, $t); 139 $cur-slope: cubic-bezier-func-slope($x1, $x2, $t);
140 140
141 @if $cur-slope == 0 { 141 @if $cur-slope == 0 {
142 @return $t; 142 @return $t;
143 } 143 }
144 144
145 $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; 145 $cur-x: cubic-bezier-func($x1, $x2, $t) - $x;
146 $t: $t - math.div($cur-x, $cur-slope); 146 $t: $t - math.div($cur-x, $cur-slope);
147 } 147 }
148 148
@@ -154,14 +154,14 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
154/// 154///
155/// @access private 155/// @access private
156/// 156///
157@function iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) { 157@function cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) {
158 $cur-x: 0; 158 $cur-x: 0;
159 $cur-t: 0; 159 $cur-t: 0;
160 $i: 0; 160 $i: 0;
161 161
162 @while $i < $iro-cubic-bezier-subdiv-max-iters { 162 @while $i < $cubic-bezier-subdiv-max-iters {
163 $cur-t: $a + ($b - $a) / 2; 163 $cur-t: $a + ($b - $a) / 2;
164 $cur-x: iro-cubic-bezier-func($x1, $x2, $cur-t) - $x; 164 $cur-x: cubic-bezier-func($x1, $x2, $cur-t) - $x;
165 165
166 @if $cur-x > 0 { 166 @if $cur-x > 0 {
167 $b: $cur-t; 167 $b: $cur-t;
@@ -169,7 +169,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
169 $a: $cur-t; 169 $a: $cur-t;
170 } 170 }
171 171
172 @if abs($cur-x) < $iro-cubic-bezier-subdiv-precision { 172 @if abs($cur-x) < $cubic-bezier-subdiv-precision {
173 @return $cur-t; 173 @return $cur-t;
174 } 174 }
175 } 175 }
@@ -182,30 +182,30 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
182/// 182///
183/// @access private 183/// @access private
184/// 184///
185@function iro-cubic-bezier-t-for-x($x1, $x2, $x) { 185@function cubic-bezier-t-for-x($x1, $x2, $x) {
186 $sample-pool-key: $x1 + '_' + $x2; 186 $sample-pool-key: $x1 + '_' + $x2;
187 $samples: map-get($iro-cubic-bezier-sample-pool, $sample-pool-key); 187 $samples: map-get($cubic-bezier-sample-pool, $sample-pool-key);
188 188
189 $intv-start: 0; 189 $intv-start: 0;
190 $cur-sample: 1; 190 $cur-sample: 1;
191 $last-sample: $iro-cubic-bezier-sample-pool-size; 191 $last-sample: $cubic-bezier-sample-pool-size;
192 192
193 @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { 193 @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) {
194 $intv-start: $intv-start + math.div(1, $iro-cubic-bezier-sample-pool-size); 194 $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size);
195 $cur-sample: $cur-sample + 1; 195 $cur-sample: $cur-sample + 1;
196 } 196 }
197 $cur-sample: $cur-sample - 1; 197 $cur-sample: $cur-sample - 1;
198 198
199 $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); 199 $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample));
200 $guess-t: $intv-start + math.div($dist, $iro-cubic-bezier-sample-pool-size); 200 $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size);
201 201
202 $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); 202 $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t);
203 @if $init-slope >= $iro-cubic-bezier-newton-min-slope { 203 @if $init-slope >= $cubic-bezier-newton-min-slope {
204 @return iro-cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t); 204 @return cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t);
205 } @else if $init-slope == 0 { 205 } @else if $init-slope == 0 {
206 @return $guess-t; 206 @return $guess-t;
207 } @else { 207 } @else {
208 @return iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $iro-cubic-bezier-sample-pool-size); 208 @return cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $cubic-bezier-sample-pool-size);
209 } 209 }
210} 210}
211 211
@@ -216,8 +216,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
216/// 216///
217/// @return {number} 217/// @return {number}
218/// 218///
219@function iro-ease($x) { 219@function ease($x) {
220 @return iro-cubic-bezier(0.25, 0.1, 0.25, 1, $x); 220 @return cubic-bezier(0.25, 0.1, 0.25, 1, $x);
221} 221}
222 222
223/// 223///
@@ -227,8 +227,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
227/// 227///
228/// @return {number} 228/// @return {number}
229/// 229///
230@function iro-ease-in($x) { 230@function ease-in($x) {
231 @return iro-cubic-bezier(0.42, 0, 1, 1, $x); 231 @return cubic-bezier(0.42, 0, 1, 1, $x);
232} 232}
233 233
234/// 234///
@@ -238,8 +238,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
238/// 238///
239/// @return {number} 239/// @return {number}
240/// 240///
241@function iro-ease-out($x) { 241@function ease-out($x) {
242 @return iro-cubic-bezier(0, 0, 0.58, 1, $x); 242 @return cubic-bezier(0, 0, 0.58, 1, $x);
243} 243}
244 244
245/// 245///
@@ -249,8 +249,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
249/// 249///
250/// @return {number} 250/// @return {number}
251/// 251///
252@function iro-ease-in-out($x) { 252@function ease-in-out($x) {
253 @return iro-cubic-bezier(0.42, 0, 0.58, 1, $x); 253 @return cubic-bezier(0.42, 0, 0.58, 1, $x);
254} 254}
255 255
256/// 256///
@@ -260,8 +260,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
260/// 260///
261/// @return {number} 261/// @return {number}
262/// 262///
263@function iro-ease-in-sine($x) { 263@function ease-in-sine($x) {
264 @return iro-cubic-bezier(0.47, 0, 0.745, 0.715, $x); 264 @return cubic-bezier(0.47, 0, 0.745, 0.715, $x);
265} 265}
266 266
267/// 267///
@@ -271,8 +271,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
271/// 271///
272/// @return {number} 272/// @return {number}
273/// 273///
274@function iro-ease-out-sine($x) { 274@function ease-out-sine($x) {
275 @return iro-cubic-bezier(0.39, 0.575, 0.565, 1, $x); 275 @return cubic-bezier(0.39, 0.575, 0.565, 1, $x);
276} 276}
277 277
278/// 278///
@@ -282,8 +282,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
282/// 282///
283/// @return {number} 283/// @return {number}
284/// 284///
285@function iro-ease-in-out-sine($x) { 285@function ease-in-out-sine($x) {
286 @return iro-cubic-bezier(0.445, 0.05, 0.55, 0.95, $x); 286 @return cubic-bezier(0.445, 0.05, 0.55, 0.95, $x);
287} 287}
288 288
289/// 289///
@@ -293,8 +293,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
293/// 293///
294/// @return {number} 294/// @return {number}
295/// 295///
296@function iro-ease-in-quad($x) { 296@function ease-in-quad($x) {
297 @return iro-cubic-bezier(0.55, 0.085, 0.68, 0.53, $x); 297 @return cubic-bezier(0.55, 0.085, 0.68, 0.53, $x);
298} 298}
299 299
300/// 300///
@@ -304,8 +304,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
304/// 304///
305/// @return {number} 305/// @return {number}
306/// 306///
307@function iro-ease-out-quad($x) { 307@function ease-out-quad($x) {
308 @return iro-cubic-bezier(0.25, 0.46, 0.45, 0.94, $x); 308 @return cubic-bezier(0.25, 0.46, 0.45, 0.94, $x);
309} 309}
310 310
311/// 311///
@@ -315,8 +315,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
315/// 315///
316/// @return {number} 316/// @return {number}
317/// 317///
318@function iro-ease-in-out-quad($x) { 318@function ease-in-out-quad($x) {
319 @return iro-cubic-bezier(0.455, 0.03, 0.515, 0.955, $x); 319 @return cubic-bezier(0.455, 0.03, 0.515, 0.955, $x);
320} 320}
321 321
322/// 322///
@@ -326,8 +326,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
326/// 326///
327/// @return {number} 327/// @return {number}
328/// 328///
329@function iro-ease-in-cubic($x) { 329@function ease-in-cubic($x) {
330 @return iro-cubic-bezier(0.55, 0.055, 0.675, 0.19, $x); 330 @return cubic-bezier(0.55, 0.055, 0.675, 0.19, $x);
331} 331}
332 332
333/// 333///
@@ -337,8 +337,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
337/// 337///
338/// @return {number} 338/// @return {number}
339/// 339///
340@function iro-ease-out-cubic($x) { 340@function ease-out-cubic($x) {
341 @return iro-cubic-bezier(0.215, 0.61, 0.355, 1, $x); 341 @return cubic-bezier(0.215, 0.61, 0.355, 1, $x);
342} 342}
343 343
344/// 344///
@@ -348,8 +348,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
348/// 348///
349/// @return {number} 349/// @return {number}
350/// 350///
351@function iro-ease-in-out-cubic($x) { 351@function ease-in-out-cubic($x) {
352 @return iro-cubic-bezier(0.645, 0.045, 0.355, 1, $x); 352 @return cubic-bezier(0.645, 0.045, 0.355, 1, $x);
353} 353}
354 354
355/// 355///
@@ -359,8 +359,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
359/// 359///
360/// @return {number} 360/// @return {number}
361/// 361///
362@function iro-ease-in-quart($x) { 362@function ease-in-quart($x) {
363 @return iro-cubic-bezier(0.895, 0.03, 0.685, 0.22, $x); 363 @return cubic-bezier(0.895, 0.03, 0.685, 0.22, $x);
364} 364}
365 365
366/// 366///
@@ -370,8 +370,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
370/// 370///
371/// @return {number} 371/// @return {number}
372/// 372///
373@function iro-ease-out-quart($x) { 373@function ease-out-quart($x) {
374 @return iro-cubic-bezier(0.165, 0.84, 0.44, 1, $x); 374 @return cubic-bezier(0.165, 0.84, 0.44, 1, $x);
375} 375}
376 376
377/// 377///
@@ -381,8 +381,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
381/// 381///
382/// @return {number} 382/// @return {number}
383/// 383///
384@function iro-ease-in-out-quart($x) { 384@function ease-in-out-quart($x) {
385 @return iro-cubic-bezier(0.77, 0, 0.175, 1, $x); 385 @return cubic-bezier(0.77, 0, 0.175, 1, $x);
386} 386}
387 387
388/// 388///
@@ -392,8 +392,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
392/// 392///
393/// @return {number} 393/// @return {number}
394/// 394///
395@function iro-ease-in-quint($x) { 395@function ease-in-quint($x) {
396 @return iro-cubic-bezier(0.755, 0.05, 0.855, 0.06, $x); 396 @return cubic-bezier(0.755, 0.05, 0.855, 0.06, $x);
397} 397}
398 398
399/// 399///
@@ -403,8 +403,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
403/// 403///
404/// @return {number} 404/// @return {number}
405/// 405///
406@function iro-ease-out-quint($x) { 406@function ease-out-quint($x) {
407 @return iro-cubic-bezier(0.23, 1, 0.32, 1, $x); 407 @return cubic-bezier(0.23, 1, 0.32, 1, $x);
408} 408}
409 409
410/// 410///
@@ -414,8 +414,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
414/// 414///
415/// @return {number} 415/// @return {number}
416/// 416///
417@function iro-ease-in-out-quint($x) { 417@function ease-in-out-quint($x) {
418 @return iro-cubic-bezier(0.86, 0, 0.07, 1, $x); 418 @return cubic-bezier(0.86, 0, 0.07, 1, $x);
419} 419}
420 420
421/// 421///
@@ -425,8 +425,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
425/// 425///
426/// @return {number} 426/// @return {number}
427/// 427///
428@function iro-ease-in-expo($x) { 428@function ease-in-expo($x) {
429 @return iro-cubic-bezier(0.95, 0.05, 0.795, 0.035, $x); 429 @return cubic-bezier(0.95, 0.05, 0.795, 0.035, $x);
430} 430}
431 431
432/// 432///
@@ -436,8 +436,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
436/// 436///
437/// @return {number} 437/// @return {number}
438/// 438///
439@function iro-ease-out-expo($x) { 439@function ease-out-expo($x) {
440 @return iro-cubic-bezier(0.19, 1, 0.22, 1, $x); 440 @return cubic-bezier(0.19, 1, 0.22, 1, $x);
441} 441}
442 442
443/// 443///
@@ -447,8 +447,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
447/// 447///
448/// @return {number} 448/// @return {number}
449/// 449///
450@function iro-ease-in-out-expo($x) { 450@function ease-in-out-expo($x) {
451 @return iro-cubic-bezier(1, 0, 0, 1, $x); 451 @return cubic-bezier(1, 0, 0, 1, $x);
452} 452}
453 453
454/// 454///
@@ -458,8 +458,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
458/// 458///
459/// @return {number} 459/// @return {number}
460/// 460///
461@function iro-ease-in-circ($x) { 461@function ease-in-circ($x) {
462 @return iro-cubic-bezier(0.6, 0.04, 0.98, 0.335, $x); 462 @return cubic-bezier(0.6, 0.04, 0.98, 0.335, $x);
463} 463}
464 464
465/// 465///
@@ -469,8 +469,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
469/// 469///
470/// @return {number} 470/// @return {number}
471/// 471///
472@function iro-ease-out-circ($x) { 472@function ease-out-circ($x) {
473 @return iro-cubic-bezier(0.075, 0.82, 0.165, 1, $x); 473 @return cubic-bezier(0.075, 0.82, 0.165, 1, $x);
474} 474}
475 475
476/// 476///
@@ -480,6 +480,6 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
480/// 480///
481/// @return {number} 481/// @return {number}
482/// 482///
483@function iro-ease-in-out-circ($x) { 483@function ease-in-out-circ($x) {
484 @return iro-cubic-bezier(0.785, 0.135, 0.15, 0.86, $x); 484 @return cubic-bezier(0.785, 0.135, 0.15, 0.86, $x);
485} 485}
diff --git a/src/_functions.scss b/src/_functions.scss
index 92ee262..d091afa 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -10,6 +10,7 @@
10//// 10////
11 11
12@use 'sass:math'; 12@use 'sass:math';
13@use './vars';
13 14
14/// 15///
15/// Replace a substring with a new string. 16/// Replace a substring with a new string.
@@ -20,11 +21,11 @@
20/// 21///
21/// @return {string} A string with all instances of $search replaced with $replace 22/// @return {string} A string with all instances of $search replaced with $replace
22/// 23///
23@function iro-str-replace($string, $search, $replace) { 24@function str-replace($string, $search, $replace) {
24 $index: str-index($string, $search); 25 $index: str-index($string, $search);
25 26
26 @if $index { 27 @if $index {
27 @return str-slice($string, 1, $index - 1) + $replace + iro-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 28 @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
28 } 29 }
29 30
30 @return $string; 31 @return $string;
@@ -38,11 +39,11 @@
38/// 39///
39/// @return {string} 40/// @return {string}
40/// 41///
41@function iro-str-implode($list, $glue: '') { 42@function str-implode($list, $glue: '') {
42 $result: ''; 43 $result: '';
43 44
44 @each $item in $list { 45 @each $item in $list {
45 $result: $result + if(length($item) > 1, iro-str-implode($item, $glue), $item); 46 $result: $result + if(length($item) > 1, str-implode($item, $glue), $item);
46 47
47 @if $item != nth($list, length($list)) { 48 @if $item != nth($list, length($list)) {
48 $result: $result + $glue; 49 $result: $result + $glue;
@@ -61,7 +62,7 @@
61/// 62///
62/// @return {list} A slice of the list 63/// @return {list} A slice of the list
63/// 64///
64@function iro-list-slice($list, $start: 1, $end: length($list)) { 65@function list-slice($list, $start: 1, $end: length($list)) {
65 $result: (); 66 $result: ();
66 67
67 @for $i from $start through $end { 68 @for $i from $start through $end {
@@ -81,7 +82,7 @@
81/// 82///
82/// @return {list} A list with $value at the beginning, followed by the other items 83/// @return {list} A list with $value at the beginning, followed by the other items
83/// 84///
84@function iro-list-prepend($list, $value) { 85@function list-prepend($list, $value) {
85 $result: append((), $value, list-separator($list)); 86 $result: append((), $value, list-separator($list));
86 87
87 @if length($list) > 0 { 88 @if length($list) > 0 {
@@ -103,13 +104,13 @@
103/// 104///
104/// @return {list} Sorted list 105/// @return {list} Sorted list
105/// 106///
106@function iro-quicksort($l, $left: 1, $right: length($l)) { 107@function quicksort($l, $left: 1, $right: length($l)) {
107 @if $left < $right { 108 @if $left < $right {
108 $pvr: iro-quicksort-partition($l, $left, $right); 109 $pvr: quicksort-partition($l, $left, $right);
109 $pivot: nth($pvr, 1); 110 $pivot: nth($pvr, 1);
110 $l: nth($pvr, 2); 111 $l: nth($pvr, 2);
111 $l: iro-quicksort($l, $left, $pivot); 112 $l: quicksort($l, $left, $pivot);
112 $l: iro-quicksort($l, $pivot + 1, $right); 113 $l: quicksort($l, $pivot + 1, $right);
113 } 114 }
114 115
115 @return $l; 116 @return $l;
@@ -118,7 +119,7 @@
118/// 119///
119/// @access private 120/// @access private
120/// 121///
121@function iro-quicksort-partition($l, $left, $right) { 122@function quicksort-partition($l, $left, $right) {
122 $start: true; 123 $start: true;
123 $i: $left; 124 $i: $left;
124 $j: $right - 1; 125 $j: $right - 1;
@@ -161,7 +162,7 @@
161/// 162///
162/// @return {any} Either the value assigned to $key or $default 163/// @return {any} Either the value assigned to $key or $default
163/// 164///
164@function iro-map-get-default($map, $key, $default) { 165@function map-get-default($map, $key, $default) {
165 @return if(map-has-key($map, $key), map-get($map, $key), $default); 166 @return if(map-has-key($map, $key), map-get($map, $key), $default);
166} 167}
167 168
@@ -174,7 +175,7 @@
174/// 175///
175/// @return {any} Either the value assigned to $key or $default 176/// @return {any} Either the value assigned to $key or $default
176/// 177///
177@function iro-map-get-deep($map, $key, $default: null) { 178@function map-get-deep($map, $key, $default: null) {
178 $value: null; 179 $value: null;
179 180
180 @if type-of($key) == list { 181 @if type-of($key) == list {
@@ -206,7 +207,7 @@
206/// 207///
207/// @return {map} The result of a recursive merge of $map1 and $map2 208/// @return {map} The result of a recursive merge of $map1 and $map2
208/// 209///
209@function iro-map-merge-recursive($map1, $map2) { 210@function map-merge-recursive($map1, $map2) {
210 @if type-of($map1) != map or type-of($map2) != map { 211 @if type-of($map1) != map or type-of($map2) != map {
211 @error 'Two maps expected.'; 212 @error 'Two maps expected.';
212 } 213 }
@@ -215,7 +216,7 @@
215 216
216 @each $key, $value in $map2 { 217 @each $key, $value in $map2 {
217 @if type-of(map-get($result, $key)) == map and type-of($value) == map { 218 @if type-of(map-get($result, $key)) == map and type-of($value) == map {
218 $result: map-merge($result, ($key: iro-map-merge-recursive(map-get($result, $key), $value))); 219 $result: map-merge($result, ($key: map-merge-recursive(map-get($result, $key), $value)));
219 } @else { 220 } @else {
220 $result: map-merge($result, ($key: $value)); 221 $result: map-merge($result, ($key: $value));
221 } 222 }
@@ -231,16 +232,16 @@
231/// 232///
232/// @return {string} 233/// @return {string}
233/// 234///
234@function iro-map-print($map) { 235@function map-print($map) {
235 $output: ''; 236 $output: '';
236 237
237 @each $key, $value in $map { 238 @each $key, $value in $map {
238 $value-str: ''; 239 $value-str: '';
239 240
240 @if type-of($value) == map { 241 @if type-of($value) == map {
241 $value-str: '[ ' + iro-map-print($value) + ' ]'; 242 $value-str: '[ ' + map-print($value) + ' ]';
242 } @else if type-of($value) == list { 243 } @else if type-of($value) == list {
243 $value-str: '[ ' + iro-str-implode($value, ', ') + ' ]'; 244 $value-str: '[ ' + str-implode($value, ', ') + ' ]';
244 } @else if type-of($value) == string { 245 } @else if type-of($value) == string {
245 $value-str: '\'' + $value + '\''; 246 $value-str: '\'' + $value + '\'';
246 } @else { 247 } @else {
@@ -265,7 +266,7 @@
265/// 266///
266/// @return {bool} `true` if the selector matches at least one suffix, otherwise `false`. 267/// @return {bool} `true` if the selector matches at least one suffix, otherwise `false`.
267/// 268///
268@function iro-selector-suffix-match($selector, $suffixes) { 269@function selector-suffix-match($selector, $suffixes) {
269 $match: true; 270 $match: true;
270 271
271 @each $sel in $selector { 272 @each $sel in $selector {
@@ -304,19 +305,19 @@
304/// 305///
305/// @return {number} Unit-less variable 306/// @return {number} Unit-less variable
306/// 307///
307@function iro-strip-unit($n) { 308@function strip-unit($n) {
308 @return math.div($n, $n * 0 + 1); 309 @return math.div($n, $n * 0 + 1);
309} 310}
310 311
311/// 312///
312/// Convert a pixel value to a rem value. 313/// Convert a pixel value to a rem value.
313/// 314///
314/// @param {number} $size - Pixel value to convert 315/// @param {number} $size - Pixel value to convert
315/// @param {number} $base [$iro-root-size] - Reference base font size used for conversion 316/// @param {number} $base [vars.$root-size] - Reference base font size used for conversion
316/// 317///
317/// @return {number} Pixel value converted to rem 318/// @return {number} Pixel value converted to rem
318/// 319///
319@function iro-px-to-rem($size, $base: $iro-root-size) { 320@function px-to-rem($size, $base: vars.$root-size) {
320 @return math.div($size, $base) * 1rem; 321 @return math.div($size, $base) * 1rem;
321} 322}
322 323
@@ -325,6 +326,6 @@
325/// 326///
326/// @content 327/// @content
327/// 328///
328@mixin iro-execute { 329@mixin execute {
329 @content; 330 @content;
330} 331}
diff --git a/src/_gradients.scss b/src/_gradients.scss
index 657efa2..6575482 100644
--- a/src/_gradients.scss
+++ b/src/_gradients.scss
@@ -17,6 +17,8 @@
17 17
18@use 'sass:math'; 18@use 'sass:math';
19@use 'sass:meta'; 19@use 'sass:meta';
20@use './functions';
21@use './easing';
20 22
21/// 23///
22/// Number of intermediate color stops generated to achieve easing. 24/// Number of intermediate color stops generated to achieve easing.
@@ -24,7 +26,7 @@
24/// 26///
25/// @type number 27/// @type number
26/// 28///
27$iro-easing-gradient-steps: 10 !default; 29$easing-gradient-steps: 10 !default;
28 30
29/// 31///
30/// Generate a new easing background gradient. 32/// Generate a new easing background gradient.
@@ -44,7 +46,7 @@ $iro-easing-gradient-steps: 10 !default;
44/// 46///
45/// @example scss - A smoother linear gradient 47/// @example scss - A smoother linear gradient
46/// .background { 48/// .background {
47/// background-image: iro-easing-gradient( 49/// background-image: easing-gradient(
48/// linear, 50/// linear,
49/// to top, 51/// to top,
50/// #000, 52/// #000,
@@ -74,7 +76,7 @@ $iro-easing-gradient-steps: 10 !default;
74/// 76///
75/// @example scss - A smoother radial gradient 77/// @example scss - A smoother radial gradient
76/// .background { 78/// .background {
77/// background-image: iro-easing-gradient( 79/// background-image: easing-gradient(
78/// radial, 80/// radial,
79/// 50em 16em at 0 0, 81/// 50em 16em at 0 0,
80/// #000, 82/// #000,
@@ -104,7 +106,7 @@ $iro-easing-gradient-steps: 10 !default;
104/// 106///
105/// @example scss - A smoother linear gradient with complex color positions 107/// @example scss - A smoother linear gradient with complex color positions
106/// .background { 108/// .background {
107/// background-image: iro-easing-gradient( 109/// background-image: easing-gradient(
108/// linear, 110/// linear,
109/// to top, 111/// to top,
110/// #000 20%, 112/// #000 20%,
@@ -132,9 +134,9 @@ $iro-easing-gradient-steps: 10 !default;
132/// ); 134/// );
133/// } 135/// }
134/// 136///
135@function iro-easing-gradient($type, $dir, $stop, $stops...) { 137@function easing-gradient($type, $dir, $stop, $stops...) {
136 $pos-template: null; 138 $pos-template: null;
137 $stops: iro-list-prepend($stops, $stop); 139 $stops: functions.list-prepend($stops, $stop);
138 140
139 $last-positioned-stop: 1; 141 $last-positioned-stop: 1;
140 $generated-stops: (); 142 $generated-stops: ();
@@ -147,7 +149,7 @@ $iro-easing-gradient-steps: 10 !default;
147 $stop: nth($stops, $i); 149 $stop: nth($stops, $i);
148 150
149 @if $i == 1 { 151 @if $i == 1 {
150 @if not iro-easing-gradient-is-color-stop($stop) { 152 @if not easing-gradient-is-color-stop($stop) {
151 @error 'The first color stop argument must be a color stop.'; 153 @error 'The first color stop argument must be a color stop.';
152 } 154 }
153 155
@@ -161,9 +163,9 @@ $iro-easing-gradient-steps: 10 !default;
161 $stops: set-nth($stops, $i, $stop); 163 $stops: set-nth($stops, $i, $stop);
162 } 164 }
163 165
164 $generated-stops: append($generated-stops, iro-str-implode($stop, ' ')); 166 $generated-stops: append($generated-stops, functions.str-implode($stop, ' '));
165 } @else if iro-easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) { 167 } @else if easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) {
166 @if not iro-easing-gradient-is-color-stop($stop) { 168 @if not easing-gradient-is-color-stop($stop) {
167 @error 'The last color stop argument must be a color stop.'; 169 @error 'The last color stop argument must be a color stop.';
168 } 170 }
169 171
@@ -194,19 +196,19 @@ $iro-easing-gradient-steps: 10 !default;
194 // the positions of all stops list items that are color stops. 196 // the positions of all stops list items that are color stops.
195 // 197 //
196 198
197 $interpolated-stops: iro-easing-gradient-interpolate-stop-positions( 199 $interpolated-stops: easing-gradient-interpolate-stop-positions(
198 nth($stops, $last-positioned-stop), 200 nth($stops, $last-positioned-stop),
199 iro-list-slice($stops, $last-positioned-stop + 1, $i - 1), 201 functions.list-slice($stops, $last-positioned-stop + 1, $i - 1),
200 $stop 202 $stop
201 ); 203 );
202 204
203 $new-stops: join( 205 $new-stops: join(
204 iro-list-slice($stops, 1, $last-positioned-stop), 206 functions.list-slice($stops, 1, $last-positioned-stop),
205 $interpolated-stops 207 $interpolated-stops
206 ); 208 );
207 $new-stops: join( 209 $new-stops: join(
208 $new-stops, 210 $new-stops,
209 iro-list-slice($stops, $i) 211 functions.list-slice($stops, $i)
210 ); 212 );
211 $stops: $new-stops; 213 $stops: $new-stops;
212 } 214 }
@@ -225,13 +227,13 @@ $iro-easing-gradient-steps: 10 !default;
225 $prev-stop: nth($stops, $j - 1); 227 $prev-stop: nth($stops, $j - 1);
226 $next-stop: nth($stops, $j); 228 $next-stop: nth($stops, $j);
227 229
228 @if not iro-easing-gradient-is-color-stop($next-stop) { 230 @if not easing-gradient-is-color-stop($next-stop) {
229 $j: $j + 1; 231 $j: $j + 1;
230 232
231 $easing: $next-stop; 233 $easing: $next-stop;
232 $next-stop: nth($stops, $j); 234 $next-stop: nth($stops, $j);
233 235
234 @if not iro-easing-gradient-is-color-stop($next-stop) { 236 @if not easing-gradient-is-color-stop($next-stop) {
235 @error 'There can be at most one interpolation hint between to color stops.'; 237 @error 'There can be at most one interpolation hint between to color stops.';
236 } 238 }
237 } 239 }
@@ -245,16 +247,16 @@ $iro-easing-gradient-steps: 10 !default;
245 $easing-args: (); 247 $easing-args: ();
246 248
247 @if type-of($easing) == list { 249 @if type-of($easing) == list {
248 $easing-args: iro-list-slice($easing, 2); 250 $easing-args: functions.list-slice($easing, 2);
249 $easing: nth($easing, 1); 251 $easing: nth($easing, 1);
250 } 252 }
251 253
252 $generated-stops: join( 254 $generated-stops: join(
253 $generated-stops, 255 $generated-stops,
254 iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args) 256 easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args)
255 ); 257 );
256 } @else { 258 } @else {
257 $generated-stops: append($generated-stops, iro-str-implode($next-stop, ' ')); 259 $generated-stops: append($generated-stops, functions.str-implode($next-stop, ' '));
258 } 260 }
259 261
260 $j: $j + 1; 262 $j: $j + 1;
@@ -265,30 +267,30 @@ $iro-easing-gradient-steps: 10 !default;
265 } 267 }
266 268
267 @if $type == 'linear' { 269 @if $type == 'linear' {
268 @return linear-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); 270 @return linear-gradient($dir, unquote(functions.str-implode($generated-stops, ', ')));
269 } @else if $type == 'radial' { 271 } @else if $type == 'radial' {
270 @return radial-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); 272 @return radial-gradient($dir, unquote(functions.str-implode($generated-stops, ', ')));
271 } @else { 273 } @else {
272 @error 'Invalid gradient type: #{inspect($type)}.'; 274 @error 'Invalid gradient type: #{inspect($type)}.';
273 } 275 }
274} 276}
275 277
276/// 278///
277/// Alias for iro-easing-gradient('linear',...) 279/// Alias for easing-gradient('linear',...)
278/// 280///
279/// @see {function} iro-easing-gradient 281/// @see {function} easing-gradient
280/// 282///
281@function iro-easing-linear-gradient($dir, $stop, $stops...) { 283@function easing-linear-gradient($dir, $stop, $stops...) {
282 @return iro-easing-gradient('linear', $dir, $stop, $stops...); 284 @return easing-gradient('linear', $dir, $stop, $stops...);
283} 285}
284 286
285/// 287///
286/// Alias for iro-easing-gradient('radial',...) 288/// Alias for easing-gradient('radial',...)
287/// 289///
288/// @see {function} iro-easing-gradient 290/// @see {function} easing-gradient
289/// 291///
290@function iro-easing-radial-gradient($dir, $stop, $stops...) { 292@function easing-radial-gradient($dir, $stop, $stops...) {
291 @return iro-easing-gradient('radial', $dir, $stop, $stops...); 293 @return easing-gradient('radial', $dir, $stop, $stops...);
292} 294}
293 295
294/// 296///
@@ -296,7 +298,7 @@ $iro-easing-gradient-steps: 10 !default;
296/// 298///
297/// @access private 299/// @access private
298/// 300///
299@function iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) { 301@function easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) {
300 @if $easing == 'steps' { 302 @if $easing == 'steps' {
301 $steps: null; 303 $steps: null;
302 $jump: null; 304 $jump: null;
@@ -309,16 +311,11 @@ $iro-easing-gradient-steps: 10 !default;
309 $jump: jump-end; 311 $jump: jump-end;
310 } 312 }
311 313
312 @return iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump); 314 @return easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump);
313 } @else { 315 } @else {
314 $easing-func: null; 316 $easing-func: get-function($easing, $module: easing);
315 @if function-exists('iro-' + $easing) {
316 $easing-func: get-function('iro-' + $easing);
317 } @else {
318 $easing-func: get-function($easing);
319 }
320 317
321 @return iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args); 318 @return easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args);
322 } 319 }
323} 320}
324 321
@@ -327,7 +324,7 @@ $iro-easing-gradient-steps: 10 !default;
327/// 324///
328/// @access private 325/// @access private
329/// 326///
330@function iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) { 327@function easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) {
331 $prev-stop-color: nth($prev-stop, 1); 328 $prev-stop-color: nth($prev-stop, 1);
332 $prev-stop-pos: nth($prev-stop, 2); 329 $prev-stop-pos: nth($prev-stop, 2);
333 $next-stop-color: nth($next-stop, 1); 330 $next-stop-color: nth($next-stop, 1);
@@ -342,8 +339,8 @@ $iro-easing-gradient-steps: 10 !default;
342 339
343 $distance: $next-stop-pos - $prev-stop-pos; 340 $distance: $next-stop-pos - $prev-stop-pos;
344 341
345 @for $i from 1 through $iro-easing-gradient-steps { 342 @for $i from 1 through $easing-gradient-steps {
346 $perc: math.div($i, $iro-easing-gradient-steps); 343 $perc: math.div($i, $easing-gradient-steps);
347 344
348 $color: null; 345 $color: null;
349 $pos: $prev-stop-pos + $perc * $distance; 346 $pos: $prev-stop-pos + $perc * $distance;
@@ -378,8 +375,8 @@ $iro-easing-gradient-steps: 10 !default;
378 $next-stop-pos: meta.calc-args($next-stop-pos); 375 $next-stop-pos: meta.calc-args($next-stop-pos);
379 } 376 }
380 377
381 @for $i from 1 through $iro-easing-gradient-steps { 378 @for $i from 1 through $easing-gradient-steps {
382 $perc: $i / $iro-easing-gradient-steps; 379 $perc: math.div($i, $easing-gradient-steps);
383 380
384 $color: null; 381 $color: null;
385 $pos: null; 382 $pos: null;
@@ -403,7 +400,7 @@ $iro-easing-gradient-steps: 10 !default;
403/// 400///
404/// @access private 401/// @access private
405/// 402///
406@function iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) { 403@function easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) {
407 $prev-stop-color: nth($prev-stop, 1); 404 $prev-stop-color: nth($prev-stop, 1);
408 $prev-stop-pos: nth($prev-stop, 2); 405 $prev-stop-pos: nth($prev-stop, 2);
409 $next-stop-color: nth($next-stop, 1); 406 $next-stop-color: nth($next-stop, 1);
@@ -419,18 +416,18 @@ $iro-easing-gradient-steps: 10 !default;
419 $distance: $next-stop-pos - $prev-stop-pos; 416 $distance: $next-stop-pos - $prev-stop-pos;
420 417
421 @for $i from 1 through $steps { 418 @for $i from 1 through $steps {
422 $x1: ($i - 1) / $steps; 419 $x1: math.div($i - 1, $steps);
423 $x2: $i / $steps; 420 $x2: math.div($i, $steps);
424 $y: null; 421 $y: null;
425 422
426 @if $jump == jump-start { 423 @if $jump == jump-start {
427 $y: $i / $steps; 424 $y: math.div($i, $steps);
428 } @else if $jump == jump-end { 425 } @else if $jump == jump-end {
429 $y: ($i - 1) / $steps; 426 $y: math.div($i - 1, $steps);
430 } @else if $jump == jump-both { 427 } @else if $jump == jump-both {
431 $y: $i / ($steps + 1); 428 $y: math.div($i, $steps + 1);
432 } @else if $jump == jump-none { 429 } @else if $jump == jump-none {
433 $y: ($i - 1) / ($steps - 1); 430 $y: math.div($i - 1, $steps - 1);
434 } @else { 431 } @else {
435 @error 'Invalid $jump: #{inspect($jump)}'; 432 @error 'Invalid $jump: #{inspect($jump)}';
436 } 433 }
@@ -474,18 +471,18 @@ $iro-easing-gradient-steps: 10 !default;
474 } 471 }
475 472
476 @for $i from 1 through $steps { 473 @for $i from 1 through $steps {
477 $x1: ($i - 1) / $steps; 474 $x1: math.div($i - 1, $steps);
478 $x2: $i / $steps; 475 $x2: math.div($i, $steps);
479 $y: null; 476 $y: null;
480 477
481 @if $jump == jump-start { 478 @if $jump == jump-start {
482 $y: $i / $steps; 479 $y: math.div($i, $steps);
483 } @else if $jump == jump-end { 480 } @else if $jump == jump-end {
484 $y: ($i - 1) / $steps; 481 $y: math.div($i - 1, $steps);
485 } @else if $jump == jump-both { 482 } @else if $jump == jump-both {
486 $y: $i / ($steps + 1); 483 $y: math.div($i, $steps + 1);
487 } @else if $jump == jump-none { 484 } @else if $jump == jump-none {
488 $y: ($i - 1) / ($steps - 1); 485 $y: math.div($i - 1, $steps - 1);
489 } @else { 486 } @else {
490 @error 'Invalid $jump: #{inspect($jump)}'; 487 @error 'Invalid $jump: #{inspect($jump)}';
491 } 488 }
@@ -515,14 +512,14 @@ $iro-easing-gradient-steps: 10 !default;
515/// 512///
516/// @access private 513/// @access private
517/// 514///
518@function iro-easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) { 515@function easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) {
519 $prev-stop-pos: nth($prev-stop, 2); 516 $prev-stop-pos: nth($prev-stop, 2);
520 $next-stop-pos: nth($next-stop, 2); 517 $next-stop-pos: nth($next-stop, 2);
521 518
522 $stops-num: 0; 519 $stops-num: 0;
523 @for $i from 1 through length($stops) { 520 @for $i from 1 through length($stops) {
524 $stop: nth($stops, $i); 521 $stop: nth($stops, $i);
525 @if iro-easing-gradient-is-color-stop($stop) { 522 @if easing-gradient-is-color-stop($stop) {
526 $stops-num: $stops-num + 1; 523 $stops-num: $stops-num + 1;
527 } 524 }
528 } 525 }
@@ -539,8 +536,8 @@ $iro-easing-gradient-steps: 10 !default;
539 536
540 @for $i from 1 through length($stops) { 537 @for $i from 1 through length($stops) {
541 $stop: nth($stops, $i); 538 $stop: nth($stops, $i);
542 @if iro-easing-gradient-is-color-stop($stop) { 539 @if easing-gradient-is-color-stop($stop) {
543 $pos: $prev-stop-pos + $distance / ($stops-num + 1) * $cur-stop-num; 540 $pos: $prev-stop-pos + math.div($distance, $stops-num + 1) * $cur-stop-num;
544 $stops: set-nth($stops, $i, $stop $pos); 541 $stops: set-nth($stops, $i, $stop $pos);
545 542
546 $cur-stop-num: $cur-stop-num + 1; 543 $cur-stop-num: $cur-stop-num + 1;
@@ -571,8 +568,8 @@ $iro-easing-gradient-steps: 10 !default;
571 568
572 @for $i from 1 through length($stops) { 569 @for $i from 1 through length($stops) {
573 $stop: nth($stops, $i); 570 $stop: nth($stops, $i);
574 @if iro-easing-gradient-is-color-stop($stop) { 571 @if easing-gradient-is-color-stop($stop) {
575 $perc: $cur-stop-num / ($stops-num + 1); 572 $perc: math.div($cur-stop-num, $stops-num + 1);
576 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc}); 573 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc});
577 $stops: set-nth($stops, $i, $stop $pos); 574 $stops: set-nth($stops, $i, $stop $pos);
578 575
@@ -589,8 +586,8 @@ $iro-easing-gradient-steps: 10 !default;
589/// 586///
590/// @access private 587/// @access private
591/// 588///
592@function iro-easing-gradient-is-color-stop($input) { 589@function easing-gradient-is-color-stop($input) {
593 @return (type-of($input) == color) or iro-easing-gradient-is-positioned-color-stop($input); 590 @return (type-of($input) == color) or easing-gradient-is-positioned-color-stop($input);
594} 591}
595 592
596/// 593///
@@ -598,6 +595,6 @@ $iro-easing-gradient-steps: 10 !default;
598/// 595///
599/// @access private 596/// @access private
600/// 597///
601@function iro-easing-gradient-is-positioned-color-stop($input) { 598@function easing-gradient-is-positioned-color-stop($input) {
602 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color); 599 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color);
603} 600}
diff --git a/src/_harmony.scss b/src/_harmony.scss
index 076fe55..839036c 100644
--- a/src/_harmony.scss
+++ b/src/_harmony.scss
@@ -9,6 +9,8 @@
9//// 9////
10 10
11@use 'sass:math'; 11@use 'sass:math';
12@use './functions';
13@use './responsive';
12 14
13/// 15///
14/// Adjust a value to a modular scale. 16/// Adjust a value to a modular scale.
@@ -23,7 +25,7 @@
23/// 25///
24/// @return {number} 26/// @return {number}
25/// 27///
26@function iro-harmony-modular-scale($times, $base, $ratio) { 28@function modular-scale($times, $base, $ratio) {
27 @if type-of($base) == number { 29 @if type-of($base) == number {
28 @return $base * math.pow($ratio, $times); 30 @return $base * math.pow($ratio, $times);
29 } 31 }
@@ -31,7 +33,7 @@
31 $main-base: nth($base, 1); 33 $main-base: nth($base, 1);
32 $norm-bases: (); 34 $norm-bases: ();
33 35
34 @each $b in iro-list-slice($base, 2) { 36 @each $b in functions.list-slice($base, 2) {
35 @if $b > $main-base { 37 @if $b > $main-base {
36 @while $b > $main-base { 38 @while $b > $main-base {
37 $b: math.div($b, $ratio); 39 $b: math.div($b, $ratio);
@@ -47,7 +49,7 @@
47 } 49 }
48 50
49 $all-bases: append($norm-bases, $main-base); 51 $all-bases: append($norm-bases, $main-base);
50 $all-bases: iro-quicksort($all-bases); 52 $all-bases: functions.quicksort($all-bases);
51 53
52 $base-index: $times % length($all-bases) + 1; 54 $base-index: $times % length($all-bases) + 1;
53 $exp: math.floor(math.div($times, length($all-bases))); 55 $exp: math.floor(math.div($times, length($all-bases)));
@@ -59,11 +61,11 @@
59/// Combine responsive properties with modular scales to achieve responsive modular scales. 61/// Combine responsive properties with modular scales to achieve responsive modular scales.
60/// 62///
61/// @param {string | list} $props - Property or list of properties to set 63/// @param {string | list} $props - Property or list of properties to set
62/// @param {number} $times - Number of iterations. See iro-harmony-modular-scale for more information. 64/// @param {number} $times - Number of iterations. See modular-scale for more information.
63/// @param {number} $responsive-map - A map with keys = viewports and values = modular scales 65/// @param {number} $responsive-map - A map with keys = viewports and values = modular scales
64/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next 66/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next
65/// 67///
66/// @see {function} iro-harmony-modular-scale 68/// @see {function} modular-scale
67/// 69///
68/// @example scss - Responsive font sizes between 2 viewports based on modular scales 70/// @example scss - Responsive font sizes between 2 viewports based on modular scales
69/// $ms: ( 71/// $ms: (
@@ -72,25 +74,25 @@
72/// ); 74/// );
73/// 75///
74/// h1 { 76/// h1 {
75/// @include iro-responsive-modular-scale(font-size, 3, $ms); 77/// @include responsive-modular-scale(font-size, 3, $ms);
76/// } 78/// }
77/// 79///
78/// h2 { 80/// h2 {
79/// @include iro-responsive-modular-scale(font-size, 2, $ms); 81/// @include responsive-modular-scale(font-size, 2, $ms);
80/// } 82/// }
81/// 83///
82/// h3 { 84/// h3 {
83/// @include iro-responsive-modular-scale(font-size, 1, $ms); 85/// @include responsive-modular-scale(font-size, 1, $ms);
84/// } 86/// }
85/// 87///
86@mixin iro-responsive-modular-scale($props, $times, $responsive-map, $fluid: true) { 88@mixin responsive-modular-scale($props, $times, $responsive-map, $fluid: true) {
87 $new-map: (); 89 $new-map: ();
88 90
89 @each $key, $value in $responsive-map { 91 @each $key, $value in $responsive-map {
90 $new-map: map-merge($new-map, ( 92 $new-map: map-merge($new-map, (
91 $key: iro-harmony-modular-scale($times, $value...) 93 $key: modular-scale($times, $value...)
92 )); 94 ));
93 } 95 }
94 96
95 @include iro-responsive-property($props, $new-map, $fluid); 97 @include responsive.property($props, $new-map, $fluid);
96} 98}
diff --git a/src/_props.scss b/src/_props.scss
index efc3eea..cdb96c2 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -10,12 +10,15 @@
10/// @access public 10/// @access public
11//// 11////
12 12
13@use './functions';
14@use './contexts';
15
13/// 16///
14/// The maximum depth of resolved iro-prop-ref() references. 17/// The maximum depth of resolved iro-prop-ref() references.
15/// 18///
16/// @type number 19/// @type number
17/// 20///
18$iro-props-native-assing-max-depth: 2 !default; 21$native-assign-max-depth: 2 !default;
19 22
20/// 23///
21/// Indicate if property names must start with two dashes (--). 24/// Indicate if property names must start with two dashes (--).
@@ -23,14 +26,14 @@ $iro-props-native-assing-max-depth: 2 !default;
23/// 26///
24/// @type bool 27/// @type bool
25/// 28///
26$iro-props-enforce-double-dashes: true !default; 29$enforce-double-dashes: true !default;
27 30
28/// 31///
29/// Default tree name to use if no name is specified. 32/// Default tree name to use if no name is specified.
30/// 33///
31/// @type string 34/// @type string
32/// 35///
33$iro-props-default-tree: 'default' !default; 36$default-tree: 'default' !default;
34 37
35/// 38///
36/// List of all created property trees. 39/// List of all created property trees.
@@ -39,24 +42,24 @@ $iro-props-default-tree: 'default' !default;
39/// 42///
40/// @access private 43/// @access private
41/// 44///
42$iro-props-trees: (); 45$trees: ();
43 46
44/// 47///
45/// Default context name used for the namespace context. 48/// Default context name used for the namespace context.
46/// 49///
47/// @type string 50/// @type string
48/// 51///
49$iro-props-namespace-context-id: 'namespace' !default; 52$namespace-context-id: 'namespace' !default;
50 53
51/// 54///
52/// Declare a namespace, meaning that all variables declared and accessed. 55/// Declare a namespace, meaning that all variables declared and accessed.
53/// 56///
54/// @param {string} $name - Name of the namespace 57/// @param {string} $name - Name of the namespace
55/// 58///
56@mixin iro-props-namespace($name) { 59@mixin namespace($name) {
57 $key: '--#{$name}'; 60 $key: '--#{$name}';
58 61
59 $ns-key: iro-props-get-ns-key(); 62 $ns-key: get-ns-key();
60 63
61 @if $ns-key != null { 64 @if $ns-key != null {
62 $key: append($ns-key, $key); 65 $key: append($ns-key, $key);
@@ -64,23 +67,23 @@ $iro-props-namespace-context-id: 'namespace' !default;
64 $key: ($key); 67 $key: ($key);
65 } 68 }
66 69
67 @include iro-context-push($iro-props-namespace-context-id, 'namespace', ( 70 @include contexts.push($namespace-context-id, 'namespace', (
68 'name': $name, 71 'name': $name,
69 'key': $key 72 'key': $key
70 )); 73 ));
71 74
72 @content; 75 @content;
73 76
74 @include iro-context-pop($iro-props-namespace-context-id); 77 @include contexts.pop($namespace-context-id);
75} 78}
76 79
77/// 80///
78/// Get the current namespace name. 81/// Get the current namespace name.
79/// 82///
80@function iro-props-namespace() { 83@function namespace() {
81 $noop: iro-context-assert-stack-must-contain($iro-props-namespace-context-id, 'namespace'); 84 $noop: contexts.assert-stack-must-contain($namespace-context-id, 'namespace');
82 85
83 $data: nth(iro-context-get($iro-props-namespace-context-id, 'namespace'), 2); 86 $data: nth(contexts.get($namespace-context-id, 'namespace'), 2);
84 $name: map-get($data, 'name'); 87 $name: map-get($data, 'name');
85 88
86 @return $name; 89 @return $name;
@@ -91,46 +94,46 @@ $iro-props-namespace-context-id: 'namespace' !default;
91/// will be merged. 94/// will be merged.
92/// 95///
93/// @param {map} $map - Map containing properties 96/// @param {map} $map - Map containing properties
94/// @param {string} $tree [$iro-props-default-tree] - ID the map is saved as 97/// @param {string} $tree [$default-tree] - ID the map is saved as
95/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted. 98/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.
96/// 99///
97@mixin iro-props-store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { 100@mixin store($map, $tree: $default-tree, $merge: true, $global: false) {
98 $noop: iro-props-store($map, $tree, $merge, $global); 101 $noop: store($map, $tree, $merge, $global);
99} 102}
100 103
101/// 104///
102/// Save a property tree. 105/// Save a property tree.
103/// 106///
104/// @param {map} $map - Map containing properties 107/// @param {map} $map - Map containing properties
105/// @param {string} $tree [$iro-props-default-tree] - ID the map is saved as 108/// @param {string} $tree [$default-tree] - ID the map is saved as
106/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted. 109/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.
107/// 110///
108@function iro-props-store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { 111@function store($map, $tree: $default-tree, $merge: true, $global: false) {
109 $prop-map: null; 112 $prop-map: null;
110 113
111 @if $iro-props-enforce-double-dashes { 114 @if $enforce-double-dashes {
112 @if not iro-props-validate($map) { 115 @if not validate($map) {
113 @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $iro-props-enforce-double-dashes to false.'; 116 @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $enforce-double-dashes to false.';
114 } 117 }
115 } 118 }
116 119
117 @if not $global { 120 @if not $global {
118 $ns-key: iro-props-get-ns-key(); 121 $ns-key: get-ns-key();
119 122
120 @if $ns-key != null { 123 @if $ns-key != null {
121 $map: ($ns-key: $map) 124 $map: ($ns-key: $map)
122 } 125 }
123 } 126 }
124 127
125 @if map-has-key($iro-props-trees, $tree) { 128 @if map-has-key($trees, $tree) {
126 @if $merge { 129 @if $merge {
127 $map: iro-map-merge-recursive(map-get($iro-props-trees, $tree), $map); 130 $map: functions.map-merge-recursive(map-get($trees, $tree), $map);
128 } @else { 131 } @else {
129 @error 'Property tree #{inspect($tree)} does already exist.'; 132 @error 'Property tree #{inspect($tree)} does already exist.';
130 } 133 }
131 } 134 }
132 135
133 $iro-props-trees: map-merge($iro-props-trees, ($tree: $map)) !global; 136 $trees: map-merge($trees, ($tree: $map)) !global;
134 137
135 @return null; 138 @return null;
136} 139}
@@ -138,25 +141,25 @@ $iro-props-namespace-context-id: 'namespace' !default;
138/// 141///
139/// Delete a property tree. 142/// Delete a property tree.
140/// 143///
141/// @param {string} $tree [$iro-props-default-tree] - ID of the tree to be deleted 144/// @param {string} $tree [$default-tree] - ID of the tree to be deleted
142/// 145///
143@mixin iro-props-clear($tree: $iro-props-default-tree) { 146@mixin clear($tree: $default-tree) {
144 $noop: iro-props-clear($tree); 147 $noop: clear($tree);
145} 148}
146 149
147/// 150///
148/// Delete a property tree. 151/// Delete a property tree.
149/// 152///
150/// @param {string} $tree [$iro-props-default-tree] - ID of the tree to be deleted 153/// @param {string} $tree [$default-tree] - ID of the tree to be deleted
151/// 154///
152/// @throw If the property tree does not exist 155/// @throw If the property tree does not exist
153/// 156///
154@function iro-props-clear($tree: $iro-props-default-tree) { 157@function clear($tree: $default-tree) {
155 @if not map-has-key($iro-props-trees, $tree) { 158 @if not map-has-key($trees, $tree) {
156 @error 'Property tree "#{inspect($tree)}" does not exist.'; 159 @error 'Property tree "#{inspect($tree)}" does not exist.';
157 } 160 }
158 161
159 $iro-props-trees: map-remove($iro-props-trees, $tree) !global; 162 $trees: map-remove($trees, $tree) !global;
160 163
161 @return null; 164 @return null;
162} 165}
@@ -165,22 +168,22 @@ $iro-props-namespace-context-id: 'namespace' !default;
165/// Access a whole property or a subsection (i.e. value) of it. 168/// Access a whole property or a subsection (i.e. value) of it.
166/// 169///
167/// @param {string | list} $key [null] - Key of the property to read. If this is a list of keys, the map will be traversed in that order. 170/// @param {string | list} $key [null] - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
168/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use 171/// @param {string} $tree [$default-tree] - ID of the property tree to use
169/// @param {any} $default [null] - Default value to return of no match was found. If null, this function will throw an error instead. 172/// @param {any} $default [null] - Default value to return of no match was found. If null, this function will throw an error instead.
170/// 173///
171/// @return {any} Value assigned to property or $default 174/// @return {any} Value assigned to property or $default
172/// 175///
173/// @throw If there was no match for $key and $default is null 176/// @throw If there was no match for $key and $default is null
174/// 177///
175@function iro-props-get-static($key: (), $tree: $iro-props-default-tree, $default: null, $global: false) { 178@function get-static($key: (), $tree: $default-tree, $default: null, $global: false) {
176 @if not map-has-key($iro-props-trees, $tree) { 179 @if not map-has-key($trees, $tree) {
177 @error 'Unknown tree "#{$tree}".'; 180 @error 'Unknown tree "#{$tree}".';
178 } 181 }
179 182
180 $result: map-get($iro-props-trees, $tree); 183 $result: map-get($trees, $tree);
181 184
182 @if not $global { 185 @if not $global {
183 $ns-key: iro-props-get-ns-key(); 186 $ns-key: get-ns-key();
184 187
185 @if $ns-key != null { 188 @if $ns-key != null {
186 $orig-key: $key; 189 $orig-key: $key;
@@ -205,9 +208,9 @@ $iro-props-namespace-context-id: 'namespace' !default;
205 208
206 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' { 209 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' {
207 @if length($result) == 2 { 210 @if length($result) == 2 {
208 $result: iro-props-get-static($tree: nth($result, 2), $global: true); 211 $result: get-static($tree: nth($result, 2), $global: true);
209 } @else { 212 } @else {
210 $result: iro-props-get-static(nth($result, 3), nth($result, 2), $global: true); 213 $result: get-static(nth($result, 3), nth($result, 2), $global: true);
211 } 214 }
212 } 215 }
213 } @else { 216 } @else {
@@ -223,9 +226,9 @@ $iro-props-namespace-context-id: 'namespace' !default;
223 226
224 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' { 227 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' {
225 @if length($result) == 2 { 228 @if length($result) == 2 {
226 $result: iro-props-get-static($tree: nth($result, 2), $global: true); 229 $result: get-static($tree: nth($result, 2), $global: true);
227 } @else { 230 } @else {
228 $result: iro-props-get-static(nth($result, 3), nth($result, 2), $global: true); 231 $result: get-static(nth($result, 3), nth($result, 2), $global: true);
229 } 232 }
230 } 233 }
231 } 234 }
@@ -250,13 +253,13 @@ $iro-props-namespace-context-id: 'namespace' !default;
250/// 253///
251/// @return {string} var() 254/// @return {string} var()
252/// 255///
253@function iro-props-get($key, $tree: $iro-props-default-tree, $default: null, $global: false) { 256@function get($key, $tree: $default-tree, $default: null, $global: false) {
254 @if $tree != null { 257 @if $tree != null {
255 $noop: iro-props-get-static($key, $tree, $default, $global); 258 $noop: get-static($key, $tree, $default, $global);
256 } 259 }
257 260
258 @if not $global { 261 @if not $global {
259 $ns-key: iro-props-get-ns-key(); 262 $ns-key: get-ns-key();
260 263
261 @if $ns-key != null { 264 @if $ns-key != null {
262 $orig-key: $key; 265 $orig-key: $key;
@@ -292,41 +295,41 @@ $iro-props-namespace-context-id: 'namespace' !default;
292/// 295///
293/// Generate assignments for native CSS custom properties with the values from the specified tree. 296/// Generate assignments for native CSS custom properties with the values from the specified tree.
294/// 297///
295/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use 298/// @param {string} $tree [$default-tree] - ID of the property tree to use
296/// @param {string} $root [()] - Sub-tree to use for assignment 299/// @param {string} $root [()] - Sub-tree to use for assignment
297/// 300///
298@mixin iro-props-assign($tree: $iro-props-default-tree, $root: (), $skip: (), $prefix: '', $global: false) { 301@mixin assign($tree: $default-tree, $root: (), $skip: (), $prefix: '', $global: false) {
299 $map: iro-props-get-static($root, $tree); 302 $map: get-static($root, $tree);
300 $map: map-remove($map, $skip...); 303 $map: map-remove($map, $skip...);
301 304
302 @if type-of($prefix) == list { 305 @if type-of($prefix) == list {
303 $prefix: iro-str-implode($prefix) 306 $prefix: functions.str-implode($prefix)
304 } 307 }
305 308
306 @if not $global { 309 @if not $global {
307 $ns-key: iro-props-get-ns-key(); 310 $ns-key: get-ns-key();
308 311
309 @if $ns-key != null { 312 @if $ns-key != null {
310 $prefix: $prefix + iro-str-implode($ns-key); 313 $prefix: $prefix + functions.str-implode($ns-key);
311 } 314 }
312 } 315 }
313 316
314 @include iro-props-assign-internal($map, $prefix); 317 @include assign-internal($map, $prefix);
315} 318}
316 319
317/// 320///
318/// @access private 321/// @access private
319/// 322///
320@mixin iro-props-assign-internal($map, $prefix: '', $ref-depth: $iro-props-native-assing-max-depth) { 323@mixin assign-internal($map, $prefix: '', $ref-depth: $native-assign-max-depth) {
321 @each $key, $value in $map { 324 @each $key, $value in $map {
322 $rd: $ref-depth; 325 $rd: $ref-depth;
323 @if type-of($value) == list and length($value) > 0 and nth($value, 1) == 'iro-prop-ref' { 326 @if type-of($value) == list and length($value) > 0 and nth($value, 1) == 'iro-prop-ref' {
324 @if $ref-depth != 0 { 327 @if $ref-depth != 0 {
325 $rd: $rd - 1; 328 $rd: $rd - 1;
326 @if length($value) == 2 { 329 @if length($value) == 2 {
327 $value: iro-props-get-static($tree: nth($value, 2)); 330 $value: get-static($tree: nth($value, 2));
328 } @else { 331 } @else {
329 $value: iro-props-get-static(nth($value, 3), nth($value, 2)); 332 $value: get-static(nth($value, 3), nth($value, 2));
330 } 333 }
331 } @else { 334 } @else {
332 $value: null; 335 $value: null;
@@ -335,7 +338,7 @@ $iro-props-namespace-context-id: 'namespace' !default;
335 @if type-of($value) != map and $value != () { 338 @if type-of($value) != map and $value != () {
336 #{$prefix + $key}: #{$value}; 339 #{$prefix + $key}: #{$value};
337 } @else { 340 } @else {
338 @include iro-props-assign-internal($value, $prefix + $key, $rd); 341 @include assign-internal($value, $prefix + $key, $rd);
339 } 342 }
340 } 343 }
341} 344}
@@ -345,14 +348,14 @@ $iro-props-namespace-context-id: 'namespace' !default;
345/// 348///
346/// @access private 349/// @access private
347/// 350///
348@function iro-props-validate($map) { 351@function validate($map) {
349 @each $key, $value in $map { 352 @each $key, $value in $map {
350 @if str-index($key, '--') != 1 { 353 @if str-index($key, '--') != 1 {
351 @return false; 354 @return false;
352 } 355 }
353 356
354 @if type-of($value) == map { 357 @if type-of($value) == map {
355 @if not iro-props-validate($value) { 358 @if not validate($value) {
356 @return false; 359 @return false;
357 } 360 }
358 } 361 }
@@ -364,16 +367,16 @@ $iro-props-namespace-context-id: 'namespace' !default;
364/// 367///
365/// Generate a reference to another tree. Dereferencing is lazy, so you may specify a tree that hasn't been created yet. 368/// Generate a reference to another tree. Dereferencing is lazy, so you may specify a tree that hasn't been created yet.
366/// 369///
367/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use 370/// @param {string} $tree [$default-tree] - ID of the property tree to use
368/// @param {string | list} $key - Key of the property to read. If this is a list of keys, the map will be traversed in that order. 371/// @param {string | list} $key - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
369/// 372///
370/// @return {list} A special list that let's Ignis know that this is a lazy value. 373/// @return {list} A special list that let's Ignis know that this is a lazy value.
371/// 374///
372/// @throw If there was no match for $key and $default is null 375/// @throw If there was no match for $key and $default is null
373/// 376///
374@function iro-props-ref($tree: $iro-props-default-tree, $key: null, $global: false) { 377@function ref($tree: $default-tree, $key: null, $global: false) {
375 @if not $global { 378 @if not $global {
376 $ns-key: iro-props-get-ns-key(); 379 $ns-key: get-ns-key();
377 380
378 @if $ns-key != null { 381 @if $ns-key != null {
379 $orig-key: $key; 382 $orig-key: $key;
@@ -403,8 +406,8 @@ $iro-props-namespace-context-id: 'namespace' !default;
403/// 406///
404/// @access private 407/// @access private
405/// 408///
406@function iro-props-get-ns-key() { 409@function get-ns-key() {
407 $ctx: iro-context-get($iro-props-namespace-context-id, 'namespace'); 410 $ctx: contexts.get($namespace-context-id, 'namespace');
408 411
409 @if $ctx == null { 412 @if $ctx == null {
410 @return null; 413 @return null;
@@ -416,4 +419,4 @@ $iro-props-namespace-context-id: 'namespace' !default;
416 @return $key; 419 @return $key;
417} 420}
418 421
419@include iro-context-stack-create($iro-props-namespace-context-id); 422@include contexts.create($namespace-context-id);
diff --git a/src/_responsive.scss b/src/_responsive.scss
index a3d8445..9520dfc 100644
--- a/src/_responsive.scss
+++ b/src/_responsive.scss
@@ -17,20 +17,23 @@
17/// @access public 17/// @access public
18//// 18////
19 19
20@use './functions';
21@use './contexts';
22
20/// 23///
21/// If true, named viewports will be supported if a compatible $breakpoints map exists. 24/// If true, named viewports will be supported if a compatible $breakpoints map exists.
22/// This is the case for [include-media](https://include-media.com/), for example. 25/// This is the case for [include-media](https://include-media.com/), for example.
23/// 26///
24/// @type bool 27/// @type bool
25/// 28///
26$iro-responsive-support-named-viewports: true !default; 29$support-named-viewports: true !default;
27 30
28/// 31///
29/// Context ID used for responsive environment-related mixins. 32/// Context ID used for responsive environment-related mixins.
30/// 33///
31/// @type string 34/// @type string
32/// 35///
33$iro-responsive-context-id: 'responsive' !default; 36$context-id: 'responsive' !default;
34 37
35/// 38///
36/// Scale a property uniformly between a specific set of target viewports / values. 39/// Scale a property uniformly between a specific set of target viewports / values.
@@ -42,7 +45,7 @@ $iro-responsive-context-id: 'responsive' !default;
42/// 45///
43/// @example scss - Responsive font-size between 2 viewports 46/// @example scss - Responsive font-size between 2 viewports
44/// .something { 47/// .something {
45/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px )); 48/// @include property(font-size, ( 320px: 20px, 720px: 30px ));
46/// } 49/// }
47/// 50///
48/// // Generates: 51/// // Generates:
@@ -67,7 +70,7 @@ $iro-responsive-context-id: 'responsive' !default;
67/// 70///
68/// @example scss - Responsive font-size between 3 viewports 71/// @example scss - Responsive font-size between 3 viewports
69/// .something { 72/// .something {
70/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); 73/// @include property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px ));
71/// } 74/// }
72/// 75///
73/// // Generates: 76/// // Generates:
@@ -96,21 +99,21 @@ $iro-responsive-context-id: 'responsive' !default;
96/// } 99/// }
97/// } 100/// }
98/// 101///
99@mixin iro-responsive-property($props, $responsive-map, $fluid: true, $vertical: false) { 102@mixin property($props, $responsive-map, $fluid: true, $vertical: false) {
100 @include iro-responsive-env(map-keys($responsive-map), $fluid, $vertical) { 103 @include env(map-keys($responsive-map), $fluid, $vertical) {
101 @if type-of($props) == list { 104 @if type-of($props) == list {
102 @each $prop in $props { 105 @each $prop in $props {
103 #{$prop}: iro-responsive-set(map-values($responsive-map)); 106 #{$prop}: set(map-values($responsive-map));
104 } 107 }
105 } @else { 108 } @else {
106 #{$props}: iro-responsive-set(map-values($responsive-map)); 109 #{$props}: set(map-values($responsive-map));
107 } 110 }
108 } 111 }
109} 112}
110 113
111/// 114///
112/// Create a new responsive environment by specifying a set of viewports. 115/// Create a new responsive environment by specifying a set of viewports.
113/// Inside a responsive environment, use the iro-responsive-set function to make a property scale automatically. 116/// Inside a responsive environment, use the set function to make a property scale automatically.
114/// 117///
115/// @param {list} $viewports - Viewports sorted in ascending order 118/// @param {list} $viewports - Viewports sorted in ascending order
116/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next 119/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next
@@ -118,12 +121,12 @@ $iro-responsive-context-id: 'responsive' !default;
118/// 121///
119/// @content 122/// @content
120/// 123///
121/// @see {function} iro-responsive-set 124/// @see {function} set
122/// 125///
123/// @example scss - Responsive font-size between 2 viewports 126/// @example scss - Responsive font-size between 2 viewports
124/// .something { 127/// .something {
125/// @include iro-responsive-env((320px, 720px)) { 128/// @include env((320px, 720px)) {
126/// font-size: iro-responsive-set(20px, 30px); 129/// font-size: set(20px, 30px);
127/// } 130/// }
128/// } 131/// }
129/// 132///
@@ -147,7 +150,7 @@ $iro-responsive-context-id: 'responsive' !default;
147/// } 150/// }
148/// } 151/// }
149/// 152///
150@mixin iro-responsive-env($viewports, $fluid: true, $vertical: false) { 153@mixin env($viewports, $fluid: true, $vertical: false) {
151 @if length($viewports) <= 1 { 154 @if length($viewports) <= 1 {
152 @error '$viewports must contain at least two viewports.'; 155 @error '$viewports must contain at least two viewports.';
153 } 156 }
@@ -155,7 +158,7 @@ $iro-responsive-context-id: 'responsive' !default;
155 $new-viewports: (); 158 $new-viewports: ();
156 159
157 @each $viewport in $viewports { 160 @each $viewport in $viewports {
158 @if $iro-responsive-support-named-viewports and global-variable-exists(breakpoints) { 161 @if $support-named-viewports and global-variable-exists(breakpoints) {
159 @if map-has-key($breakpoints, $viewport) { 162 @if map-has-key($breakpoints, $viewport) {
160 $viewport: map-get($breakpoints, $viewport); 163 $viewport: map-get($breakpoints, $viewport);
161 } 164 }
@@ -168,7 +171,7 @@ $iro-responsive-context-id: 'responsive' !default;
168 $new-viewports: append($new-viewports, $viewport); 171 $new-viewports: append($new-viewports, $viewport);
169 } 172 }
170 173
171 $viewports: iro-quicksort($new-viewports); 174 $viewports: functions.quicksort($new-viewports);
172 175
173 @if $new-viewports != $viewports { 176 @if $new-viewports != $viewports {
174 @error '$viewports was not sorted in ascending order.'; 177 @error '$viewports was not sorted in ascending order.';
@@ -178,7 +181,7 @@ $iro-responsive-context-id: 'responsive' !default;
178 $first-vp: nth($viewports, 1); 181 $first-vp: nth($viewports, 1);
179 $last-vp: nth($viewports, length($viewports)); 182 $last-vp: nth($viewports, length($viewports));
180 183
181 @include iro-context-push($iro-responsive-context-id, 'env', ( 184 @include contexts.push($context-id, 'env', (
182 'viewports': $viewports, 185 'viewports': $viewports,
183 'mode': set, 186 'mode': set,
184 'index': 1, 187 'index': 1,
@@ -188,7 +191,7 @@ $iro-responsive-context-id: 'responsive' !default;
188 191
189 @content; 192 @content;
190 193
191 @include iro-context-pop($iro-responsive-context-id); 194 @include contexts.pop($context-id);
192 195
193 @for $i from 1 to length($viewports) { 196 @for $i from 1 to length($viewports) {
194 $prev-vp: nth($viewports, $i); 197 $prev-vp: nth($viewports, $i);
@@ -196,7 +199,7 @@ $iro-responsive-context-id: 'responsive' !default;
196 199
197 @if not $vertical { 200 @if not $vertical {
198 @media (min-width: $prev-vp) and (max-width: $next-vp) { 201 @media (min-width: $prev-vp) and (max-width: $next-vp) {
199 @include iro-context-push($iro-responsive-context-id, 'env', ( 202 @include contexts.push($context-id, 'env', (
200 'viewports': $viewports, 203 'viewports': $viewports,
201 'mode': transition, 204 'mode': transition,
202 'index': $i, 205 'index': $i,
@@ -206,11 +209,11 @@ $iro-responsive-context-id: 'responsive' !default;
206 209
207 @content; 210 @content;
208 211
209 @include iro-context-pop($iro-responsive-context-id); 212 @include contexts.pop($context-id);
210 } 213 }
211 } @else { 214 } @else {
212 @media (min-height: $prev-vp) and (max-height: $next-vp) { 215 @media (min-height: $prev-vp) and (max-height: $next-vp) {
213 @include iro-context-push($iro-responsive-context-id, 'env', ( 216 @include contexts.push($context-id, 'env', (
214 'viewports': $viewports, 217 'viewports': $viewports,
215 'mode': transition, 218 'mode': transition,
216 'index': $i, 219 'index': $i,
@@ -220,14 +223,14 @@ $iro-responsive-context-id: 'responsive' !default;
220 223
221 @content; 224 @content;
222 225
223 @include iro-context-pop($iro-responsive-context-id); 226 @include contexts.pop($context-id);
224 } 227 }
225 } 228 }
226 } 229 }
227 230
228 @if not $vertical { 231 @if not $vertical {
229 @media (min-width: $last-vp) { 232 @media (min-width: $last-vp) {
230 @include iro-context-push($iro-responsive-context-id, 'env', ( 233 @include contexts.push($context-id, 'env', (
231 'viewports': $viewports, 234 'viewports': $viewports,
232 'mode': set, 235 'mode': set,
233 'index': length($viewports), 236 'index': length($viewports),
@@ -237,11 +240,11 @@ $iro-responsive-context-id: 'responsive' !default;
237 240
238 @content; 241 @content;
239 242
240 @include iro-context-pop($iro-responsive-context-id); 243 @include contexts.pop($context-id);
241 } 244 }
242 } @else { 245 } @else {
243 @media (min-height: $last-vp) { 246 @media (min-height: $last-vp) {
244 @include iro-context-push($iro-responsive-context-id, 'env', ( 247 @include contexts.push($context-id, 'env', (
245 'viewports': $viewports, 248 'viewports': $viewports,
246 'mode': set, 249 'mode': set,
247 'index': length($viewports), 250 'index': length($viewports),
@@ -251,11 +254,11 @@ $iro-responsive-context-id: 'responsive' !default;
251 254
252 @content; 255 @content;
253 256
254 @include iro-context-pop($iro-responsive-context-id); 257 @include contexts.pop($context-id);
255 } 258 }
256 } 259 }
257 } @else { 260 } @else {
258 @include iro-context-push($iro-responsive-context-id, 'env', ( 261 @include contexts.push($context-id, 'env', (
259 'viewports': $viewports, 262 'viewports': $viewports,
260 'mode': set, 263 'mode': set,
261 'index': 1, 264 'index': 1,
@@ -265,14 +268,14 @@ $iro-responsive-context-id: 'responsive' !default;
265 268
266 @content; 269 @content;
267 270
268 @include iro-context-pop($iro-responsive-context-id); 271 @include contexts.pop($context-id);
269 272
270 @for $i from 2 through length($viewports) { 273 @for $i from 2 through length($viewports) {
271 $vp: nth($viewports, $i); 274 $vp: nth($viewports, $i);
272 275
273 @if not $vertical { 276 @if not $vertical {
274 @media (min-width: $vp) { 277 @media (min-width: $vp) {
275 @include iro-context-push($iro-responsive-context-id, 'env', ( 278 @include contexts.push($context-id, 'env', (
276 'viewports': $viewports, 279 'viewports': $viewports,
277 'mode': set, 280 'mode': set,
278 'index': $i 281 'index': $i
@@ -280,11 +283,11 @@ $iro-responsive-context-id: 'responsive' !default;
280 283
281 @content; 284 @content;
282 285
283 @include iro-context-pop($iro-responsive-context-id); 286 @include contexts.pop($context-id);
284 } 287 }
285 } @else { 288 } @else {
286 @media (min-height: $vp) { 289 @media (min-height: $vp) {
287 @include iro-context-push($iro-responsive-context-id, 'env', ( 290 @include contexts.push($context-id, 'env', (
288 'viewports': $viewports, 291 'viewports': $viewports,
289 'mode': set, 292 'mode': set,
290 'index': $i 293 'index': $i
@@ -292,7 +295,7 @@ $iro-responsive-context-id: 'responsive' !default;
292 295
293 @content; 296 @content;
294 297
295 @include iro-context-pop($iro-responsive-context-id); 298 @include contexts.pop($context-id);
296 } 299 }
297 } 300 }
298 } 301 }
@@ -306,10 +309,10 @@ $iro-responsive-context-id: 'responsive' !default;
306/// 309///
307/// @return {number|string} 310/// @return {number|string}
308/// 311///
309@function iro-responsive-set($values, $without-calc: false) { 312@function set($values, $without-calc: false) {
310 $noop: iro-context-assert-stack-must-contain($iro-responsive-context-id, 'env'); 313 $noop: contexts.assert-stack-must-contain($context-id, 'env');
311 314
312 $data: nth(iro-context-get($iro-responsive-context-id, 'env'), 2); 315 $data: nth(contexts.get($context-id, 'env'), 2);
313 $viewports: map-get($data, 'viewports'); 316 $viewports: map-get($data, 'viewports');
314 $mode: map-get($data, 'mode'); 317 $mode: map-get($data, 'mode');
315 $fluid: map-get($data, 'fluid'); 318 $fluid: map-get($data, 'fluid');
@@ -328,7 +331,7 @@ $iro-responsive-context-id: 'responsive' !default;
328 $prev-value: nth($values, $index); 331 $prev-value: nth($values, $index);
329 $next-value: nth($values, $index + 1); 332 $next-value: nth($values, $index + 1);
330 333
331 @return iro-responsive-fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); 334 @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc);
332 } 335 }
333} 336}
334 337
@@ -344,7 +347,7 @@ $iro-responsive-context-id: 'responsive' !default;
344/// 347///
345/// @access private 348/// @access private
346/// 349///
347@function iro-responsive-fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { 350@function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) {
348 $value-unit: unit($min-value); 351 $value-unit: unit($min-value);
349 $max-value-unit: unit($max-value); 352 $max-value-unit: unit($max-value);
350 $viewport-unit: unit($min-viewport); 353 $viewport-unit: unit($min-viewport);
@@ -368,12 +371,12 @@ $iro-responsive-context-id: 'responsive' !default;
368 } 371 }
369 372
370 @if ($value-unit == rem) and ($viewport-unit == px) { 373 @if ($value-unit == rem) and ($viewport-unit == px) {
371 $min-viewport: iro-px-to-rem($min-viewport); 374 $min-viewport: functions.px-to-rem($min-viewport);
372 $max-viewport: iro-px-to-rem($max-viewport); 375 $max-viewport: functions.px-to-rem($max-viewport);
373 $viewport-unit: rem; 376 $viewport-unit: rem;
374 } @else if ($value-unit == px) and ($viewport-unit == rem) { 377 } @else if ($value-unit == px) and ($viewport-unit == rem) {
375 $min-value: iro-px-to-rem($min-value); 378 $min-value: functions.px-to-rem($min-value);
376 $max-value: iro-px-to-rem($max-value); 379 $max-value: functions.px-to-rem($max-value);
377 $value-unit: rem; 380 $value-unit: rem;
378 } 381 }
379 382
@@ -381,8 +384,8 @@ $iro-responsive-context-id: 'responsive' !default;
381 @error 'This combination of units is not supported.'; 384 @error 'This combination of units is not supported.';
382 } 385 }
383 386
384 $value-diff: iro-strip-unit($max-value - $min-value); 387 $value-diff: functions.strip-unit($max-value - $min-value);
385 $viewport-diff: iro-strip-unit($max-viewport - $min-viewport); 388 $viewport-diff: functions.strip-unit($max-viewport - $min-viewport);
386 389
387 $calc: ''; 390 $calc: '';
388 391
@@ -403,4 +406,4 @@ $iro-responsive-context-id: 'responsive' !default;
403 } 406 }
404} 407}
405 408
406@include iro-context-stack-create($iro-responsive-context-id); 409@include contexts.create($context-id);
diff --git a/src/_vars.scss b/src/_vars.scss
index ce6efda..34785b8 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -13,4 +13,4 @@
13/// 13///
14/// @type number 14/// @type number
15/// 15///
16$iro-root-size: 16px !default; 16$root-size: 16px !default;
diff --git a/src/bem-shortcodes.scss b/src/bem-shortcodes.scss
deleted file mode 100644
index 11abeed..0000000
--- a/src/bem-shortcodes.scss
+++ /dev/null
@@ -1,349 +0,0 @@
1////
2/// Shorter version of the bem-related mixins. Useful to reduce clutter.
3///
4/// @group BEM shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-bem-block
11///
12@mixin block($name, $type: null) {
13 @include iro-bem-block($name, $type: null) {
14 @content;
15 }
16}
17
18///
19/// @alias block
20///
21@mixin b($name, $type: null) {
22 @include block($name, $type: null) {
23 @content;
24 }
25}
26
27///
28/// @alias iro-bem-object
29///
30@mixin object($name) {
31 @include iro-bem-object($name) {
32 @content;
33 }
34}
35
36///
37/// @alias object
38///
39@mixin ob($name) {
40 @include object($name) {
41 @content;
42 }
43}
44
45///
46/// @alias iro-bem-component
47///
48@mixin component($name) {
49 @include iro-bem-component($name) {
50 @content;
51 }
52}
53
54///
55/// @alias component
56///
57@mixin cb($name) {
58 @include component($name) {
59 @content;
60 }
61}
62
63///
64/// @alias iro-bem-layout
65///
66@mixin layout($name) {
67 @include iro-bem-layout($name) {
68 @content;
69 }
70}
71
72///
73/// @alias layout
74///
75@mixin lb($name) {
76 @include layout($name) {
77 @content;
78 }
79}
80
81///
82/// @alias iro-bem-utility
83///
84@mixin utility($name) {
85 @include iro-bem-utility($name) {
86 @content;
87 }
88}
89
90///
91/// @alias utility
92///
93@mixin ub($name) {
94 @include utility($name) {
95 @content;
96 }
97}
98
99///
100/// @alias iro-bem-scope
101///
102@mixin scope($name) {
103 @include iro-bem-scope($name) {
104 @content;
105 }
106}
107
108///
109/// @alias scope
110///
111@mixin sb($name) {
112 @include scope($name) {
113 @content;
114 }
115}
116
117///
118/// @alias iro-bem-theme
119///
120@mixin theme($name) {
121 @include iro-bem-theme($name) {
122 @content;
123 }
124}
125
126///
127/// @alias theme
128///
129@mixin tb($name) {
130 @include theme($name) {
131 @content;
132 }
133}
134
135///
136/// @alias iro-bem-js
137///
138@mixin js($name) {
139 @include iro-bem-js($name) {
140 @content;
141 }
142}
143
144///
145/// @alias iro-bem-qa
146///
147@mixin qa($name) {
148 @include iro-bem-qa($name) {
149 @content;
150 }
151}
152
153///
154/// @alias iro-bem-hack
155///
156@mixin hack($name) {
157 @include iro-bem-hack($name) {
158 @content;
159 }
160}
161
162///
163/// @alias iro-bem-composed-of
164///
165@mixin composed-of($block, $blocks...) {
166 @include iro-bem-composed-of($block, $blocks...) {
167 @content;
168 }
169}
170
171///
172/// @alias composed-of
173///
174@mixin co($block, $blocks...) {
175 @include composed-of($block, $blocks...) {
176 @content;
177 }
178}
179
180///
181/// @alias iro-bem-element
182///
183@mixin element($name, $names...) {
184 @include iro-bem-element($name, $names...) {
185 @content;
186 }
187}
188
189///
190/// @alias element
191///
192@mixin e($name, $names...) {
193 @include element($name, $names...) {
194 @content;
195 }
196}
197
198///
199/// @alias iro-bem-related-element
200///
201@mixin related-element($sign, $name, $names...) {
202 @include iro-bem-related-element($sign, $name, $names...) {
203 @content;
204 }
205}
206
207///
208/// @alias related-element
209///
210@mixin re($sign, $name, $names...) {
211 @include related-element($sign, $name, $names...) {
212 @content;
213 }
214}
215
216///
217/// @alias iro-bem-sibling-element
218///
219@mixin sibling-element($name, $names...) {
220 @include iro-bem-sibling-element($name, $names...) {
221 @content;
222 }
223}
224
225///
226/// @alias sibling-element
227///
228@mixin se($name, $names...) {
229 @include sibling-element($name, $names...) {
230 @content;
231 }
232}
233
234///
235/// @alias iro-bem-next-element
236///
237@mixin next-element($name, $names...) {
238 @include iro-bem-next-element($name, $names...) {
239 @content;
240 }
241}
242
243///
244/// @alias next-element
245///
246@mixin ne($name, $names...) {
247 @include next-element($name, $names...) {
248 @content;
249 }
250}
251
252///
253/// @alias iro-bem-next-twin-element
254///
255@mixin next-twin-element {
256 @include iro-bem-next-twin-element {
257 @content;
258 }
259}
260
261///
262/// @alias next-twin-element
263///
264@mixin te {
265 @include next-twin-element {
266 @content;
267 }
268}
269
270///
271/// @alias iro-bem-modifier
272///
273@mixin modifier($name, $names...) {
274 @include iro-bem-modifier($name, $names...) {
275 @content;
276 }
277}
278
279///
280/// @alias modifier
281///
282@mixin m($name, $names...) {
283 @include modifier($name, $names...) {
284 @content;
285 }
286}
287
288///
289/// @alias iro-bem-suffix
290///
291@mixin suffix($name) {
292 @include iro-bem-suffix($name) {
293 @content;
294 }
295}
296
297///
298/// @alias suffix
299///
300@mixin s($name) {
301 @include suffix($name) {
302 @content;
303 }
304}
305
306///
307/// @alias iro-bem-is
308///
309@mixin is($state, $states...) {
310 @include iro-bem-is($state, $states...) {
311 @content;
312 }
313}
314
315///
316/// @alias iro-bem-has
317///
318@mixin has($state, $states...) {
319 @include iro-bem-has($state, $states...) {
320 @content;
321 }
322}
323
324///
325/// @alias iro-bem-at-theme
326///
327@mixin at-theme($name, $names...) {
328 @include iro-bem-at-theme($name, $names...) {
329 @content;
330 }
331}
332
333///
334/// @alias theme
335///
336@mixin at($name, $names...) {
337 @include at-theme($name, $names...) {
338 @content;
339 }
340}
341
342///
343/// @alias iro-bem-multi
344///
345@mixin multi($first, $others...) {
346 @include iro-bem-multi($first, $others...) {
347 @content;
348 }
349}
diff --git a/src/bem/_block.scss b/src/bem/_block.scss
index d065891..49af04b 100644
--- a/src/bem/_block.scss
+++ b/src/bem/_block.scss
@@ -4,6 +4,12 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use './functions' as bemfunctions;
10@use '../functions';
11@use '../contexts';
12
7/// 13///
8/// Generate a new block. 14/// Generate a new block.
9/// 15///
@@ -20,7 +26,7 @@
20/// @throw If the block is preceded by another block, element, modifier or suffix 26/// @throw If the block is preceded by another block, element, modifier or suffix
21/// 27///
22/// @example scss - Creating a new block 28/// @example scss - Creating a new block
23/// @include iro-bem-block('something', 'component') { 29/// @include block('something', 'component') {
24/// /* some definitions */ 30/// /* some definitions */
25/// } 31/// }
26/// 32///
@@ -30,12 +36,12 @@
30/// /* some definitions */ 36/// /* some definitions */
31/// } 37/// }
32/// 38///
33@mixin iro-bem-block($name, $type: null) { 39@mixin block($name, $type: null) {
34 $result: iro-bem-block($name, $type); 40 $result: block($name, $type);
35 $selector: nth($result, 1); 41 $selector: nth($result, 1);
36 $context: nth($result, 2); 42 $context: nth($result, 2);
37 43
38 @include iro-bem-validate( 44 @include validators.validate(
39 'block', 45 'block',
40 (name: $name, type: $type), 46 (name: $name, type: $type),
41 $selector, 47 $selector,
@@ -43,16 +49,16 @@
43 ); 49 );
44 50
45 @if $type != null { 51 @if $type != null {
46 $iro-bem-blocks: append($iro-bem-blocks, $name + '_' + $type) !global; 52 vars.$blocks: append(vars.$blocks, $name + '_' + $type);
47 } @else { 53 } @else {
48 $iro-bem-blocks: append($iro-bem-blocks, $name) !global; 54 vars.$blocks: append(vars.$blocks, $name);
49 } 55 }
50 56
51 @include iro-context-push($iro-bem-context-id, $context...); 57 @include contexts.push(vars.$context-id, $context...);
52 @at-root #{$selector} { 58 @at-root #{$selector} {
53 @content; 59 @content;
54 } 60 }
55 @include iro-context-pop($iro-bem-context-id); 61 @include contexts.pop(vars.$context-id);
56} 62}
57 63
58/// 64///
@@ -60,21 +66,21 @@
60/// 66///
61/// @return {list} A list with two items: 1. selector, 2. context or `null` 67/// @return {list} A list with two items: 1. selector, 2. context or `null`
62/// 68///
63/// @see {mixin} iro-bem-block 69/// @see {mixin} block
64/// 70///
65@function iro-bem-block($name, $type: null) { 71@function block($name, $type: null) {
66 // 72 //
67 // Possible outcomes: 73 // Possible outcomes:
68 // - ({b,e,m,s}) block 74 // - ({b,e,m,s}) block
69 // 75 //
70 76
71 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 77 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
72 78
73 $selector: null; 79 $selector: null;
74 $base-selector: null; 80 $base-selector: null;
75 81
76 @if $type != null { 82 @if $type != null {
77 $namespace: map-get($iro-bem-namespaces, $type); 83 $namespace: map-get(vars.$namespaces, $type);
78 84
79 @if not $namespace { 85 @if not $namespace {
80 @error '"#{$type}" is not a valid type.'; 86 @error '"#{$type}" is not a valid type.';
@@ -85,7 +91,7 @@
85 @if $type != 'theme' or & { 91 @if $type != 'theme' or & {
86 $selector: $base-selector; 92 $selector: $base-selector;
87 } @else if not & { 93 } @else if not & {
88 $selector: iro-bem-theme-selector($name); 94 $selector: bemfunctions.theme-selector($name);
89 } 95 }
90 } @else { 96 } @else {
91 $base-selector: selector-parse('.' + $name); 97 $base-selector: selector-parse('.' + $name);
@@ -107,14 +113,14 @@
107} 113}
108 114
109/// 115///
110/// Generate a new object block. It's a shorthand for iro-bem-block($name, 'object'). 116/// Generate a new object block. It's a shorthand for block($name, 'object').
111/// 117///
112/// @param {string} $name - Object block name 118/// @param {string} $name - Object block name
113/// 119///
114/// @content 120/// @content
115/// 121///
116@mixin iro-bem-object($name) { 122@mixin object($name) {
117 @include iro-bem-block($name, 'object') { 123 @include block($name, 'object') {
118 @content; 124 @content;
119 } 125 }
120} 126}
@@ -124,21 +130,21 @@
124/// 130///
125/// @return {list} A list with two items: 1. selector, 2. context or `null` 131/// @return {list} A list with two items: 1. selector, 2. context or `null`
126/// 132///
127/// @see {mixin} iro-bem-object 133/// @see {mixin} object
128/// 134///
129@function iro-bem-object($name) { 135@function object($name) {
130 @return iro-bem-block($name, 'object'); 136 @return block($name, 'object');
131} 137}
132 138
133/// 139///
134/// Generate a new component block. It's a shorthand for iro-bem-block($name, 'component'). 140/// Generate a new component block. It's a shorthand for block($name, 'component').
135/// 141///
136/// @param {string} $name - Component block name 142/// @param {string} $name - Component block name
137/// 143///
138/// @content 144/// @content
139/// 145///
140@mixin iro-bem-component($name) { 146@mixin component($name) {
141 @include iro-bem-block($name, 'component') { 147 @include block($name, 'component') {
142 @content; 148 @content;
143 } 149 }
144} 150}
@@ -148,21 +154,21 @@
148/// 154///
149/// @return {list} A list with two items: 1. selector, 2. context or `null` 155/// @return {list} A list with two items: 1. selector, 2. context or `null`
150/// 156///
151/// @see {mixin} iro-bem-component 157/// @see {mixin} component
152/// 158///
153@function iro-bem-component($name) { 159@function component($name) {
154 @return iro-bem-block($name, 'component'); 160 @return block($name, 'component');
155} 161}
156 162
157/// 163///
158/// Generate a new layout block. It's a shorthand for iro-bem-block($name, 'layout'). 164/// Generate a new layout block. It's a shorthand for block($name, 'layout').
159/// 165///
160/// @param {string} $name - Layout block name 166/// @param {string} $name - Layout block name
161/// 167///
162/// @content 168/// @content
163/// 169///
164@mixin iro-bem-layout($name) { 170@mixin layout($name) {
165 @include iro-bem-block($name, 'layout') { 171 @include block($name, 'layout') {
166 @content; 172 @content;
167 } 173 }
168} 174}
@@ -172,21 +178,21 @@
172/// 178///
173/// @return {list} A list with two items: 1. selector, 2. context or `null` 179/// @return {list} A list with two items: 1. selector, 2. context or `null`
174/// 180///
175/// @see {mixin} iro-bem-layout 181/// @see {mixin} layout
176/// 182///
177@function iro-bem-layout($name) { 183@function layout($name) {
178 @return iro-bem-block($name, 'layout'); 184 @return block($name, 'layout');
179} 185}
180 186
181/// 187///
182/// Generate a new utility block. It's a shorthand for iro-bem-block($name, 'utility'). 188/// Generate a new utility block. It's a shorthand for block($name, 'utility').
183/// 189///
184/// @param {string} $name - Utility block name 190/// @param {string} $name - Utility block name
185/// 191///
186/// @content 192/// @content
187/// 193///
188@mixin iro-bem-utility($name) { 194@mixin utility($name) {
189 @include iro-bem-block($name, 'utility') { 195 @include block($name, 'utility') {
190 @content; 196 @content;
191 } 197 }
192} 198}
@@ -196,21 +202,21 @@
196/// 202///
197/// @return {list} A list with two items: 1. selector, 2. context or `null` 203/// @return {list} A list with two items: 1. selector, 2. context or `null`
198/// 204///
199/// @see {mixin} iro-bem-utility 205/// @see {mixin} utility
200/// 206///
201@function iro-bem-utility($name) { 207@function utility($name) {
202 @return iro-bem-block($name, 'utility'); 208 @return block($name, 'utility');
203} 209}
204 210
205/// 211///
206/// Generate a new scope block. It's a shorthand for iro-bem-block($name, 'scope'). 212/// Generate a new scope block. It's a shorthand for block($name, 'scope').
207/// 213///
208/// @param {string} $name - Scope block name 214/// @param {string} $name - Scope block name
209/// 215///
210/// @content 216/// @content
211/// 217///
212@mixin iro-bem-scope($name) { 218@mixin scope($name) {
213 @include iro-bem-block($name, 'scope') { 219 @include block($name, 'scope') {
214 @content; 220 @content;
215 } 221 }
216} 222}
@@ -220,21 +226,21 @@
220/// 226///
221/// @return {list} A list with two items: 1. selector, 2. context or `null` 227/// @return {list} A list with two items: 1. selector, 2. context or `null`
222/// 228///
223/// @see {mixin} iro-bem-scope 229/// @see {mixin} scope
224/// 230///
225@function iro-bem-scope($name) { 231@function scope($name) {
226 @return iro-bem-block($name, 'scope'); 232 @return block($name, 'scope');
227} 233}
228 234
229/// 235///
230/// Generate a new theme block. It's a shorthand for iro-bem-block($name, 'theme'). 236/// Generate a new theme block. It's a shorthand for block($name, 'theme').
231/// 237///
232/// @param {string} $name - Theme block name 238/// @param {string} $name - Theme block name
233/// 239///
234/// @content 240/// @content
235/// 241///
236@mixin iro-bem-theme($name) { 242@mixin theme($name) {
237 @include iro-bem-block($name, 'theme') { 243 @include block($name, 'theme') {
238 @content; 244 @content;
239 } 245 }
240} 246}
@@ -244,21 +250,21 @@
244/// 250///
245/// @return {list} A list with two items: 1. selector, 2. context or `null` 251/// @return {list} A list with two items: 1. selector, 2. context or `null`
246/// 252///
247/// @see {mixin} iro-bem-theme 253/// @see {mixin} theme
248/// 254///
249@function iro-bem-theme($name) { 255@function theme($name) {
250 @return iro-bem-block($name, 'theme'); 256 @return block($name, 'theme');
251} 257}
252 258
253/// 259///
254/// Generate a new JS block. It's a shorthand for iro-bem-block($name, 'js'). 260/// Generate a new JS block. It's a shorthand for block($name, 'js').
255/// 261///
256/// @param {string} $name - JS block name 262/// @param {string} $name - JS block name
257/// 263///
258/// @content 264/// @content
259/// 265///
260@mixin iro-bem-js($name) { 266@mixin js($name) {
261 @include iro-bem-block($name, 'js') { 267 @include block($name, 'js') {
262 @content; 268 @content;
263 } 269 }
264} 270}
@@ -268,21 +274,21 @@
268/// 274///
269/// @return {list} A list with two items: 1. selector, 2. context or `null` 275/// @return {list} A list with two items: 1. selector, 2. context or `null`
270/// 276///
271/// @see {mixin} iro-bem-js 277/// @see {mixin} js
272/// 278///
273@function iro-bem-js($name) { 279@function js($name) {
274 @return iro-bem-block($name, 'js'); 280 @return block($name, 'js');
275} 281}
276 282
277/// 283///
278/// Generate a new QA block. It's a shorthand for iro-bem-block($name, 'qa'). 284/// Generate a new QA block. It's a shorthand for block($name, 'qa').
279/// 285///
280/// @param {string} $name - QA block name 286/// @param {string} $name - QA block name
281/// 287///
282/// @content 288/// @content
283/// 289///
284@mixin iro-bem-qa($name) { 290@mixin qa($name) {
285 @include iro-bem-block($name, 'qa') { 291 @include block($name, 'qa') {
286 @content; 292 @content;
287 } 293 }
288} 294}
@@ -292,21 +298,21 @@
292/// 298///
293/// @return {list} A list with two items: 1. selector, 2. context or `null` 299/// @return {list} A list with two items: 1. selector, 2. context or `null`
294/// 300///
295/// @see {mixin} iro-bem-qa 301/// @see {mixin} qa
296/// 302///
297@function iro-bem-qa($name) { 303@function qa($name) {
298 @return iro-bem-block($name, 'qa'); 304 @return block($name, 'qa');
299} 305}
300 306
301/// 307///
302/// Generate a new hack block. It's a shorthand for iro-bem-block($name, 'hack'). 308/// Generate a new hack block. It's a shorthand for block($name, 'hack').
303/// 309///
304/// @param {string} $name - Hack block name 310/// @param {string} $name - Hack block name
305/// 311///
306/// @content 312/// @content
307/// 313///
308@mixin iro-bem-hack($name) { 314@mixin hack($name) {
309 @include iro-bem-block($name, 'hack') { 315 @include block($name, 'hack') {
310 @content; 316 @content;
311 } 317 }
312} 318}
@@ -316,10 +322,10 @@
316/// 322///
317/// @return {list} A list with two items: 1. selector, 2. context or `null` 323/// @return {list} A list with two items: 1. selector, 2. context or `null`
318/// 324///
319/// @see {mixin} iro-bem-hack 325/// @see {mixin} hack
320/// 326///
321@function iro-bem-hack($name) { 327@function hack($name) {
322 @return iro-bem-block($name, 'hack'); 328 @return block($name, 'hack');
323} 329}
324 330
325/// 331///
@@ -337,15 +343,15 @@
337/// @throw If a block doesn't exist 343/// @throw If a block doesn't exist
338/// 344///
339/// @example scss - Successful assertion 345/// @example scss - Successful assertion
340/// @include iro-bem-component('someBlock') { 346/// @include component('someBlock') {
341/// /* some definitions */ 347/// /* some definitions */
342/// } 348/// }
343/// 349///
344/// @include iro-bem-component('anotherBlock') { 350/// @include component('anotherBlock') {
345/// /* some definitions */ 351/// /* some definitions */
346/// 352///
347/// @include iro-bem-element('elem') { 353/// @include elem('elem') {
348/// @include iro-bem-composed-of('someBlock' 'component'); 354/// @include composed-of('someBlock' 'component');
349/// 355///
350/// /* some definitions */ 356/// /* some definitions */
351/// } 357/// }
@@ -354,37 +360,37 @@
354/// // Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div> 360/// // Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div>
355/// 361///
356/// @example scss - Failing assertion 362/// @example scss - Failing assertion
357/// @include iro-bem-component('anotherBlock') { 363/// @include component('anotherBlock') {
358/// /* some definitions */ 364/// /* some definitions */
359/// 365///
360/// @include iro-bem-element('elem') { 366/// @include elem('elem') {
361/// @include iro-bem-composed-of('someBlock' 'component'); 367/// @include composed-of('someBlock' 'component');
362/// 368///
363/// /* some definitions */ 369/// /* some definitions */
364/// } 370/// }
365/// } 371/// }
366/// 372///
367/// @include iro-bem-component('someBlock') { 373/// @include component('someBlock') {
368/// /* some definitions */ 374/// /* some definitions */
369/// } 375/// }
370/// 376///
371/// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem 377/// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem
372/// 378///
373@mixin iro-bem-composed-of($block, $blocks...) { 379@mixin composed-of($block, $blocks...) {
374 @each $block in iro-list-prepend($blocks, $block) { 380 @each $block in functions.list-prepend($blocks, $block) {
375 @if type-of($block) == string { 381 @if type-of($block) == string {
376 @if not index($iro-bem-blocks, $block) { 382 @if not index(vars.$blocks, $block) {
377 @error 'Block "#{$block}" does not exist.'; 383 @error 'Block "#{$block}" does not exist.';
378 } 384 }
379 } @else { 385 } @else {
380 $name: nth($block, 1); 386 $name: nth($block, 1);
381 $type: nth($block, 2); 387 $type: nth($block, 2);
382 388
383 @if not map-get($iro-bem-namespaces, $type) { 389 @if not map-get(vars.$namespaces, $type) {
384 @error '"#{$type}" is not a valid type.'; 390 @error '"#{$type}" is not a valid type.';
385 } 391 }
386 392
387 @if not index($iro-bem-blocks, $name + '_' + $type) { 393 @if not index(vars.$blocks, $name + '_' + $type) {
388 @error 'Block "#{$name}" does not exist.'; 394 @error 'Block "#{$name}" does not exist.';
389 } 395 }
390 } 396 }
diff --git a/src/bem/_debug.scss b/src/bem/_debug.scss
index e69083c..8ea0f05 100644
--- a/src/bem/_debug.scss
+++ b/src/bem/_debug.scss
@@ -4,9 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@if $iro-bem-debug { 7@use './vars';
8 @each $type, $color in $iro-bem-debug-colors { 8
9 $namespace: map-get($iro-bem-namespaces, $type); 9@if vars.$debug {
10 @each $type, $color in vars.$debug-colors {
11 $namespace: map-get(vars.$namespaces, $type);
10 12
11 [class^='#{$namespace}-'], 13 [class^='#{$namespace}-'],
12 [class*=' #{$namespace}-'] { 14 [class*=' #{$namespace}-'] {
diff --git a/src/bem/_element.scss b/src/bem/_element.scss
index b3d2fee..84e85fb 100644
--- a/src/bem/_element.scss
+++ b/src/bem/_element.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../functions';
10@use '../contexts';
11
7/// 12///
8/// Generate a new BEM element. 13/// Generate a new BEM element.
9/// 14///
@@ -20,10 +25,10 @@
20/// @throw If the element is not preceded by a block, element, modifier or suffix. 25/// @throw If the element is not preceded by a block, element, modifier or suffix.
21/// 26///
22/// @example scss - Element for a block 27/// @example scss - Element for a block
23/// @include iro-bem-component('block') { 28/// @include component('block') {
24/// /* some block definitions */ 29/// /* some block definitions */
25/// 30///
26/// @include iro-bem-element('elem') { 31/// @include elem('elem') {
27/// /* some element definitions */ 32/// /* some element definitions */
28/// } 33/// }
29/// } 34/// }
@@ -39,15 +44,15 @@
39/// } 44/// }
40/// 45///
41/// @example scss - Element that is affected by the user hovering the block 46/// @example scss - Element that is affected by the user hovering the block
42/// @include iro-bem-component('block') { 47/// @include component('block') {
43/// /* some block definitions */ 48/// /* some block definitions */
44/// 49///
45/// @include iro-bem-element('elem') { 50/// @include elem('elem') {
46/// background-color: #eee; 51/// background-color: #eee;
47/// } 52/// }
48/// 53///
49/// &:hover { 54/// &:hover {
50/// @include iro-bem-element('elem') { 55/// @include elem('elem') {
51/// background-color: #000; 56/// background-color: #000;
52/// } 57/// }
53/// } 58/// }
@@ -68,10 +73,10 @@
68/// } 73/// }
69/// 74///
70/// @example scss - Multiple elements 75/// @example scss - Multiple elements
71/// @include iro-bem-component('block') { 76/// @include component('block') {
72/// /* some block definitions */ 77/// /* some block definitions */
73/// 78///
74/// @include iro-bem-element('elem1', 'elem2') { 79/// @include elem('elem1', 'elem2') {
75/// /* some element definitions */ 80/// /* some element definitions */
76/// } 81/// }
77/// } 82/// }
@@ -86,23 +91,23 @@
86/// /* some element definitions */ 91/// /* some element definitions */
87/// } 92/// }
88/// 93///
89@mixin iro-bem-element($name, $names...) { 94@mixin elem($name, $names...) {
90 $result: iro-bem-element($name, $names...); 95 $result: elem($name, $names...);
91 $selector: nth($result, 1); 96 $selector: nth($result, 1);
92 $context: nth($result, 2); 97 $context: nth($result, 2);
93 98
94 @include iro-bem-validate( 99 @include validators.validate(
95 'element', 100 'element',
96 (name: $name, names: $names), 101 (name: $name, names: $names),
97 $selector, 102 $selector,
98 $context 103 $context
99 ); 104 );
100 105
101 @include iro-context-push($iro-bem-context-id, $context...); 106 @include contexts.push(vars.$context-id, $context...);
102 @at-root #{$selector} { 107 @at-root #{$selector} {
103 @content; 108 @content;
104 } 109 }
105 @include iro-context-pop($iro-bem-context-id); 110 @include contexts.pop(vars.$context-id);
106} 111}
107 112
108/// 113///
@@ -110,26 +115,26 @@
110/// 115///
111/// @return {list} A list with two items: 1. selector, 2. context or `null` 116/// @return {list} A list with two items: 1. selector, 2. context or `null`
112/// 117///
113/// @see {mixin} iro-bem-element 118/// @see {mixin} element
114/// 119///
115@function iro-bem-element($name, $names...) { 120@function elem($name, $names...) {
116 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 121 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
117 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 122 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
118 123
119 $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element'); 124 $parent-context: contexts.get(vars.$context-id, 'block' 'element');
120 125
121 $selector: (); 126 $selector: ();
122 $parts-data: (); 127 $parts-data: ();
123 128
124 @if nth($parent-context, 1) == 'element' { 129 @if nth($parent-context, 1) == 'element' {
125 @if $iro-bem-element-nesting-policy == 'disallow' { 130 @if vars.$element-nesting-policy == 'disallow' {
126 @error 'Element nesting is forbidden.'; 131 @error 'Element nesting is forbidden.';
127 } 132 }
128 133
129 @if $iro-bem-element-nesting-policy == 'append' { 134 @if vars.$element-nesting-policy == 'append' {
130 $element-selector: map-get(nth($parent-context, 2), 'selector'); 135 $element-selector: map-get(nth($parent-context, 2), 'selector');
131 136
132 @if not iro-selector-suffix-match(&, $element-selector) { 137 @if not functions.selector-suffix-match(&, $element-selector) {
133 @error 'A nested element must be an immediate children of the parent element.'; 138 @error 'A nested element must be an immediate children of the parent element.';
134 } 139 }
135 140
@@ -140,7 +145,7 @@
140 // 145 //
141 146
142 @each $name in join($name, $names) { 147 @each $name in join($name, $names) {
143 $sel: selector-append(&, $iro-bem-element-separator + $name); 148 $sel: selector-append(&, vars.$element-separator + $name);
144 $selector: join($selector, $sel, comma); 149 $selector: join($selector, $sel, comma);
145 $parts-data: append($parts-data, ( 150 $parts-data: append($parts-data, (
146 'name': $name, 151 'name': $name,
@@ -149,13 +154,13 @@
149 } 154 }
150 } 155 }
151 156
152 $parent-context: iro-context-get($iro-bem-context-id, 'block'); 157 $parent-context: contexts.get(vars.$context-id, 'block');
153 } 158 }
154 159
155 @if length($selector) == 0 { 160 @if length($selector) == 0 {
156 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 161 $parent-selector: map-get(nth($parent-context, 2), 'selector');
157 162
158 @if iro-selector-suffix-match(&, $parent-selector) { 163 @if functions.selector-suffix-match(&, $parent-selector) {
159 // 164 //
160 // Possible outcomes: 165 // Possible outcomes:
161 // - {b}__element 166 // - {b}__element
@@ -163,7 +168,7 @@
163 // 168 //
164 169
165 @each $name in join($name, $names) { 170 @each $name in join($name, $names) {
166 $sel: selector-append(&, $iro-bem-element-separator + $name); 171 $sel: selector-append(&, vars.$element-separator + $name);
167 $selector: join($selector, $sel, comma); 172 $selector: join($selector, $sel, comma);
168 $parts-data: append($parts-data, ( 173 $parts-data: append($parts-data, (
169 'name': $name, 174 'name': $name,
@@ -178,13 +183,13 @@
178 // 183 //
179 184
180 @if nth($parent-context, 1) != 'block' { 185 @if nth($parent-context, 1) != 'block' {
181 $parent-context: iro-context-get($iro-bem-context-id, 'block'); 186 $parent-context: contexts.get(vars.$context-id, 'block');
182 } 187 }
183 188
184 $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); 189 $block-base-selector: map-get(nth($parent-context, 2), 'base-selector');
185 190
186 @each $name in join($name, $names) { 191 @each $name in join($name, $names) {
187 $sel: selector-nest(&, selector-append($block-base-selector, $iro-bem-element-separator + $name)); 192 $sel: selector-nest(&, selector-append($block-base-selector, vars.$element-separator + $name));
188 $selector: join($selector, $sel, comma); 193 $selector: join($selector, $sel, comma);
189 $parts-data: append($parts-data, ( 194 $parts-data: append($parts-data, (
190 'name': $name, 195 'name': $name,
@@ -217,11 +222,11 @@
217/// @throw If the element is not preceded by an element. 222/// @throw If the element is not preceded by an element.
218/// 223///
219/// @example scss - A sibling element to a single element 224/// @example scss - A sibling element to a single element
220/// @include iro-bem-component('block') { 225/// @include component('block') {
221/// @include iro-bem-element('elem') { 226/// @include elem('elem') {
222/// /* some element definitions */ 227/// /* some element definitions */
223/// 228///
224/// @include iro-bem-related-element('~', 'sibling') { 229/// @include related-elem('~', 'sibling') {
225/// /* some sibling element definitions */ 230/// /* some sibling element definitions */
226/// } 231/// }
227/// } 232/// }
@@ -238,11 +243,11 @@
238/// } 243/// }
239/// 244///
240/// @example scss - A successor element to a single element 245/// @example scss - A successor element to a single element
241/// @include iro-bem-component('block') { 246/// @include component('block') {
242/// @include iro-bem-element('elem') { 247/// @include elem('elem') {
243/// /* some element definitions */ 248/// /* some element definitions */
244/// 249///
245/// @include iro-bem-related-element('+', 'successor') { 250/// @include related-elem('+', 'successor') {
246/// /* some successor element definitions */ 251/// /* some successor element definitions */
247/// } 252/// }
248/// } 253/// }
@@ -259,11 +264,11 @@
259/// } 264/// }
260/// 265///
261/// @example scss - A successor element to multiple elements 266/// @example scss - A successor element to multiple elements
262/// @include iro-bem-component('block') { 267/// @include component('block') {
263/// @include iro-bem-element('elem1', 'elem2') { 268/// @include elem('elem1', 'elem2') {
264/// /* some element definitions */ 269/// /* some element definitions */
265/// 270///
266/// @include iro-bem-related-element('+', 'successor') { 271/// @include related-elem('+', 'successor') {
267/// /* some successor element definitions */ 272/// /* some successor element definitions */
268/// } 273/// }
269/// } 274/// }
@@ -279,23 +284,23 @@
279/// /* some successor element definitions */ 284/// /* some successor element definitions */
280/// } 285/// }
281/// 286///
282@mixin iro-bem-related-element($sign, $name, $names...) { 287@mixin related-elem($sign, $name, $names...) {
283 $result: iro-bem-related-element($sign, $name, $names...); 288 $result: related-elem($sign, $name, $names...);
284 $selector: nth($result, 1); 289 $selector: nth($result, 1);
285 $context: nth($result, 2); 290 $context: nth($result, 2);
286 291
287 @include iro-bem-validate( 292 @include validators.validate(
288 'related-element', 293 'related-element',
289 (sign: $sign, name: $name, names: $names), 294 (sign: $sign, name: $name, names: $names),
290 $selector, 295 $selector,
291 $context 296 $context
292 ); 297 );
293 298
294 @include iro-context-push($iro-bem-context-id, $context...); 299 @include contexts.push(vars.$context-id, $context...);
295 @at-root #{$selector} { 300 @at-root #{$selector} {
296 @content; 301 @content;
297 } 302 }
298 @include iro-context-pop($iro-bem-context-id); 303 @include contexts.pop(vars.$context-id);
299} 304}
300 305
301/// 306///
@@ -304,9 +309,9 @@
304/// 309///
305/// @return {list} A list with two items: 1. selector, 2. context or `null` 310/// @return {list} A list with two items: 1. selector, 2. context or `null`
306/// 311///
307/// @see {mixin} iro-bem-related-element 312/// @see {mixin} related-element
308/// 313///
309@function iro-bem-related-element($sign, $name, $names...) { 314@function related-elem($sign, $name, $names...) {
310 // 315 //
311 // Generating this selector is simple: Take the latest block context, use it 316 // Generating this selector is simple: Take the latest block context, use it
312 // to generate the element part, and insert it at the end of the current selector. 317 // to generate the element part, and insert it at the end of the current selector.
@@ -315,21 +320,21 @@
315 // - {e} ({m,s}) ([manual selector]) ~ {e} 320 // - {e} ({m,s}) ([manual selector]) ~ {e}
316 // 321 //
317 322
318 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 323 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
319 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); 324 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element');
320 325
321 @if $sign != '+' and $sign != '~' { 326 @if $sign != '+' and $sign != '~' {
322 @error 'Invalid relationship sign #{inspect($sign)}.'; 327 @error 'Invalid relationship sign #{inspect($sign)}.';
323 } 328 }
324 329
325 $block-context: iro-context-get($iro-bem-context-id, 'block'); 330 $block-context: contexts.get(vars.$context-id, 'block');
326 $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); 331 $block-base-selector: map-get(nth($block-context, 2), 'base-selector');
327 332
328 $selector: (); 333 $selector: ();
329 $parts-data: (); 334 $parts-data: ();
330 335
331 @each $name in join($name, $names) { 336 @each $name in join($name, $names) {
332 $sel: selector-nest(&, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $name)); 337 $sel: selector-nest(&, $sign, selector-append($block-base-selector, vars.$element-separator + $name));
333 $selector: join($selector, $sel, comma); 338 $selector: join($selector, $sel, comma);
334 $parts-data: append($parts-data, ( 339 $parts-data: append($parts-data, (
335 'name': $name, 340 'name': $name,
@@ -348,15 +353,15 @@
348/// 353///
349/// Generate a BEM element that is a sibling of the current element. 354/// Generate a BEM element that is a sibling of the current element.
350/// 355///
351/// It's a shorthand for iro-bem-related-element('~', $name). 356/// It's a shorthand for related-elem('~', $name).
352/// 357///
353/// @param {string} $name - First element name 358/// @param {string} $name - First element name
354/// @param {list} $names - List of more element names 359/// @param {list} $names - List of more element names
355/// 360///
356/// @content 361/// @content
357/// 362///
358@mixin iro-bem-sibling-element($name, $names...) { 363@mixin sibling-elem($name, $names...) {
359 @include iro-bem-related-element('~', $name, $names...) { 364 @include related-elem('~', $name, $names...) {
360 @content; 365 @content;
361 } 366 }
362} 367}
@@ -367,24 +372,24 @@
367/// 372///
368/// @return {list} A list with two items: 1. selector, 2. context or `null` 373/// @return {list} A list with two items: 1. selector, 2. context or `null`
369/// 374///
370/// @see {mixin} iro-bem-sibling-element 375/// @see {mixin} sibling-element
371/// 376///
372@function iro-bem-sibling-element($name, $names...) { 377@function sibling-elem($name, $names...) {
373 @return iro-bem-related-element('~', $name, $names...); 378 @return related-elem('~', $name, $names...);
374} 379}
375 380
376/// 381///
377/// Generate a BEM element that is the successor of the current element. 382/// Generate a BEM element that is the successor of the current element.
378/// 383///
379/// It's a shorthand for iro-bem-related-element('+', $name). 384/// It's a shorthand for related-elem('+', $name).
380/// 385///
381/// @param {string} $name - First element name 386/// @param {string} $name - First element name
382/// @param {string} $names - More element names 387/// @param {string} $names - More element names
383/// 388///
384/// @content 389/// @content
385/// 390///
386@mixin iro-bem-next-element($name, $names...) { 391@mixin next-elem($name, $names...) {
387 @include iro-bem-related-element('+', $name, $names...) { 392 @include related-elem('+', $name, $names...) {
388 @content; 393 @content;
389 } 394 }
390} 395}
@@ -395,28 +400,28 @@
395/// 400///
396/// @return {list} A list with two items: 1. selector, 2. context or `null` 401/// @return {list} A list with two items: 1. selector, 2. context or `null`
397/// 402///
398/// @see {mixin} iro-bem-next-element 403/// @see {mixin} next-element
399/// 404///
400@function iro-bem-next-element($name, $names...) { 405@function next-elem($name, $names...) {
401 @return iro-bem-related-element('+', $name, $names...); 406 @return related-elem('+', $name, $names...);
402} 407}
403 408
404/// 409///
405/// Generate the current BEM element as a successor of itself. 410/// Generate the current BEM element as a successor of itself.
406/// 411///
407/// If this is applied to a single element, it behaves exactly the same as 412/// If this is applied to a single element, it behaves exactly the same as
408/// iro-bem-related-element('+', name); 413/// related-elem('+', name);
409/// However, if it is applied to multiple elements, each twin element only will influence 414/// However, if it is applied to multiple elements, each twin element only will influence
410/// their other twin, which is not replicable with iro-bem-related-element. 415/// their other twin, which is not replicable with related-element.
411/// 416///
412/// @content 417/// @content
413/// 418///
414/// @example scss - Two twin elements 419/// @example scss - Two twin elements
415/// @include iro-bem-component('block') { 420/// @include component('block') {
416/// @include iro-bem-element('elem') { 421/// @include elem('elem') {
417/// /* some element definitions */ 422/// /* some element definitions */
418/// 423///
419/// @include iro-bem-next-twin-element { 424/// @include next-twin-element {
420/// /* some twin element definitions */ 425/// /* some twin element definitions */
421/// } 426/// }
422/// } 427/// }
@@ -433,11 +438,11 @@
433/// } 438/// }
434/// 439///
435/// @example scss - Multiple twin elements 440/// @example scss - Multiple twin elements
436/// @include iro-bem-component('block') { 441/// @include component('block') {
437/// @include iro-bem-element('elem1', 'elem2') { 442/// @include elem('elem1', 'elem2') {
438/// /* some element definitions */ 443/// /* some element definitions */
439/// 444///
440/// @include iro-bem-next-twin-element { 445/// @include next-twin-element {
441/// /* some twin element definitions */ 446/// /* some twin element definitions */
442/// } 447/// }
443/// } 448/// }
@@ -453,23 +458,23 @@
453/// /* some twin element definitions */ 458/// /* some twin element definitions */
454/// } 459/// }
455/// 460///
456@mixin iro-bem-related-twin-element($sign) { 461@mixin related-twin-elem($sign) {
457 $result: iro-bem-related-twin-element($sign); 462 $result: related-twin-elem($sign);
458 $selector: nth($result, 1); 463 $selector: nth($result, 1);
459 $context: nth($result, 2); 464 $context: nth($result, 2);
460 465
461 @include iro-bem-validate( 466 @include validators.validate(
462 'next-twin-element', 467 'next-twin-element',
463 (), 468 (),
464 $selector, 469 $selector,
465 $context 470 $context
466 ); 471 );
467 472
468 @include iro-context-push($iro-bem-context-id, $context...); 473 @include contexts.push(vars.$context-id, $context...);
469 @at-root #{$selector} { 474 @at-root #{$selector} {
470 @content; 475 @content;
471 } 476 }
472 @include iro-context-pop($iro-bem-context-id); 477 @include contexts.pop(vars.$context-id);
473} 478}
474 479
475/// 480///
@@ -478,16 +483,16 @@
478/// 483///
479/// @return {list} A list with two items: 1. selector, 2. context or `null` 484/// @return {list} A list with two items: 1. selector, 2. context or `null`
480/// 485///
481/// @see {mixin} iro-bem-next-twin-element 486/// @see {mixin} next-twin-element
482/// 487///
483@function iro-bem-related-twin-element($sign) { 488@function related-twin-elem($sign) {
484 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 489 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
485 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); 490 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element');
486 491
487 $element-context: iro-context-get($iro-bem-context-id, 'element'); 492 $element-context: contexts.get(vars.$context-id, 'element');
488 $element-selector: map-get(nth($element-context, 2), 'selector'); 493 $element-selector: map-get(nth($element-context, 2), 'selector');
489 494
490 $block-context: iro-context-get($iro-bem-context-id, 'block'); 495 $block-context: contexts.get(vars.$context-id, 'block');
491 $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); 496 $block-base-selector: map-get(nth($block-context, 2), 'base-selector');
492 497
493 $selector: (); 498 $selector: ();
@@ -505,7 +510,7 @@
505 $part-name: map-get($part-data, 'name'); 510 $part-name: map-get($part-data, 'name');
506 511
507 $sel: (); 512 $sel: ();
508 @if iro-selector-suffix-match(&, $element-selector) { 513 @if functions.selector-suffix-match(&, $element-selector) {
509 // 514 //
510 // This mixin is included in the selector the last element mixin created. 515 // This mixin is included in the selector the last element mixin created.
511 // Possible outcomes: 516 // Possible outcomes:
@@ -516,7 +521,7 @@
516 @each $s in & { 521 @each $s in & {
517 @each $ps in $part-selector { 522 @each $ps in $part-selector {
518 @if nth($s, -1) == nth($ps, -1) { 523 @if nth($s, -1) == nth($ps, -1) {
519 $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); 524 $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, vars.$element-separator + $part-name));
520 $sel: join($sel, $sel-ent, comma); 525 $sel: join($sel, $sel-ent, comma);
521 } 526 }
522 } 527 }
@@ -537,7 +542,7 @@
537 $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; 542 $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null;
538 543
539 @if not $match { 544 @if not $match {
540 @each $separator in $iro-bem-element-separator $iro-bem-modifier-separator $iro-bem-suffix-separator { 545 @each $separator in vars.$element-separator vars.$modifier-separator vars.$suffix-separator {
541 @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { 546 @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator {
542 $match: true; 547 $match: true;
543 } 548 }
@@ -545,7 +550,7 @@
545 } 550 }
546 551
547 @if $match { 552 @if $match {
548 $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); 553 $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, vars.$element-separator + $part-name));
549 $sel: join($sel, $sel-ent, comma); 554 $sel: join($sel, $sel-ent, comma);
550 } 555 }
551 } 556 }
@@ -574,12 +579,12 @@
574/// 579///
575/// Generate the current BEM element as a sibling of itself. 580/// Generate the current BEM element as a sibling of itself.
576/// 581///
577/// It's a shorthand for iro-bem-related-twin-element('~'). 582/// It's a shorthand for related-twin-elem('~').
578/// 583///
579/// @content 584/// @content
580/// 585///
581@mixin iro-bem-sibling-twin-element { 586@mixin sibling-twin-element {
582 @include iro-bem-related-twin-element('~') { 587 @include related-twin-elem('~') {
583 @content; 588 @content;
584 } 589 }
585} 590}
@@ -590,21 +595,21 @@
590/// 595///
591/// @return {list} A list with two items: 1. selector, 2. context or `null` 596/// @return {list} A list with two items: 1. selector, 2. context or `null`
592/// 597///
593/// @see {mixin} iro-bem-sibling-twin-element 598/// @see {mixin} sibling-twin-element
594/// 599///
595@function iro-bem-sibling-twin-element() { 600@function sibling-twin-elem() {
596 @return iro-bem-related-twin-element('~'); 601 @return related-twin-elem('~');
597} 602}
598 603
599/// 604///
600/// Generate the current BEM element as a next sibling of itself. 605/// Generate the current BEM element as a next sibling of itself.
601/// 606///
602/// It's a shorthand for iro-bem-related-twin-element('+', $name). 607/// It's a shorthand for related-twin-elem('+', $name).
603/// 608///
604/// @content 609/// @content
605/// 610///
606@mixin iro-bem-next-twin-element { 611@mixin next-twin-element {
607 @include iro-bem-related-twin-element('+') { 612 @include related-twin-elem('+') {
608 @content; 613 @content;
609 } 614 }
610} 615}
@@ -615,8 +620,8 @@
615/// 620///
616/// @return {list} A list with two items: 1. selector, 2. context or `null` 621/// @return {list} A list with two items: 1. selector, 2. context or `null`
617/// 622///
618/// @see {mixin} iro-bem-next-twin-element 623/// @see {mixin} next-twin-element
619/// 624///
620@function iro-bem-next-twin-element() { 625@function next-twin-elem() {
621 @return iro-bem-related-twin-element('+'); 626 @return related-twin-elem('+');
622} 627}
diff --git a/src/bem/_functions.scss b/src/bem/_functions.scss
index 4bb95c4..b7bd5ec 100644
--- a/src/bem/_functions.scss
+++ b/src/bem/_functions.scss
@@ -4,11 +4,13 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './vars';
8
7/// 9///
8/// @access private 10/// @access private
9/// 11///
10@function iro-bem-theme-selector($name, $names...) { 12@function theme-selector($name, $names...) {
11 $namespace: map-get($iro-bem-namespaces, 'theme'); 13 $namespace: map-get(vars.$namespaces, 'theme');
12 $selector: null; 14 $selector: null;
13 15
14 @each $name in join($name, $names) { 16 @each $name in join($name, $names) {
diff --git a/src/bem/_modifier.scss b/src/bem/_modifier.scss
index ac4cb2e..be65e47 100644
--- a/src/bem/_modifier.scss
+++ b/src/bem/_modifier.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../functions';
10@use '../contexts';
11
7/// 12///
8/// Generate a new BEM modifier. 13/// Generate a new BEM modifier.
9/// 14///
@@ -25,13 +30,13 @@
25/// @throw If the element is not preceded by a block, element, modifier or suffix. 30/// @throw If the element is not preceded by a block, element, modifier or suffix.
26/// 31///
27/// @example scss - Modifier that modifies a block or element 32/// @example scss - Modifier that modifies a block or element
28/// @include iro-bem-component('block') { 33/// @include component('block') {
29/// @include iro-bem-modifier('mod') { 34/// @include modifier('mod') {
30/// background-color: #eee; 35/// background-color: #eee;
31/// } 36/// }
32/// 37///
33/// @include iro-bem-element('elem') { 38/// @include elem('elem') {
34/// @include iro-bem-modifier('mod') { 39/// @include modifier('mod') {
35/// background-color: #222; 40/// background-color: #222;
36/// } 41/// }
37/// } 42/// }
@@ -48,15 +53,15 @@
48/// } 53/// }
49/// 54///
50/// @example scss - Modifier nested in another modifier, not extending 55/// @example scss - Modifier nested in another modifier, not extending
51/// @include iro-bem-component('block') { 56/// @include component('block') {
52/// @include iro-bem-modifier('mod') { 57/// @include modifier('mod') {
53/// background-color: #eee; 58/// background-color: #eee;
54/// } 59/// }
55/// 60///
56/// @include iro-bem-modifier('dark') { 61/// @include modifier('dark') {
57/// /* some definitions */ 62/// /* some definitions */
58/// 63///
59/// @include iro-bem-modifier('mod') { 64/// @include modifier('mod') {
60/// background-color: #222; 65/// background-color: #222;
61/// } 66/// }
62/// } 67/// }
@@ -77,15 +82,15 @@
77/// } 82/// }
78/// 83///
79/// @example scss - Modifier nested in another modifier, extending 84/// @example scss - Modifier nested in another modifier, extending
80/// @include iro-bem-component('block') { 85/// @include component('block') {
81/// @include iro-bem-modifier('mod') { 86/// @include modifier('mod') {
82/// background-color: #eee; 87/// background-color: #eee;
83/// } 88/// }
84/// 89///
85/// @include iro-bem-modifier('dark') { 90/// @include modifier('dark') {
86/// /* some definitions */ 91/// /* some definitions */
87/// 92///
88/// @include iro-bem-modifier('mod' true) { 93/// @include modifier('mod' true) {
89/// background-color: #222; 94/// background-color: #222;
90/// } 95/// }
91/// } 96/// }
@@ -105,23 +110,23 @@
105/// background-color: #222; 110/// background-color: #222;
106/// } 111/// }
107/// 112///
108@mixin iro-bem-modifier($name, $names...) { 113@mixin modifier($name, $names...) {
109 $result: iro-bem-modifier($name, $names...); 114 $result: modifier($name, $names...);
110 $selector: nth($result, 1); 115 $selector: nth($result, 1);
111 $context: nth($result, 2); 116 $context: nth($result, 2);
112 117
113 @include iro-bem-validate( 118 @include validators.validate(
114 'modifier', 119 'modifier',
115 (name: $name, names: $names), 120 (name: $name, names: $names),
116 $selector, 121 $selector,
117 $context 122 $context
118 ); 123 );
119 124
120 @include iro-context-push($iro-bem-context-id, $context...); 125 @include contexts.push(vars.$context-id, $context...);
121 @at-root #{$selector} { 126 @at-root #{$selector} {
122 @content; 127 @content;
123 } 128 }
124 @include iro-context-pop($iro-bem-context-id); 129 @include contexts.pop(vars.$context-id);
125} 130}
126 131
127/// 132///
@@ -129,18 +134,18 @@
129/// 134///
130/// @return {list} A list with two items: 1. selector, 2. context or `null` 135/// @return {list} A list with two items: 1. selector, 2. context or `null`
131/// 136///
132/// @see {mixin} iro-bem-modifier 137/// @see {mixin} modifier
133/// 138///
134@function iro-bem-modifier($name, $names...) { 139@function modifier($name, $names...) {
135 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 140 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
136 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 141 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
137 142
138 $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier' 'suffix' 'state'); 143 $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state');
139 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 144 $parent-selector: map-get(nth($parent-context, 2), 'selector');
140 $selector: (); 145 $selector: ();
141 $parts-data: (); 146 $parts-data: ();
142 147
143 @if not iro-selector-suffix-match(&, $parent-selector) { 148 @if not functions.selector-suffix-match(&, $parent-selector) {
144 // 149 //
145 // The current selector doesn't match the parent selector. 150 // The current selector doesn't match the parent selector.
146 // The user manually added a selector between parent context and this modifier call. 151 // The user manually added a selector between parent context and this modifier call.
@@ -155,7 +160,7 @@
155 @error 'A modifier must be an immediate child of the parent context'; 160 @error 'A modifier must be an immediate child of the parent context';
156 } 161 }
157 162
158 @each $name in iro-list-prepend($names, $name) { 163 @each $name in functions.list-prepend($names, $name) {
159 $extend: false; 164 $extend: false;
160 @if type-of($name) == list { 165 @if type-of($name) == list {
161 $extend: nth($name, 2); 166 $extend: nth($name, 2);
@@ -170,7 +175,7 @@
170 // - {b,e,m,s}--modifier 175 // - {b,e,m,s}--modifier
171 // 176 //
172 177
173 $sel: selector-append(&, $iro-bem-modifier-separator + $name); 178 $sel: selector-append(&, vars.$modifier-separator + $name);
174 $selector: join($selector, $sel, comma); 179 $selector: join($selector, $sel, comma);
175 $parts-data: append($parts-data, ( 180 $parts-data: append($parts-data, (
176 'name': $name, 181 'name': $name,
@@ -181,7 +186,7 @@
181 // Parent context is modifier, suffix or state and $extend is false. 186 // Parent context is modifier, suffix or state and $extend is false.
182 // 187 //
183 188
184 $be-context: iro-context-get($iro-bem-context-id, 'block' 'element'); 189 $be-context: contexts.get(vars.$context-id, 'block' 'element');
185 190
186 @if nth($be-context, 1) == 'element' { 191 @if nth($be-context, 1) == 'element' {
187 // 192 //
@@ -201,8 +206,8 @@
201 $sel: (); 206 $sel: ();
202 @each $s in & { 207 @each $s in & {
203 @each $ps in $elem-part-selector { 208 @each $ps in $elem-part-selector {
204 @if str-index(inspect($s), inspect($ps) + $iro-bem-modifier-separator) or str-index(inspect($s), inspect($ps) + $iro-bem-suffix-separator) { 209 @if str-index(inspect($s), inspect($ps) + vars.$modifier-separator) or str-index(inspect($s), inspect($ps) + vars.$suffix-separator) {
205 $sel: join($sel, selector-unify($s, selector-append($ps, $iro-bem-modifier-separator + $name)), comma); 210 $sel: join($sel, selector-unify($s, selector-append($ps, vars.$modifier-separator + $name)), comma);
206 } 211 }
207 } 212 }
208 } 213 }
@@ -227,7 +232,7 @@
227 232
228 $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); 233 $block-base-selector: map-get(nth($be-context, 2), 'base-selector');
229 234
230 $sel: selector-append(&, $block-base-selector, $iro-bem-modifier-separator + $name); 235 $sel: selector-append(&, $block-base-selector, vars.$modifier-separator + $name);
231 $selector: join($selector, $sel, comma); 236 $selector: join($selector, $sel, comma);
232 $parts-data: append($parts-data, ( 237 $parts-data: append($parts-data, (
233 'name': $name, 238 'name': $name,
diff --git a/src/bem/_multi.scss b/src/bem/_multi.scss
index 9e47ce4..1de5cdc 100644
--- a/src/bem/_multi.scss
+++ b/src/bem/_multi.scss
@@ -4,6 +4,16 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use '../functions';
8@use '../contexts';
9@use './block';
10@use './element';
11@use './modifier';
12@use './state';
13@use './suffix';
14@use './theme';
15@use './vars';
16
7/// 17///
8/// Generate multiple entities (BEM or not) at once. 18/// Generate multiple entities (BEM or not) at once.
9/// 19///
@@ -15,10 +25,10 @@
15/// @content 25/// @content
16/// 26///
17/// @example scss - Creating multiple elements, a modifier and an anchor 27/// @example scss - Creating multiple elements, a modifier and an anchor
18/// @include iro-bem-object('buttonstrip') { 28/// @include object('buttonstrip') {
19/// display: none; 29/// display: none;
20/// 30///
21/// @include iro-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') { 31/// @include multi('modifier' 'mod', 'elem' 'button' 'separator', '> a') {
22/// display: block; 32/// display: block;
23/// } 33/// }
24/// } 34/// }
@@ -43,10 +53,10 @@
43/// } 53/// }
44/// 54///
45/// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included 55/// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included
46/// @include iro-bem-object('buttonstrip') { 56/// @include object('buttonstrip') {
47/// display: none; 57/// display: none;
48/// 58///
49/// @include iro-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') { 59/// @include multi('modifier:' 'mod', 'elem:' 'button' 'separator', '> a') {
50/// display: block; 60/// display: block;
51/// } 61/// }
52/// } 62/// }
@@ -70,14 +80,16 @@
70/// display: block; 80/// display: block;
71/// } 81/// }
72/// 82///
73@mixin iro-bem-multi($first, $others...) { 83@mixin multi($first, $others...) {
74 @include iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 84 @include contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
75 85
76 @each $entity in iro-list-prepend($others, $first) { 86 @each $entity in functions.list-prepend($others, $first) {
77 $is-manual-selector: false; 87 $is-manual-selector: false;
78 88
79 @if type-of($entity) == string and not function-exists('iro-bem-' + $entity) { 89 @if type-of($entity) == string {
80 $is-manual-selector: true; 90 @if find-bem-function($entity) == null {
91 $is-manual-selector: true;
92 }
81 } 93 }
82 94
83 @if $is-manual-selector { 95 @if $is-manual-selector {
@@ -91,23 +103,17 @@
91 103
92 @if type-of($entity) == list { 104 @if type-of($entity) == list {
93 $entity-func-id: nth($entity, 1); 105 $entity-func-id: nth($entity, 1);
94 $entity: iro-list-slice($entity, 2); 106 $entity: functions.list-slice($entity, 2);
95 } @else { 107 } @else {
96 $entity-func-id: $entity; 108 $entity-func-id: $entity;
97 $entity: (); 109 $entity: ();
98 } 110 }
99 111
100 @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' { 112 @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' {
101 $entity-func-id: str-slice($entity-func-id, 1, str-length($entity-func-id) - 1); 113 $entity-func-id: unquote(str-slice($entity-func-id, 1, str-length($entity-func-id) - 1));
102 } 114 }
103 115
104 $sel-func: null; 116 $sel-func: find-bem-function($entity-func-id);
105
106 @if function-exists('iro-bem-' + $entity-func-id) {
107 $sel-func: get-function('iro-bem-' + $entity-func-id);
108 } @else if function-exists($entity-func-id) {
109 $sel-func: get-function($entity-func-id);
110 }
111 117
112 @if $sel-func == null { 118 @if $sel-func == null {
113 @error 'Function "#{inspect($entity-func-id)}" was not found.'; 119 @error 'Function "#{inspect($entity-func-id)}" was not found.';
@@ -118,14 +124,24 @@
118 $entity-result-context: nth($entity-result, 2); 124 $entity-result-context: nth($entity-result, 2);
119 125
120 @if $entity-result-context != null { 126 @if $entity-result-context != null {
121 @include iro-context-push($iro-bem-context-id, $entity-result-context...); 127 @include contexts.push(vars.$context-id, $entity-result-context...);
122 } 128 }
123 @at-root #{$entity-result-selector} { 129 @at-root #{$entity-result-selector} {
124 @content; 130 @content;
125 } 131 }
126 @if $entity-result-context != null { 132 @if $entity-result-context != null {
127 @include iro-context-pop($iro-bem-context-id); 133 @include contexts.pop(vars.$context-id);
128 } 134 }
129 } 135 }
130 } 136 }
131} 137}
138
139@function find-bem-function($name) {
140 @each $module in (block element modifier state suffix theme) {
141 @if function-exists($name, $module) {
142 @return get-function($name, $module: $module);
143 }
144 }
145
146 @return null;
147}
diff --git a/src/bem/_state.scss b/src/bem/_state.scss
index 4a85bbb..2d430bf 100644
--- a/src/bem/_state.scss
+++ b/src/bem/_state.scss
@@ -4,6 +4,10 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../contexts';
10
7/// 11///
8/// Create a new state rule. 12/// Create a new state rule.
9/// 13///
@@ -13,10 +17,10 @@
13/// @content 17/// @content
14/// 18///
15/// @example scss - Using single is-state 19/// @example scss - Using single is-state
16/// @include iro-bem-object('menu') { 20/// @include object('menu') {
17/// display: none; 21/// display: none;
18/// 22///
19/// @include iro-bem-state('is', open') { 23/// @include state('is', open') {
20/// display: block; 24/// display: block;
21/// } 25/// }
22/// } 26/// }
@@ -32,10 +36,10 @@
32/// } 36/// }
33/// 37///
34/// @example scss - Using multiple is-states 38/// @example scss - Using multiple is-states
35/// @include iro-bem-object('menu') { 39/// @include object('menu') {
36/// display: none; 40/// display: none;
37/// 41///
38/// @include iro-bem-state('is', open', 'visible') { 42/// @include state('is', open', 'visible') {
39/// display: block; 43/// display: block;
40/// } 44/// }
41/// } 45/// }
@@ -51,23 +55,23 @@
51/// display: block; 55/// display: block;
52/// } 56/// }
53/// 57///
54@mixin iro-bem-state($prefix, $state, $states...) { 58@mixin state($prefix, $state, $states...) {
55 $result: iro-bem-state($prefix, $state, $states...); 59 $result: state($prefix, $state, $states...);
56 $selector: nth($result, 1); 60 $selector: nth($result, 1);
57 $context: nth($result, 2); 61 $context: nth($result, 2);
58 62
59 @include iro-bem-validate( 63 @include validators.validate(
60 'state', 64 'state',
61 (prefix: $prefix, state: $state, states: $states), 65 (prefix: $prefix, state: $state, states: $states),
62 $selector, 66 $selector,
63 $context 67 $context
64 ); 68 );
65 69
66 @include iro-context-push($iro-bem-context-id, $context...); 70 @include contexts.push(vars.$context-id, $context...);
67 @at-root #{$selector} { 71 @at-root #{$selector} {
68 @content; 72 @content;
69 } 73 }
70 @include iro-context-pop($iro-bem-context-id); 74 @include contexts.pop(vars.$context-id);
71} 75}
72 76
73/// 77///
@@ -75,9 +79,9 @@
75/// 79///
76/// @return {list} A list with two items: 1. selector, 2. context or `null` 80/// @return {list} A list with two items: 1. selector, 2. context or `null`
77/// 81///
78/// @see {mixin} iro-bem-has 82/// @see {mixin} has
79/// 83///
80@function iro-bem-state($prefix, $state, $states...) { 84@function state($prefix, $state, $states...) {
81 $selector: (); 85 $selector: ();
82 $parts-data: (); 86 $parts-data: ();
83 87
@@ -104,10 +108,10 @@
104/// 108///
105/// Create a new has-state modifier. 109/// Create a new has-state modifier.
106/// 110///
107/// It's a shorthand for iro-bem-state('is', $state, $states...). 111/// It's a shorthand for state('is', $state, $states...).
108/// 112///
109@mixin iro-bem-is($state, $states...) { 113@mixin is($state, $states...) {
110 @include iro-bem-state('is', $state, $states...) { 114 @include state('is', $state, $states...) {
111 @content; 115 @content;
112 } 116 }
113} 117}
@@ -117,19 +121,19 @@
117/// 121///
118/// @return {list} A list with two items: 1. selector, 2. context or `null` 122/// @return {list} A list with two items: 1. selector, 2. context or `null`
119/// 123///
120/// @see {mixin} iro-bem-is 124/// @see {mixin} is
121/// 125///
122@function iro-bem-is($state, $states...) { 126@function is($state, $states...) {
123 @return iro-bem-state('is', $state, $states...); 127 @return state('is', $state, $states...);
124} 128}
125 129
126/// 130///
127/// Create a new has-state modifier. 131/// Create a new has-state modifier.
128/// 132///
129/// It's a shorthand for iro-bem-state('has', $state, $states...). 133/// It's a shorthand for state('has', $state, $states...).
130/// 134///
131@mixin iro-bem-has($state, $states...) { 135@mixin has($state, $states...) {
132 @include iro-bem-state('has', $state, $states...) { 136 @include state('has', $state, $states...) {
133 @content; 137 @content;
134 } 138 }
135} 139}
@@ -139,8 +143,8 @@
139/// 143///
140/// @return {list} A list with two items: 1. selector, 2. context or `null` 144/// @return {list} A list with two items: 1. selector, 2. context or `null`
141/// 145///
142/// @see {mixin} iro-bem-has 146/// @see {mixin} has
143/// 147///
144@function iro-bem-has($state, $states...) { 148@function has($state, $states...) {
145 @return iro-bem-state('has', $state, $states...); 149 @return state('has', $state, $states...);
146} 150}
diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss
index b103c9f..2ddb54d 100644
--- a/src/bem/_suffix.scss
+++ b/src/bem/_suffix.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../functions';
10@use '../contexts';
11
7/// 12///
8/// Generate a new suffix. 13/// Generate a new suffix.
9/// 14///
@@ -14,17 +19,17 @@
14/// @throw If the element is not preceded by a block or modifier. 19/// @throw If the element is not preceded by a block or modifier.
15/// 20///
16/// @example scss - Using a suffix 21/// @example scss - Using a suffix
17/// @include iro-bem-utility('hidden') { 22/// @include utility('hidden') {
18/// display: none; 23/// display: none;
19/// 24///
20/// @media (max-width: 320px) { 25/// @media (max-width: 320px) {
21/// @include iro-bem-suffix('phone') { 26/// @include suffix('phone') {
22/// display: none; 27/// display: none;
23/// } 28/// }
24/// } 29/// }
25/// 30///
26/// @media (max-width: 768px) { 31/// @media (max-width: 768px) {
27/// @include iro-bem-suffix('tablet') { 32/// @include suffix('tablet') {
28/// display: none; 33/// display: none;
29/// } 34/// }
30/// } 35/// }
@@ -48,23 +53,23 @@
48/// } 53/// }
49/// } 54/// }
50/// 55///
51@mixin iro-bem-suffix($name) { 56@mixin suffix($name) {
52 $result: iro-bem-suffix($name); 57 $result: suffix($name);
53 $selector: nth($result, 1); 58 $selector: nth($result, 1);
54 $context: nth($result, 2); 59 $context: nth($result, 2);
55 60
56 @include iro-bem-validate( 61 @include validators.validate(
57 'suffix', 62 'suffix',
58 (name: $name), 63 (name: $name),
59 $selector, 64 $selector,
60 $context 65 $context
61 ); 66 );
62 67
63 @include iro-context-push($iro-bem-context-id, $context...); 68 @include contexts.push(vars.$context-id, $context...);
64 @at-root #{$selector} { 69 @at-root #{$selector} {
65 @content; 70 @content;
66 } 71 }
67 @include iro-context-pop($iro-bem-context-id); 72 @include contexts.pop(vars.$context-id);
68} 73}
69 74
70/// 75///
@@ -72,21 +77,21 @@
72/// 77///
73/// @return {list} A list with two items: 1. selector, 2. context or `null` 78/// @return {list} A list with two items: 1. selector, 2. context or `null`
74/// 79///
75/// @see {mixin} iro-bem-suffix 80/// @see {mixin} suffix
76/// 81///
77@function iro-bem-suffix($name) { 82@function suffix($name) {
78 // 83 //
79 // Suffixes can be used on block, element and modifier. 84 // Suffixes can be used on block, element and modifier.
80 // 85 //
81 86
82 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 87 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
83 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 88 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
84 $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); 89 $noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix');
85 90
86 $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); 91 $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier');
87 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 92 $parent-selector: map-get(nth($parent-context, 2), 'selector');
88 93
89 @if not iro-selector-suffix-match(&, $parent-selector) { 94 @if not functions.selector-suffix-match(&, $parent-selector) {
90 // 95 //
91 // The current selector doesn't match the parent selector. 96 // The current selector doesn't match the parent selector.
92 // The user manually added a selector between parent context and this suffix call. 97 // The user manually added a selector between parent context and this suffix call.
@@ -107,7 +112,7 @@
107 // - {b,e,m}@suffix 112 // - {b,e,m}@suffix
108 // 113 //
109 114
110 $selector: selector-append(&, $iro-bem-suffix-separator + $name); 115 $selector: selector-append(&, vars.$suffix-separator + $name);
111 116
112 $context: 'suffix', ( 117 $context: 'suffix', (
113 'name': $name, 118 'name': $name,
diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss
index a49981c..ff1ba49 100644
--- a/src/bem/_theme.scss
+++ b/src/bem/_theme.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './functions';
8@use './validators';
9@use './vars';
10@use '../contexts';
11
7/// 12///
8/// Declare new rules for the current block for when this theme is active. 13/// Declare new rules for the current block for when this theme is active.
9/// 14///
@@ -12,23 +17,23 @@
12/// 17///
13/// @content 18/// @content
14/// 19///
15@mixin iro-bem-at-theme($name, $names...) { 20@mixin at-theme($name, $names...) {
16 $result: iro-bem-at-theme($name, $names...); 21 $result: at-theme($name, $names...);
17 $selector: nth($result, 1); 22 $selector: nth($result, 1);
18 $context: nth($result, 2); 23 $context: nth($result, 2);
19 24
20 @include iro-bem-validate( 25 @include validators.validate(
21 'at-theme', 26 'at-theme',
22 (name: $name, names: $names), 27 (name: $name, names: $names),
23 $selector, 28 $selector,
24 $context 29 $context
25 ); 30 );
26 31
27 @include iro-context-push($iro-bem-context-id, $context...); 32 @include contexts.push(vars.$context-id, $context...);
28 @at-root #{$selector} { 33 @at-root #{$selector} {
29 @content; 34 @content;
30 } 35 }
31 @include iro-context-pop($iro-bem-context-id); 36 @include contexts.pop(vars.$context-id);
32} 37}
33 38
34/// 39///
@@ -37,19 +42,19 @@
37/// 42///
38/// @return {list} A list with two items: 1. selector, 2. context or `null` 43/// @return {list} A list with two items: 1. selector, 2. context or `null`
39/// 44///
40/// @see {mixin} iro-bem-at-theme 45/// @see {mixin} at-theme
41/// 46///
42@function iro-bem-at-theme($name, $names...) { 47@function at-theme($name, $names...) {
43 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 48 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
44 49
45 $parent-context: iro-context-get($iro-bem-context-id, 'block'); 50 $parent-context: contexts.get(vars.$context-id, 'block');
46 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 51 $parent-selector: map-get(nth($parent-context, 2), 'selector');
47 52
48 //@if not iro-selector-suffix-match(&, $parent-selector) { 53 //@if not functions.selector-suffix-match(&, $parent-selector) {
49 // @error 'An at-theme rule must be an immediate child of a block'; 54 // @error 'An at-theme rule must be an immediate child of a block';
50 //} 55 //}
51 56
52 $selector: iro-bem-theme-selector($name, $names...); 57 $selector: functions.theme-selector($name, $names...);
53 $selector: selector-nest($selector, &); 58 $selector: selector-nest($selector, &);
54 59
55 $context: 'at-theme', ( 60 $context: 'at-theme', (
diff --git a/src/bem/_validators.scss b/src/bem/_validators.scss
index eb09a60..042e15e 100644
--- a/src/bem/_validators.scss
+++ b/src/bem/_validators.scss
@@ -16,6 +16,10 @@
16/// @access public 16/// @access public
17//// 17////
18 18
19@use './vars';
20@use '../functions';
21@use '../contexts';
22
19/// 23///
20/// A list of validator functions. 24/// A list of validator functions.
21/// 25///
@@ -23,7 +27,7 @@
23/// 27///
24/// @access private 28/// @access private
25/// 29///
26$iro-bem-validators: (); 30$validators: ();
27 31
28/// 32///
29/// Register one or multiple validator functions. 33/// Register one or multiple validator functions.
@@ -41,19 +45,19 @@ $iro-bem-validators: ();
41/// @param {string} $func-name - First function name. 45/// @param {string} $func-name - First function name.
42/// @param {string} $func-names - Other function names. 46/// @param {string} $func-names - Other function names.
43/// 47///
44@mixin iro-bem-add-validator($func-name, $func-names...) { 48@mixin add($func-name, $func-names...) {
45 $noop: iro-bem-add-validator($func-name, $func-names...); 49 $noop: add($func-name, $func-names...);
46} 50}
47 51
48/// 52///
49/// Register one or multiple validator functions. Check the respective mixin documentation for more information. 53/// Register one or multiple validator functions. Check the respective mixin documentation for more information.
50/// 54///
51/// @see {mixin} iro-bem-add-validator 55/// @see {mixin} add
52/// 56///
53@function iro-bem-add-validator($func-name, $func-names...) { 57@function add($func-name, $func-names...) {
54 @each $fn-name in join($func-name, $func-names) { 58 @each $fn-name in join($func-name, $func-names) {
55 $fn: get-function($fn-name); 59 $fn: get-function($fn-name);
56 $iro-bem-validators: map-merge($iro-bem-validators, ($fn-name: $fn)) !global; 60 $validators: map-merge($validators, ($fn-name: $fn));
57 } 61 }
58 @return null; 62 @return null;
59} 63}
@@ -64,25 +68,25 @@ $iro-bem-validators: ();
64/// @param {string} $func-name - First function name. 68/// @param {string} $func-name - First function name.
65/// @param {string} $func-names - Other function names. 69/// @param {string} $func-names - Other function names.
66/// 70///
67@mixin iro-bem-remove-validator($func-name, $func-names...) { 71@mixin remove($func-name, $func-names...) {
68 $noop: iro-bem-remove-validator($func-name, $func-names...); 72 $noop: remove($func-name, $func-names...);
69} 73}
70 74
71/// 75///
72/// Unregister one or multiple validator functions. Check the respective mixin documentation for more information. 76/// Unregister one or multiple validator functions. Check the respective mixin documentation for more information.
73/// 77///
74/// @see {mixin} iro-bem-remove-validator 78/// @see {mixin} remove
75/// 79///
76@function iro-bem-remove-validator($func-name, $func-names...) { 80@function remove($func-name, $func-names...) {
77 $iro-bem-validators: map-remove($iro-bem-validators, $func-name, $func-names...) !global; 81 $validators: map-remove($validators, $func-name, $func-names...);
78 @return null; 82 @return null;
79} 83}
80 84
81/// 85///
82/// @access private 86/// @access private
83/// 87///
84@mixin iro-bem-validate($type, $args, $selector, $context) { 88@mixin validate($type, $args, $selector, $context) {
85 @each $id, $fn in $iro-bem-validators { 89 @each $id, $fn in $validators {
86 $result: call($fn, $type, $args, $selector, $context); 90 $result: call($fn, $type, $args, $selector, $context);
87 @if not nth($result, 1) { 91 @if not nth($result, 1) {
88 @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}'; 92 @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}';
@@ -100,26 +104,26 @@ $iro-bem-validators: ();
100/// A validator that makes sure blocks are declared in the right order, determined by the 104/// A validator that makes sure blocks are declared in the right order, determined by the
101/// namespace used. 105/// namespace used.
102/// 106///
103@function iro-bem-validator--enforce-namespace-order($type, $args, $selector, $context) { 107@function enforce-namespace-order($type, $args, $selector, $context) {
104 @if not global-variable-exists(iro-bem-namespace-order) { 108 @if not global-variable-exists(namespace-order, vars) {
105 $iro-bem-namespace-order: map-keys($iro-bem-namespaces) !global; 109 vars.$namespace-order: map-keys(vars.$namespaces);
106 } 110 }
107 @if not global-variable-exists(iro-bem-cur-namespace-index) { 111 @if not global-variable-exists(cur-namespace-index, vars) {
108 $iro-bem-cur-namespace-index: 1 !global; 112 vars.$cur-namespace-index: 1;
109 } 113 }
110 114
111 @if $type == 'block' { 115 @if $type == 'block' {
112 $block-type: map-get($args, 'type'); 116 $block-type: map-get($args, 'type');
113 117
114 @if $block-type != null { 118 @if $block-type != null {
115 $ns-index: index($iro-bem-namespace-order, $block-type); 119 $ns-index: index(vars.$namespace-order, $block-type);
116 120
117 @if $ns-index != null { 121 @if $ns-index != null {
118 @if $ns-index < $iro-bem-cur-namespace-index { 122 @if $ns-index < vars.$cur-namespace-index {
119 @return false 'Namespace "#{$block-type}" comes before current namespace #{nth($iro-bem-namespace-order, $iro-bem-cur-namespace-index)}'; 123 @return false 'Namespace "#{$block-type}" comes before current namespace #{nth(vars.$namespace-order, vars.$cur-namespace-index)}';
120 } 124 }
121 125
122 $iro-bem-cur-namespace-index: $ns-index !global; 126 vars.$cur-namespace-index: $ns-index;
123 } 127 }
124 } 128 }
125 } 129 }
@@ -130,9 +134,9 @@ $iro-bem-validators: ();
130/// 134///
131/// A validator that makes all BEM entities immutable. 135/// A validator that makes all BEM entities immutable.
132/// 136///
133@function iro-bem-validator--immutable-entities($type, $args, $selector, $context) { 137@function immutable-entities($type, $args, $selector, $context) {
134 @if not global-variable-exists(iro-bem-generated-selectors) { 138 @if not global-variable-exists(generated-selectors, vars) {
135 $iro-bem-generated-selectors: () !global; 139 vars.$generated-selectors: ();
136 } 140 }
137 141
138 $block-name: null; 142 $block-name: null;
@@ -143,7 +147,7 @@ $iro-bem-validators: ();
143 $block-name: map-get($args, 'name'); 147 $block-name: map-get($args, 'name');
144 $block-type: map-get($args, 'type'); 148 $block-type: map-get($args, 'type');
145 } @else { 149 } @else {
146 $block-context: iro-context-get($iro-bem-context-id, 'block'); 150 $block-context: contexts.get(vars.$context-id, 'block');
147 $block-name: map-get(nth($block-context, 2), 'name'); 151 $block-name: map-get(nth($block-context, 2), 'name');
148 $block-type: map-get(nth($block-context, 2), 'type'); 152 $block-type: map-get(nth($block-context, 2), 'type');
149 } 153 }
@@ -155,21 +159,21 @@ $iro-bem-validators: ();
155 } 159 }
156 160
157 @if $type == 'block' { 161 @if $type == 'block' {
158 @if map-has-key($iro-bem-generated-selectors, $block-id) { 162 @if map-has-key(vars.$generated-selectors, $block-id) {
159 @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; 163 @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.';
160 } 164 }
161 165
162 $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: ())) !global; 166 vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: ()));
163 } @else { 167 } @else {
164 $selectors: map-get($iro-bem-generated-selectors, $block-id); 168 $selectors: map-get(vars.$generated-selectors, $block-id);
165 169
166 @if index($selectors, $selector) { 170 @if index($selectors, $selector) {
167 @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; 171 @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.';
168 } 172 }
169 173
170 $selectors: append($selectors, $selector); 174 $selectors: append($selectors, $selector);
171 175
172 $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: $selectors)) !global; 176 vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: $selectors));
173 } 177 }
174 178
175 @return true ''; 179 @return true '';
diff --git a/src/bem/_vars.scss b/src/bem/_vars.scss
index 5942d4f..3d0f92a 100644
--- a/src/bem/_vars.scss
+++ b/src/bem/_vars.scss
@@ -9,21 +9,21 @@
9/// 9///
10/// @type string 10/// @type string
11/// 11///
12$iro-bem-element-separator: '__' !default; 12$element-separator: '__' !default;
13 13
14/// 14///
15/// Separating character sequence for modifiers. 15/// Separating character sequence for modifiers.
16/// 16///
17/// @type string 17/// @type string
18/// 18///
19$iro-bem-modifier-separator: '--' !default; 19$modifier-separator: '--' !default;
20 20
21/// 21///
22/// Separating character sequence for BEMIT suffixes. 22/// Separating character sequence for BEMIT suffixes.
23/// 23///
24/// @type string 24/// @type string
25/// 25///
26$iro-bem-suffix-separator: '\\@' !default; 26$suffix-separator: '\\@' !default;
27 27
28/// 28///
29/// Prefixes for all BEMIT namespaces. 29/// Prefixes for all BEMIT namespaces.
@@ -40,7 +40,7 @@ $iro-bem-suffix-separator: '\\@' !default;
40/// 40///
41/// @type map 41/// @type map
42/// 42///
43$iro-bem-namespaces: ( 43$namespaces: (
44 object: 'o', 44 object: 'o',
45 component: 'c', 45 component: 'c',
46 layout: 'l', 46 layout: 'l',
@@ -59,14 +59,14 @@ $iro-bem-namespaces: (
59/// 59///
60/// @access private 60/// @access private
61/// 61///
62$iro-bem-blocks: (); 62$blocks: ();
63 63
64/// 64///
65/// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit. 65/// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit.
66/// 66///
67/// @type number 67/// @type number
68/// 68///
69$iro-bem-max-depth: 99 !default; 69$max-depth: 99 !default;
70 70
71/// 71///
72/// Indicates how nested elements should be handled. 72/// Indicates how nested elements should be handled.
@@ -78,28 +78,28 @@ $iro-bem-max-depth: 99 !default;
78/// 78///
79/// @type string 79/// @type string
80/// 80///
81$iro-bem-element-nesting-policy: 'allow' !default; 81$element-nesting-policy: 'allow' !default;
82 82
83/// 83///
84/// Context ID used for all BEM-related mixins. 84/// Context ID used for all BEM-related mixins.
85/// 85///
86/// @type string 86/// @type string
87/// 87///
88$iro-bem-context-id: 'bem' !default; 88$context-id: 'bem' !default;
89 89
90/// 90///
91/// Debug mode. 91/// Debug mode.
92/// 92///
93/// @type bool 93/// @type bool
94/// 94///
95$iro-bem-debug: false !default; 95$debug: false !default;
96 96
97/// 97///
98/// Colors assigned to namespaces. 98/// Colors assigned to namespaces.
99/// 99///
100/// @type map 100/// @type map
101/// 101///
102$iro-bem-debug-colors: ( 102$debug-colors: (
103 object: #ffa500, 103 object: #ffa500,
104 component: #00f, 104 component: #00f,
105 layout: #ff0, 105 layout: #ff0,
diff --git a/src/harmony-shortcodes.scss b/src/harmony-shortcodes.scss
deleted file mode 100644
index 3307a7e..0000000
--- a/src/harmony-shortcodes.scss
+++ /dev/null
@@ -1,35 +0,0 @@
1////
2/// Shorter version of the harmony-related functions. Useful to reduce clutter.
3///
4/// @group Harmony shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-harmony-modular-scale
11///
12@function modular-scale($times, $base, $ratio) {
13 @include iro-harmony-modular-scale($times, $base, $ratio);
14}
15
16///
17/// @alias modular-scale
18///
19@function ms($times, $base, $ratio) {
20 @include modular-scale($times, $base, $ratio);
21}
22
23///
24/// @alias iro-responsive-modular-scale
25///
26@mixin responsive-modular-scale($prop, $times, $responsive-map) {
27 @include iro-responsive-modular-scale($prop, $times, $responsive-map);
28}
29
30///
31/// @alias responsive-modular-scale
32///
33@mixin responsive-ms($prop, $times, $responsive-map) {
34 @include responsive-modular-scale($prop, $times, $responsive-map);
35}
diff --git a/src/main.scss b/src/main.scss
deleted file mode 100644
index 898b0ae..0000000
--- a/src/main.scss
+++ /dev/null
@@ -1,9 +0,0 @@
1@import 'functions';
2@import 'vars';
3@import 'contexts';
4@import 'bem';
5@import 'props';
6@import 'harmony';
7@import 'responsive';
8@import 'easing';
9@import 'gradients';
diff --git a/src/prep.scss b/src/prep.scss
deleted file mode 100644
index 616165d..0000000
--- a/src/prep.scss
+++ /dev/null
@@ -1,2 +0,0 @@
1@import 'functions';
2@import 'math';
diff --git a/src/props-shortcodes.scss b/src/props-shortcodes.scss
deleted file mode 100644
index 2e5fa1e..0000000
--- a/src/props-shortcodes.scss
+++ /dev/null
@@ -1,79 +0,0 @@
1////
2/// Shorter version of the prop-related functions. Useful to reduce clutter.
3///
4/// @group Props shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-props-namespace
11///
12@mixin namespace($name) {
13 @include iro-props-namespace($name) {
14 @content;
15 }
16}
17
18///
19/// @alias iro-props-namespace
20///
21@function namespace() {
22 @return iro-props-namespace();
23}
24
25///
26/// @alias iro-props-store
27///
28@function store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) {
29 @return iro-props-store($map, $tree, $merge, $global);
30}
31
32///
33/// @alias iro-props-store
34///
35@mixin store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) {
36 @include iro-props-store($map, $tree, $merge, $global);
37}
38
39///
40/// @alias iro-props-clear
41///
42@mixin clear($tree: $iro-props-default-tree) {
43 @include iro-props-clear($tree);
44}
45
46///
47/// @alias iro-props-clear
48///
49@function clear($tree: $iro-props-default-tree) {
50 @return iro-props-clear($tree);
51}
52
53///
54/// @alias iro-props-get-static
55///
56@function static($key: (), $tree: $iro-props-default-tree, $default: null, $global: false) {
57 @return iro-props-get-static($key, $tree, $default, $global);
58}
59
60///
61/// @alias iro-props-get
62///
63@function prop($key, $tree: $iro-props-default-tree, $default: null, $global: false) {
64 @return iro-props-get($key, $tree, $default, $global);
65}
66
67///
68/// @alias iro-props-assign
69///
70@mixin assign($tree: $iro-props-default-tree, $root: (), $skip: (), $prefix: '', $global: false) {
71 @include iro-props-assign($tree, $root, $skip, $prefix, $global);
72}
73
74///
75/// @alias iro-props-ref
76///
77@function ref($tree: $iro-props-default-tree, $key: null, $global: false) {
78 @return iro-props-ref($tree, $key, $global);
79}
diff --git a/src/responsive-shortcodes.scss b/src/responsive-shortcodes.scss
deleted file mode 100644
index e43dfc0..0000000
--- a/src/responsive-shortcodes.scss
+++ /dev/null
@@ -1,14 +0,0 @@
1////
2/// Shorter version of the responsive-related mixins. Useful to reduce clutter.
3///
4/// @group Responsive shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-responsive-property
11///
12@mixin responsive($props, $responsive-map, $fluid: true, $vertical: false) {
13 @include iro-responsive-property($props, $responsive-map, $fluid, $vertical);
14}
diff --git a/test/_bem.scss b/test/_bem.scss
index 30ed131..b7bd6b4 100644
--- a/test/_bem.scss
+++ b/test/_bem.scss
@@ -1,19 +1,21 @@
1@include describe('BEM') { 1@use 'true' as *;
2
3@include describe('bem') {
2 // 4 //
3 // The following unit tests only test the BEM mixins. 5 // The following unit tests only test the BEM mixins.
4 // Since they are wrappers for the BEM functions, the latter are 6 // Since they are wrappers for the BEM functions, the latter are
5 // automatically covered. 7 // automatically covered.
6 // 8 //
7 9
8 @import 'bem/iro-bem-block'; 10 @import 'bem/block';
9 @import 'bem/iro-bem-composed-of'; 11 @import 'bem/composed-of';
10 @import 'bem/iro-bem-at-theme'; 12 @import 'bem/at-theme';
11 @import 'bem/iro-bem-element'; 13 @import 'bem/element';
12 @import 'bem/iro-bem-related-element'; 14 @import 'bem/related-element';
13 @import 'bem/iro-bem-next-twin-element'; 15 @import 'bem/next-twin-element';
14 @import 'bem/iro-bem-modifier'; 16 @import 'bem/modifier';
15 @import 'bem/iro-bem-suffix'; 17 @import 'bem/suffix';
16 @import 'bem/iro-bem-state'; 18 @import 'bem/state';
17 @import 'bem/iro-bem-multi'; 19 @import 'bem/multi';
18 @import 'bem/examples'; 20 @import 'bem/examples';
19} 21}
diff --git a/test/_contexts.scss b/test/_contexts.scss
index 1b0e602..510f79b 100644
--- a/test/_contexts.scss
+++ b/test/_contexts.scss
@@ -1,65 +1,68 @@
1@include describe('Contexts') { 1@use 'true' as *;
2@use '../src/contexts';
3
4@include describe('contexts') {
2 @include it('Creating / deleting context stacks') { 5 @include it('Creating / deleting context stacks') {
3 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); 6 @include assert-equal(contexts.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'); 7 @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted');
5 } 8 }
6 9
7 @include it('Adding / removing contexts') { 10 @include it('Adding / removing contexts') {
8 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); 11 @include assert-equal(contexts.create('test'), null, 'Check if context stack was created');
9 12
10 @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); 13 @include assert-equal(contexts.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'); 14 @include assert-equal(contexts.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'); 15 @include assert-equal(contexts.push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed');
13 16
14 @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped'); 17 @include assert-equal(contexts.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'); 18 @include assert-equal(contexts.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'); 19 @include assert-equal(contexts.pop('test'), 'ctx' 1234, 'Check if context 1 was popped');
17 20
18 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); 21 @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted');
19 } 22 }
20 23
21 @include it('Clearing / counting context stacks') { 24 @include it('Clearing / counting context stacks') {
22 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); 25 @include assert-equal(contexts.create('test'), null, 'Check if context stack was created');
23 26
24 @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); 27 @include assert-equal(contexts.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'); 28 @include assert-equal(contexts.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'); 29 @include assert-equal(contexts.push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed');
27 30
28 @include assert-equal(iro-context-stack-count('test'), 3, 'Check if context stack contains 3 contexts'); 31 @include assert-equal(contexts.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'); 32 @include assert-equal(contexts.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'); 33 @include assert-equal(contexts.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'); 34 @include assert-equal(contexts.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'); 35 @include assert-equal(contexts.count('test'), 0, 'Check if context stack contains no contexts');
33 36
34 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); 37 @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted');
35 } 38 }
36 39
37 @include it('Retrieving contexts') { 40 @include it('Retrieving contexts') {
38 @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); 41 @include assert-equal(contexts.create('test'), null, 'Check if context stack was created');
39 42
40 @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); 43 @include assert-equal(contexts.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'); 44 @include assert-equal(contexts.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'); 45 @include assert-equal(contexts.push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed');
43 46
44 @include assert-equal(iro-context-get('test', 1), 'ctx' 56, 'Check if context at position 1 is context 3'); 47 @include assert-equal(contexts.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'); 48 @include assert-equal(contexts.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'); 49 @include assert-equal(contexts.get('test', 2), 'another' 'text', 'Check if latest context with id "another" is context 2');
47 50
48 @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped'); 51 @include assert-equal(contexts.pop('test'), 'ctx' 56, 'Check if context 3 was popped');
49 52
50 @include assert-equal(iro-context-get('test', 1), 'another' 'text', 'Check if context at position 1 is context 2'); 53 @include assert-equal(contexts.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'); 54 @include assert-equal(contexts.get('test', -1), 'ctx' 1234, 'Check if latest context with id "ctx" is context 1');
52 55
53 @include assert-equal(iro-context-push('test', 'more', 'string'), 'more' 'string', 'Check if context 4 was pushed'); 56 @include assert-equal(contexts.push('test', 'more', 'string'), 'more' 'string', 'Check if context 4 was pushed');
54 57
55 @include assert-equal(iro-context-get('test', 1), 'more' 'string', 'Check if context at position 1 is context 4'); 58 @include assert-equal(contexts.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'); 59 @include assert-equal(contexts.get('test', 'more'), 'more' 'string', 'Check if latest context with id "more" is context 4');
57 60
58 @include assert-equal(iro-context-pop('test'), 'more' 'string', 'Check if context 4 was popped'); 61 @include assert-equal(contexts.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'); 62 @include assert-equal(contexts.pop('test'), 'another' 'text', 'Check if context 2 was popped');
60 63
61 @include assert-equal(iro-context-get('test', 1), iro-context-get('test', -1), 'Check if first and last context are context 1'); 64 @include assert-equal(contexts.get('test', 1), contexts.get('test', -1), 'Check if first and last context are context 1');
62 65
63 @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); 66 @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted');
64 } 67 }
65} 68}
diff --git a/test/_functions.scss b/test/_functions.scss
index 54e37c5..2430f28 100644
--- a/test/_functions.scss
+++ b/test/_functions.scss
@@ -1,44 +1,47 @@
1@include describe('Functions') { 1@use 'true' as *;
2 @include it('iro-str-replace') { 2@use '../src/functions';
3
4@include describe('functions') {
5 @include it('str-replace') {
3 $str: 'Hello world!'; 6 $str: 'Hello world!';
4 7
5 @include assert-equal(iro-str-replace($str, 'world', 'neighbor'), 'Hello neighbor!', 'Replace "world" with "neighbor"'); 8 @include assert-equal(functions.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"'); 9 @include assert-equal(functions.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"'); 10 @include assert-equal(functions.str-replace($str, 'Hello', 'Bye'), 'Bye world!', 'Replace "Hello" with "Bye"');
8 } 11 }
9 12
10 @include it('iro-list-slice') { 13 @include it('list-slice') {
11 $list: 'this' 'is' 'a' 'list'; 14 $list: 'this' 'is' 'a' 'list';
12 15
13 @include assert-equal(iro-list-slice($list, 2), 'is' 'a' 'list', 'Discard first item'); 16 @include assert-equal(functions.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'); 17 @include assert-equal(functions.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'); 18 @include assert-equal(functions.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'); 19 @include assert-equal(functions.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'); 20 @include assert-equal(functions.list-slice($list, -1, 1), 'list' 'this', 'Extract first and last item');
18 } 21 }
19 22
20 @include it('iro-list-prepend') { 23 @include it('list-prepend') {
21 $list: 'this' 'is' 'a' 'list'; 24 $list: 'this' 'is' 'a' 'list';
22 25
23 @include assert-equal(iro-list-prepend($list, 'and'), 'and' 'this' 'is' 'a' 'list', 'Prepend "and"'); 26 @include assert-equal(functions.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'); 27 @include assert-equal(functions.list-prepend($list, 2), 2 'this' 'is' 'a' 'list', 'Prepend 2');
25 } 28 }
26 29
27 @include it('iro-quicksort') { 30 @include it('quicksort') {
28 @include assert-equal(iro-quicksort(1 2 3 4 5), 1 2 3 4 5, 'Already sorted list of 5 items'); 31 @include assert-equal(functions.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'); 32 @include assert-equal(functions.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'); 33 @include assert-equal(functions.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'); 34 @include assert-equal(functions.quicksort(1 1 1 1), 1 1 1 1, 'List of 4 identical items');
32 } 35 }
33 36
34 @include it('iro-map-get-default') { 37 @include it('map-get-default') {
35 $map: ('key': 'value', 'another': 'item'); 38 $map: ('key': 'value', 'another': 'item');
36 39
37 @include assert-equal(iro-map-get-default($map, 'another', 0), map-get($map, 'another'), 'Get existing value'); 40 @include assert-equal(functions.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'); 41 @include assert-equal(functions.map-get-default($map, 'index', 'nothing'), 'nothing', 'Get missing value');
39 } 42 }
40 43
41 @include it('iro-map-get-deep') { 44 @include it('map-get-deep') {
42 $map: ( 45 $map: (
43 'key': 'value', 46 'key': 'value',
44 'sub': ( 47 'sub': (
@@ -51,14 +54,14 @@
51 ) 54 )
52 ); 55 );
53 56
54 @include assert-equal(iro-map-get-deep($map, 'key'), map-get($map, 'key'), 'Get value in root level'); 57 @include assert-equal(functions.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'); 58 @include assert-equal(functions.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'); 59 @include assert-equal(functions.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'); 60 @include assert-equal(functions.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'); 61 @include assert-equal(functions.map-get-deep($map, 'sub' 'subsub' 'item2'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item2'), 'Get value in second level');
59 } 62 }
60 63
61 @include it('iro-map-merge-recursive') { 64 @include it('map-merge-recursive') {
62 $map1: ( 65 $map1: (
63 'key': 'value', 66 'key': 'value',
64 'sub': ( 67 'sub': (
@@ -84,20 +87,20 @@
84 ) 87 )
85 ); 88 );
86 89
87 @include assert-equal(iro-map-merge-recursive($map1, $map2), $expected); 90 @include assert-equal(functions.map-merge-recursive($map1, $map2), $expected);
88 } 91 }
89 92
90 @include it('iro-strip-unit') { 93 @include it('strip-unit') {
91 @include assert-true(unitless(iro-strip-unit(1em)), 'Remove unit from 1em'); 94 @include assert-true(unitless(functions.strip-unit(1em)), 'Remove unit from 1em');
92 @include assert-true(unitless(iro-strip-unit(2rem)), 'Remove unit from 2rem'); 95 @include assert-true(unitless(functions.strip-unit(2rem)), 'Remove unit from 2rem');
93 @include assert-true(unitless(iro-strip-unit(3px)), 'Remove unit from 3px'); 96 @include assert-true(unitless(functions.strip-unit(3px)), 'Remove unit from 3px');
94 @include assert-true(unitless(iro-strip-unit(4)), 'Remove unit from 4'); 97 @include assert-true(unitless(functions.strip-unit(4)), 'Remove unit from 4');
95 @include assert-true(unitless(iro-strip-unit(5pt)), 'Remove unit from 5pt'); 98 @include assert-true(unitless(functions.strip-unit(5pt)), 'Remove unit from 5pt');
96 } 99 }
97 100
98 @include it('iro-px-to-rem') { 101 @include it('px-to-rem') {
99 @include assert-equal(iro-px-to-rem(16px, 16px), 1rem, 'Convert 16px'); 102 @include assert-equal(functions.px-to-rem(16px, 16px), 1rem, 'Convert 16px');
100 @include assert-equal(iro-px-to-rem(32px, 16px), 2rem, 'Convert 16px'); 103 @include assert-equal(functions.px-to-rem(32px, 16px), 2rem, 'Convert 16px');
101 @include assert-equal(iro-px-to-rem(8px, 16px), 0.5rem, 'Convert 16px'); 104 @include assert-equal(functions.px-to-rem(8px, 16px), 0.5rem, 'Convert 16px');
102 } 105 }
103} 106}
diff --git a/test/_gradients.scss b/test/_gradients.scss
index c1145aa..c11439c 100644
--- a/test/_gradients.scss
+++ b/test/_gradients.scss
@@ -1,8 +1,12 @@
1// sass-lint:disable no-color-literals zero-unit 1// sass-lint:disable no-color-literals zero-unit
2 2
3@include describe('Gradients') { 3@use 'true' as *;
4 @include it('iro-easing-gradient') { 4@use '../src/easing';
5 $gradient1: iro-easing-gradient( 5@use '../src/gradients';
6
7@include describe('gradients') {
8 @include it('easing-gradient') {
9 $gradient1: gradients.easing-gradient(
6 linear, 10 linear,
7 to right, 11 to right,
8 #000, 12 #000,
@@ -13,9 +17,9 @@
13 $expected1: linear-gradient( 17 $expected1: linear-gradient(
14 to right, 18 to right,
15 #000 0, 19 #000 0,
16 mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 25%, 20 mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 25%,
17 mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) 50%, 21 mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) 50%,
18 mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 75%, 22 mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 75%,
19 transparent 100% 23 transparent 100%
20 ); 24 );
21 25
@@ -23,7 +27,7 @@
23 27
24 // --------------------------------------------------------------------------- 28 // ---------------------------------------------------------------------------
25 29
26 $gradient2: iro-easing-gradient( 30 $gradient2: gradients.easing-gradient(
27 radial, 31 radial,
28 1em 2em at 50% 60%, 32 1em 2em at 50% 60%,
29 #000, 33 #000,
@@ -34,9 +38,9 @@
34 $expected2: radial-gradient( 38 $expected2: radial-gradient(
35 1em 2em at 50% 60%, 39 1em 2em at 50% 60%,
36 #000 0, 40 #000 0,
37 mix(transparent, #000, iro-ease-out-cubic(0.25) * 100%) 25%, 41 mix(transparent, #000, easing.ease-out-cubic(0.25) * 100%) 25%,
38 mix(transparent, #000, iro-ease-out-cubic(0.5) * 100%) 50%, 42 mix(transparent, #000, easing.ease-out-cubic(0.5) * 100%) 50%,
39 mix(transparent, #000, iro-ease-out-cubic(0.75) * 100%) 75%, 43 mix(transparent, #000, easing.ease-out-cubic(0.75) * 100%) 75%,
40 transparent 100% 44 transparent 100%
41 ); 45 );
42 46
@@ -44,7 +48,7 @@
44 48
45 // --------------------------------------------------------------------------- 49 // ---------------------------------------------------------------------------
46 50
47 $gradient3: iro-easing-gradient( 51 $gradient3: gradients.easing-gradient(
48 linear, 52 linear,
49 to right, 53 to right,
50 #000 2em, 54 #000 2em,
@@ -55,9 +59,9 @@
55 $expected3: linear-gradient( 59 $expected3: linear-gradient(
56 to right, 60 to right,
57 #000 2em, 61 #000 2em,
58 mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 4em, 62 mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 4em,
59 mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) 6em, 63 mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) 6em,
60 mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 8em, 64 mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 8em,
61 transparent 10em 65 transparent 10em
62 ); 66 );
63 67
@@ -65,7 +69,7 @@
65 69
66 // --------------------------------------------------------------------------- 70 // ---------------------------------------------------------------------------
67 71
68 $gradient4: iro-easing-gradient( 72 $gradient4: gradients.easing-gradient(
69 linear, 73 linear,
70 to right, 74 to right,
71 #000 20%, 75 #000 20%,
@@ -76,9 +80,9 @@
76 $expected4: linear-gradient( 80 $expected4: linear-gradient(
77 to right, 81 to right,
78 #000 20%, 82 #000 20%,
79 mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25), 83 mix(transparent, #000, easing.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), 84 mix(transparent, #000, easing.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), 85 mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),
82 transparent calc(20% + 10em) 86 transparent calc(20% + 10em)
83 ); 87 );
84 88
@@ -86,7 +90,7 @@
86 90
87 // --------------------------------------------------------------------------- 91 // ---------------------------------------------------------------------------
88 92
89 $gradient5: iro-easing-gradient( 93 $gradient5: gradients.easing-gradient(
90 linear, 94 linear,
91 to right, 95 to right,
92 #000 2em, 96 #000 2em,
@@ -99,9 +103,9 @@
99 to right, 103 to right,
100 #000 2em, 104 #000 2em,
101 #f00 7em, 105 #f00 7em,
102 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25, 106 mix(transparent, #f00, easing.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, 107 mix(transparent, #f00, easing.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, 108 mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
105 transparent 10em 109 transparent 10em
106 ); 110 );
107 111
@@ -109,7 +113,7 @@
109 113
110 // --------------------------------------------------------------------------- 114 // ---------------------------------------------------------------------------
111 115
112 $gradient6: iro-easing-gradient( 116 $gradient6: gradients.easing-gradient(
113 linear, 117 linear,
114 to right, 118 to right,
115 #000 2em, 119 #000 2em,
@@ -122,13 +126,13 @@
122 $expected6: linear-gradient( 126 $expected6: linear-gradient(
123 to right, 127 to right,
124 #000 2em, 128 #000 2em,
125 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 2em + 5em * 0.25, 129 mix(#f00, #000, easing.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, 130 mix(#f00, #000, easing.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, 131 mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,
128 #f00 7em, 132 #f00 7em,
129 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25, 133 mix(transparent, #f00, easing.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, 134 mix(transparent, #f00, easing.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, 135 mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
132 transparent 10em 136 transparent 10em
133 ); 137 );
134 138
@@ -136,7 +140,7 @@
136 140
137 // --------------------------------------------------------------------------- 141 // ---------------------------------------------------------------------------
138 142
139 $gradient7: iro-easing-gradient( 143 $gradient7: gradients.easing-gradient(
140 linear, 144 linear,
141 to right, 145 to right,
142 #000 2em, 146 #000 2em,
@@ -149,13 +153,13 @@
149 $expected7: linear-gradient( 153 $expected7: linear-gradient(
150 to right, 154 to right,
151 #000 2em, 155 #000 2em,
152 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 2em + 4em * 0.25, 156 mix(#f00, #000, easing.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, 157 mix(#f00, #000, easing.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, 158 mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,
155 #f00 6em, 159 #f00 6em,
156 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 6em + 4em * 0.25, 160 mix(transparent, #f00, easing.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, 161 mix(transparent, #f00, easing.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, 162 mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,
159 transparent 10em 163 transparent 10em
160 ); 164 );
161 165
@@ -163,7 +167,7 @@
163 167
164 // --------------------------------------------------------------------------- 168 // ---------------------------------------------------------------------------
165 169
166 $gradient8: iro-easing-gradient( 170 $gradient8: gradients.easing-gradient(
167 linear, 171 linear,
168 to right, 172 to right,
169 #000, 173 #000,
@@ -176,13 +180,13 @@
176 $expected8: linear-gradient( 180 $expected8: linear-gradient(
177 to right, 181 to right,
178 #000 0, 182 #000 0,
179 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 50% * 0.25, 183 mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 50% * 0.25,
180 mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 50% * 0.5, 184 mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 50% * 0.5,
181 mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 50% * 0.75, 185 mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 50% * 0.75,
182 #f00 50%, 186 #f00 50%,
183 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 50% + 50% * 0.25, 187 mix(transparent, #f00, easing.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, 188 mix(transparent, #f00, easing.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, 189 mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,
186 transparent 100% 190 transparent 100%
187 ); 191 );
188 192
@@ -190,7 +194,7 @@
190 194
191 // --------------------------------------------------------------------------- 195 // ---------------------------------------------------------------------------
192 196
193 $gradient9: iro-easing-gradient( 197 $gradient9: gradients.easing-gradient(
194 linear, 198 linear,
195 to right, 199 to right,
196 #000, 200 #000,
@@ -203,13 +207,13 @@
203 $expected9: linear-gradient( 207 $expected9: linear-gradient(
204 to right, 208 to right,
205 #000 0, 209 #000 0,
206 mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 10em * 0.25, 210 mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 10em * 0.25,
207 mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 10em * 0.5, 211 mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 10em * 0.5,
208 mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 10em * 0.75, 212 mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 10em * 0.75,
209 #f00 10em, 213 #f00 10em,
210 mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 10em + 10em * 0.25, 214 mix(transparent, #f00, easing.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, 215 mix(transparent, #f00, easing.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, 216 mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,
213 transparent 20em 217 transparent 20em
214 ); 218 );
215 219
@@ -217,7 +221,7 @@
217 221
218 // --------------------------------------------------------------------------- 222 // ---------------------------------------------------------------------------
219 223
220 $gradient10: iro-easing-gradient( 224 $gradient10: gradients.easing-gradient(
221 linear, 225 linear,
222 to right, 226 to right,
223 #000, 227 #000,
@@ -228,9 +232,9 @@
228 $expected10: linear-gradient( 232 $expected10: linear-gradient(
229 to right, 233 to right,
230 #000 0, 234 #000 0,
231 mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%, 235 mix(transparent, #000, easing.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%, 236 mix(transparent, #000, easing.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%, 237 mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,
234 transparent 100% 238 transparent 100%
235 ); 239 );
236 240
@@ -238,7 +242,7 @@
238 242
239 // --------------------------------------------------------------------------- 243 // ---------------------------------------------------------------------------
240 244
241 $gradient11: iro-easing-gradient( 245 $gradient11: gradients.easing-gradient(
242 linear, 246 linear,
243 to right, 247 to right,
244 #000, 248 #000,
diff --git a/test/_harmony.scss b/test/_harmony.scss
index 7945be1..c7d309c 100644
--- a/test/_harmony.scss
+++ b/test/_harmony.scss
@@ -1,46 +1,49 @@
1@use 'true' as *;
1@use 'sass:math'; 2@use 'sass:math';
3@use '../src/functions';
4@use '../src/harmony';
2 5
3@function _limit-decimals($n) { 6@function _limit-decimals($n) {
4 @return math.div(math.floor($n * 1000), 1000); 7 @return math.div(math.floor($n * 1000), 1000);
5} 8}
6 9
7@include describe('Harmony') { 10@include describe('harmony') {
8 @include it('iro-harmony-modular-scale') { 11 @include it('modular-scale') {
9 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale'); 12 @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale');
10 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale'); 13 @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale');
11 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale'); 14 @include assert-equal(_limit-decimals(harmony.modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale');
12 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale'); 15 @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale');
13 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale'); 16 @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale');
14 17
15 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale'); 18 @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale');
16 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale'); 19 @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale');
17 @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale'); 20 @include assert-equal(_limit-decimals(harmony.modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale');
18 @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'); 21 @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 1em 1.5em, 1.2)), 0.868em, '-1 iteration, 1em 2em base, 1.1 scale');
19 @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'); 22 @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 1em 1.5em, 1.2)), 0.833em, '-2 iterations, 1em 2em base, 1.1 scale');
20 } 23 }
21 24
22 @include it('iro-responsive-modular-scale') { 25 @include it('responsive-modular-scale') {
23 @include assert('Single-stranded, fluid') { 26 @include assert('Single-stranded, fluid') {
24 $ms: ( 27 $ms: (
25 320px: (1rem, 1.1), 28 320px: (1rem, 1.1),
26 640px: (1rem, 1.2) 29 640px: (1rem, 1.2)
27 ); 30 );
28 31
29 $rem320px: iro-px-to-rem(320px); 32 $rem320px: functions.px-to-rem(320px);
30 $rem640px: iro-px-to-rem(640px); 33 $rem640px: functions.px-to-rem(640px);
31 $diff320px: iro-strip-unit($rem640px - $rem320px); 34 $diff320px: functions.strip-unit($rem640px - $rem320px);
32 35
33 @include output { 36 @include output {
34 h3 { 37 h3 {
35 @include iro-responsive-modular-scale(font-size, 0, $ms); 38 @include harmony.responsive-modular-scale(font-size, 0, $ms);
36 } 39 }
37 40
38 h2 { 41 h2 {
39 @include iro-responsive-modular-scale(font-size, 1, $ms); 42 @include harmony.responsive-modular-scale(font-size, 1, $ms);
40 } 43 }
41 44
42 h1 { 45 h1 {
43 @include iro-responsive-modular-scale(font-size, 2, $ms); 46 @include harmony.responsive-modular-scale(font-size, 2, $ms);
44 } 47 }
45 } 48 }
46 49
@@ -89,21 +92,21 @@
89 640px: (1rem, 1.2) 92 640px: (1rem, 1.2)
90 ); 93 );
91 94
92 $rem320px: iro-px-to-rem(320px); 95 $rem320px: functions.px-to-rem(320px);
93 $rem640px: iro-px-to-rem(640px); 96 $rem640px: functions.px-to-rem(640px);
94 $diff320px: iro-strip-unit($rem640px - $rem320px); 97 $diff320px: functions.strip-unit($rem640px - $rem320px);
95 98
96 @include output { 99 @include output {
97 h3 { 100 h3 {
98 @include iro-responsive-modular-scale(font-size, 0, $ms, false); 101 @include harmony.responsive-modular-scale(font-size, 0, $ms, false);
99 } 102 }
100 103
101 h2 { 104 h2 {
102 @include iro-responsive-modular-scale(font-size, 1, $ms, false); 105 @include harmony.responsive-modular-scale(font-size, 1, $ms, false);
103 } 106 }
104 107
105 h1 { 108 h1 {
106 @include iro-responsive-modular-scale(font-size, 2, $ms, false); 109 @include harmony.responsive-modular-scale(font-size, 2, $ms, false);
107 } 110 }
108 } 111 }
109 112
@@ -140,21 +143,21 @@
140 640px: (1rem 2rem, 1.2) 143 640px: (1rem 2rem, 1.2)
141 ); 144 );
142 145
143 $rem320px: iro-px-to-rem(320px); 146 $rem320px: functions.px-to-rem(320px);
144 $rem640px: iro-px-to-rem(640px); 147 $rem640px: functions.px-to-rem(640px);
145 $diff320px: iro-strip-unit($rem640px - $rem320px); 148 $diff320px: functions.strip-unit($rem640px - $rem320px);
146 149
147 @include output { 150 @include output {
148 h3 { 151 h3 {
149 @include iro-responsive-modular-scale(font-size, 0, $ms); 152 @include harmony.responsive-modular-scale(font-size, 0, $ms);
150 } 153 }
151 154
152 h2 { 155 h2 {
153 @include iro-responsive-modular-scale(font-size, 1, $ms); 156 @include harmony.responsive-modular-scale(font-size, 1, $ms);
154 } 157 }
155 158
156 h1 { 159 h1 {
157 @include iro-responsive-modular-scale(font-size, 2, $ms); 160 @include harmony.responsive-modular-scale(font-size, 2, $ms);
158 } 161 }
159 } 162 }
160 163
@@ -203,21 +206,21 @@
203 640px: (1rem 2rem, 1.2) 206 640px: (1rem 2rem, 1.2)
204 ); 207 );
205 208
206 $rem320px: iro-px-to-rem(320px); 209 $rem320px: functions.px-to-rem(320px);
207 $rem640px: iro-px-to-rem(640px); 210 $rem640px: functions.px-to-rem(640px);
208 $diff320px: iro-strip-unit($rem640px - $rem320px); 211 $diff320px: functions.strip-unit($rem640px - $rem320px);
209 212
210 @include output { 213 @include output {
211 h3 { 214 h3 {
212 @include iro-responsive-modular-scale(font-size, 0, $ms, false); 215 @include harmony.responsive-modular-scale(font-size, 0, $ms, false);
213 } 216 }
214 217
215 h2 { 218 h2 {
216 @include iro-responsive-modular-scale(font-size, 1, $ms, false); 219 @include harmony.responsive-modular-scale(font-size, 1, $ms, false);
217 } 220 }
218 221
219 h1 { 222 h1 {
220 @include iro-responsive-modular-scale(font-size, 2, $ms, false); 223 @include harmony.responsive-modular-scale(font-size, 2, $ms, false);
221 } 224 }
222 } 225 }
223 226
diff --git a/test/_props.scss b/test/_props.scss
index 021ed4c..71d88c5 100644
--- a/test/_props.scss
+++ b/test/_props.scss
@@ -1,5 +1,9 @@
1// sass-lint:disable empty-args 1// sass-lint:disable empty-args
2 2
3@use 'true' as *;
4@use '../src/functions';
5@use '../src/props';
6
3@include describe('Property trees') { 7@include describe('Property trees') {
4 @include it('Validate names') { 8 @include it('Validate names') {
5 $map-valid: ( 9 $map-valid: (
@@ -24,8 +28,8 @@
24 ) 28 )
25 ); 29 );
26 30
27 @include assert-equal(iro-props-validate($map-valid), true, 'Check valid map'); 31 @include assert-equal(props.validate($map-valid), true, 'Check valid map');
28 @include assert-equal(iro-props-validate($map-invalid), false, 'Check invalid map'); 32 @include assert-equal(props.validate($map-invalid), false, 'Check invalid map');
29 } 33 }
30 34
31 @include it('Save / Delete') { 35 @include it('Save / Delete') {
@@ -40,8 +44,8 @@
40 ) 44 )
41 ); 45 );
42 46
43 @include assert-equal(iro-props-store($map), null, 'Save default tree'); 47 @include assert-equal(props.store($map), null, 'Save default tree');
44 @include assert-equal(iro-props-clear(), null, 'Delete default tree'); 48 @include assert-equal(props.clear(), null, 'Delete default tree');
45 } 49 }
46 50
47 @include it('Read') { 51 @include it('Read') {
@@ -78,32 +82,32 @@
78 ) 82 )
79 ); 83 );
80 84
81 @include assert-equal(iro-props-store($map1), null, 'Save default tree'); 85 @include assert-equal(props.store($map1), null, 'Save default tree');
82 @include assert-equal(iro-props-store($map2, 'test'), null, 'Save "test" tree'); 86 @include assert-equal(props.store($map2, 'test'), null, 'Save "test" tree');
83 87
84 @include iro-props-namespace('ns') { 88 @include props.namespace('ns') {
85 @include assert-equal(iro-props-store($map3, 'namespaced'), null, 'Save "namespaced" tree'); 89 @include assert-equal(props.store($map3, 'namespaced'), null, 'Save "namespaced" tree');
86 } 90 }
87 91
88 @include assert-equal(iro-props-get-static(--background), map-get($map1, --background), 'Get --background in default'); 92 @include assert-equal(props.get-static(--background), map-get($map1, --background), 'Get --background in default');
89 @include assert-equal(iro-props-get-static(--buttons --primary --background), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get --buttons --primary --background in default'); 93 @include assert-equal(props.get-static(--buttons --primary --background), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get --buttons --primary --background in default');
90 @include assert-equal(iro-props-get-static(--box, $default: false), false, 'Get nonexistent in default'); 94 @include assert-equal(props.get-static(--box, $default: false), false, 'Get nonexistent in default');
91 95
92 @include assert-equal(iro-props-get-static(--background, 'test'), map-get($map2, --background), 'Get --background in "test"'); 96 @include assert-equal(props.get-static(--background, 'test'), map-get($map2, --background), 'Get --background in "test"');
93 @include assert-equal(iro-props-get-static(--buttons --primary --background, 'test'), map-get(map-get(map-get($map2, --buttons), --primary), --background), 'Get --buttons --primary --background in "test"'); 97 @include assert-equal(props.get-static(--buttons --primary --background, 'test'), map-get(map-get(map-get($map2, --buttons), --primary), --background), 'Get --buttons --primary --background in "test"');
94 @include assert-equal(iro-props-get-static(--box, 'test', $default: false), false, 'Get nonexistent in "test"'); 98 @include assert-equal(props.get-static(--box, 'test', $default: false), false, 'Get nonexistent in "test"');
95 99
96 @include assert-equal(iro-props-get-static(--background, 'namespaced', $default: false), false, 'Get --background in "namespaced"'); 100 @include assert-equal(props.get-static(--background, 'namespaced', $default: false), false, 'Get --background in "namespaced"');
97 @include assert-equal(iro-props-get-static(--ns --background, 'namespaced'), map-get($map3, --background), 'Get --ns --background in "namespaced"'); 101 @include assert-equal(props.get-static(--ns --background, 'namespaced'), map-get($map3, --background), 'Get --ns --background in "namespaced"');
98 @include iro-props-namespace('ns') { 102 @include props.namespace('ns') {
99 @include assert-equal(iro-props-get-static(--background, 'namespaced'), map-get($map3, --background), 'Get namespaced --background in "namespaced"'); 103 @include assert-equal(props.get-static(--background, 'namespaced'), map-get($map3, --background), 'Get namespaced --background in "namespaced"');
100 @include assert-equal(iro-props-get-static(--buttons --primary --background, 'namespaced'), map-get(map-get(map-get($map3, --buttons), --primary), --background), 'Get namespaced --buttons --primary --background in "namespaced"'); 104 @include assert-equal(props.get-static(--buttons --primary --background, 'namespaced'), map-get(map-get(map-get($map3, --buttons), --primary), --background), 'Get namespaced --buttons --primary --background in "namespaced"');
101 @include assert-equal(iro-props-get-static(--box, 'namespaced', $default: false), false, 'Get namespaced nonexistent in "namespaced"'); 105 @include assert-equal(props.get-static(--box, 'namespaced', $default: false), false, 'Get namespaced nonexistent in "namespaced"');
102 } 106 }
103 107
104 @include assert-equal(iro-props-clear(), null, 'Delete default tree'); 108 @include assert-equal(props.clear(), null, 'Delete default tree');
105 @include assert-equal(iro-props-clear('test'), null, 'Delete "test" tree'); 109 @include assert-equal(props.clear('test'), null, 'Delete "test" tree');
106 @include assert-equal(iro-props-clear('namespaced'), null, 'Delete "namespaced" tree'); 110 @include assert-equal(props.clear('namespaced'), null, 'Delete "namespaced" tree');
107 } 111 }
108 112
109 @include it('Overwrite') { 113 @include it('Overwrite') {
@@ -127,15 +131,15 @@
127 ) 131 )
128 ); 132 );
129 133
130 @include assert-equal(iro-props-store($map1), null, 'Save default tree'); 134 @include assert-equal(props.store($map1), null, 'Save default tree');
131 @include assert-equal(iro-props-store($map2, $merge: true), null, 'Overwrite default tree'); 135 @include assert-equal(props.store($map2, $merge: true), null, 'Overwrite default tree');
132 136
133 @include assert-equal(iro-props-get-static(), iro-map-merge-recursive($map1, $map2), 'After update, get whole map'); 137 @include assert-equal(props.get-static(), functions.map-merge-recursive($map1, $map2), 'After update, get whole map');
134 @include assert-equal(iro-props-get-static(--background), map-get($map2, --background), 'After update, get --background'); 138 @include assert-equal(props.get-static(--background), map-get($map2, --background), 'After update, get --background');
135 @include assert-equal(iro-props-get-static(--text), map-get($map2, --text), 'After update, get --text'); 139 @include assert-equal(props.get-static(--text), map-get($map2, --text), 'After update, get --text');
136 @include assert-equal(iro-props-get-static(--buttons --primary --text), map-get(map-get(map-get($map1, --buttons), --primary), --text), 'After update, get --buttons --primary --text'); 140 @include assert-equal(props.get-static(--buttons --primary --text), map-get(map-get(map-get($map1, --buttons), --primary), --text), 'After update, get --buttons --primary --text');
137 141
138 @include assert-equal(iro-props-clear(), null, 'Delete default tree'); 142 @include assert-equal(props.clear(), null, 'Delete default tree');
139 } 143 }
140 144
141 @include it('Native assignment') { 145 @include it('Native assignment') {
@@ -155,10 +159,10 @@
155 ); 159 );
156 160
157 @include assert('Simple') { 161 @include assert('Simple') {
158 @include iro-props-store($map); 162 @include props.store($map);
159 163
160 @include output { 164 @include output {
161 @include iro-props-assign; 165 @include props.assign;
162 } 166 }
163 167
164 @include expect { 168 @include expect {
@@ -170,14 +174,14 @@
170 --buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)}; 174 --buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)};
171 } 175 }
172 176
173 @include iro-props-clear; 177 @include props.clear;
174 } 178 }
175 179
176 @include assert('Filtered') { 180 @include assert('Filtered') {
177 @include iro-props-store($map); 181 @include props.store($map);
178 182
179 @include output { 183 @include output {
180 @include iro-props-assign($skip: --buttons); 184 @include props.assign($skip: --buttons);
181 } 185 }
182 186
183 @include expect { 187 @include expect {
@@ -185,16 +189,16 @@
185 --text: #{map-get($map, --text)}; 189 --text: #{map-get($map, --text)};
186 } 190 }
187 191
188 @include iro-props-clear; 192 @include props.clear;
189 } 193 }
190 194
191 @include assert('Namespaced') { 195 @include assert('Namespaced') {
192 @include iro-props-namespace('ns') { 196 @include props.namespace('ns') {
193 @include iro-props-store($map); 197 @include props.store($map);
194 } 198 }
195 199
196 @include output { 200 @include output {
197 @include iro-props-assign; 201 @include props.assign;
198 } 202 }
199 203
200 @include expect { 204 @include expect {
@@ -206,7 +210,7 @@
206 --ns--buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)}; 210 --ns--buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)};
207 } 211 }
208 212
209 @include iro-props-clear; 213 @include props.clear;
210 } 214 }
211 } 215 }
212 216
@@ -226,17 +230,17 @@
226 ) 230 )
227 ); 231 );
228 232
229 @include assert-equal(iro-props-store($map), null, 'Save default tree'); 233 @include assert-equal(props.store($map), null, 'Save default tree');
230 234
231 @include assert-equal(iro-props-get(--background), var(--background), 'Get --background'); 235 @include assert-equal(props.get(--background), var(--background), 'Get --background');
232 @include assert-equal(iro-props-get(--buttons --primary --text), var(--buttons--primary--text), 'Get --buttons --primary --text'); 236 @include assert-equal(props.get(--buttons --primary --text), var(--buttons--primary--text), 'Get --buttons --primary --text');
233 @include assert-equal(iro-props-get(--buttons --secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get --buttons --secondary --text with default'); 237 @include assert-equal(props.get(--buttons --secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get --buttons --secondary --text with default');
234 @include iro-props-namespace('buttons') { 238 @include props.namespace('buttons') {
235 @include assert-equal(iro-props-get(--primary --text), var(--buttons--primary--text), 'Get via namespace "buttons" --primary --text'); 239 @include assert-equal(props.get(--primary --text), var(--buttons--primary--text), 'Get via namespace "buttons" --primary --text');
236 @include assert-equal(iro-props-get(--secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get via namespace "buttons" --secondary --text with default'); 240 @include assert-equal(props.get(--secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get via namespace "buttons" --secondary --text with default');
237 } 241 }
238 242
239 @include assert-equal(iro-props-clear(), null, 'Delete default tree'); 243 @include assert-equal(props.clear(), null, 'Delete default tree');
240 } 244 }
241 245
242 @include it('References') { 246 @include it('References') {
@@ -255,25 +259,25 @@
255 --background: #eee, 259 --background: #eee,
256 --buttons: ( 260 --buttons: (
257 --primary: ( 261 --primary: (
258 --background: iro-props-ref($key: --background) 262 --background: props.ref($key: --background)
259 ), 263 ),
260 --default: iro-props-ref($key: --buttons --primary) 264 --default: props.ref($key: --buttons --primary)
261 ) 265 )
262 ); 266 );
263 267
264 @include assert-equal(iro-props-store($map1), null, 'Save default tree'); 268 @include assert-equal(props.store($map1), null, 'Save default tree');
265 @include assert-equal(iro-props-store($map2, 'second'), null, 'Save "second" tree'); 269 @include assert-equal(props.store($map2, 'second'), null, 'Save "second" tree');
266 270
267 @include assert-equal(iro-props-get-static(--buttons --primary --background, 'second'), map-get($map1, --background), 'Get referenced value'); 271 @include assert-equal(props.get-static(--buttons --primary --background, 'second'), map-get($map1, --background), 'Get referenced value');
268 @include assert-equal(iro-props-get(--buttons --primary --background, 'second'), var(--buttons--primary--background), 'Get referenced value, native'); 272 @include assert-equal(props.get(--buttons --primary --background, 'second'), var(--buttons--primary--background), 'Get referenced value, native');
269 273
270 @include assert-equal(iro-props-get-static(--buttons --default, 'second'), map-get(map-get($map1, --buttons), --primary), 'Get referenced subtree, whole'); 274 @include assert-equal(props.get-static(--buttons --default, 'second'), map-get(map-get($map1, --buttons), --primary), 'Get referenced subtree, whole');
271 @include assert-equal(iro-props-get-static(--buttons --default --background, 'second'), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get referenced subtree, inner value'); 275 @include assert-equal(props.get-static(--buttons --default --background, 'second'), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get referenced subtree, inner value');
272 @include assert-equal(iro-props-get(--buttons --default --background, 'second'), var(--buttons--default--background), 'Get referenced subtree, native'); 276 @include assert-equal(props.get(--buttons --default --background, 'second'), var(--buttons--default--background), 'Get referenced subtree, native');
273 277
274 @include assert('Native assignment') { 278 @include assert('Native assignment') {
275 @include output { 279 @include output {
276 @include iro-props-assign('second'); 280 @include props.assign('second');
277 } 281 }
278 282
279 @include expect { 283 @include expect {
@@ -284,7 +288,7 @@
284 } 288 }
285 } 289 }
286 290
287 @include assert-equal(iro-props-clear(), null, 'Delete default tree'); 291 @include assert-equal(props.clear(), null, 'Delete default tree');
288 @include assert-equal(iro-props-clear('second'), null, 'Delete "second" tree'); 292 @include assert-equal(props.clear('second'), null, 'Delete "second" tree');
289 } 293 }
290} 294}
diff --git a/test/_responsive.scss b/test/_responsive.scss
index 6dfe868..6780ae6 100644
--- a/test/_responsive.scss
+++ b/test/_responsive.scss
@@ -1,9 +1,13 @@
1@include describe('Responsive') { 1@use 'true' as *;
2 @include it('iro-responsive-fluid-calc') { 2@use '../src/functions';
3 $rem600px: iro-px-to-rem(600px); 3@use '../src/responsive';
4 $rem800px: iro-px-to-rem(800px);
5 4
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'); 5@include describe('responsive') {
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'); 6 @include it('fluid-calc') {
7 $rem600px: functions.px-to-rem(600px);
8 $rem800px: functions.px-to-rem(800px);
9
10 @include assert-equal('#{responsive.fluid-calc(2rem, 4rem, 600px, 800px)}', 'calc(2rem + 2 * (100vw - #{$rem600px}) / #{functions.strip-unit($rem800px - $rem600px)})', 'Responsive value from 2rem to 4rem over 600px to 800px');
11 @include assert-equal('#{responsive.fluid-calc(4px, 12px, 600px, 800px)}', 'calc(4px + 8 * (100vw - 600px) / 200)', 'Responsive value from 4px to 12px over 600px to 800px');
8 } 12 }
9} 13}
diff --git a/test/bem/_iro-bem-at-theme.scss b/test/bem/_at-theme.scss
index d2d0696..29a4eba 100644
--- a/test/bem/_iro-bem-at-theme.scss
+++ b/test/bem/_at-theme.scss
@@ -1,16 +1,19 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - single theme 8// - /// 1 /// - single theme
6// - /// 2 /// - with sub-theme 9// - /// 2 /// - with sub-theme
7// 10//
8 11
9@include it('iro-bem-at-theme') { 12@include it('at-theme') {
10 @include assert('single theme') { /// 1 /// 13 @include assert('single theme') { /// 1 ///
11 @include output(false) { 14 @include output(false) {
12 @include iro-bem-block('something') { 15 @include bem.block('something') {
13 @include iro-bem-at-theme('theme') { 16 @include bem.at-theme('theme') {
14 font-size: 2em; 17 font-size: 2em;
15 } 18 }
16 } 19 }
@@ -27,12 +30,12 @@
27 30
28 @include assert('with sub-theme') { /// 2 /// 31 @include assert('with sub-theme') { /// 2 ///
29 @include output(false) { 32 @include output(false) {
30 @include iro-bem-block('something') { 33 @include bem.block('something') {
31 @include iro-bem-at-theme('theme') { 34 @include bem.at-theme('theme') {
32 font-size: 2em; 35 font-size: 2em;
33 } 36 }
34 37
35 @include iro-bem-at-theme('theme', 'subtheme') { 38 @include bem.at-theme('theme', 'subtheme') {
36 font-size: 3em; 39 font-size: 3em;
37 } 40 }
38 } 41 }
diff --git a/test/bem/_iro-bem-block.scss b/test/bem/_block.scss
index a93d803..fb3a545 100644
--- a/test/bem/_iro-bem-block.scss
+++ b/test/bem/_block.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - without namespace 8// - /// 1 /// - without namespace
@@ -8,10 +11,10 @@
8// - /// 4 /// - within selector 11// - /// 4 /// - within selector
9// 12//
10 13
11@include it('iro-bem-block') { 14@include it('block') {
12 @include assert('without namespace') { /// 1 /// 15 @include assert('without namespace') { /// 1 ///
13 @include output(false) { 16 @include output(false) {
14 @include iro-bem-block('something') { 17 @include bem.block('something') {
15 font-size: 1em; 18 font-size: 1em;
16 } 19 }
17 } 20 }
@@ -23,17 +26,17 @@
23 } 26 }
24 } 27 }
25 28
26 @each $ns in map-keys($iro-bem-namespaces) { 29 @each $ns in map-keys(bem.$namespaces) {
27 @include assert('with namespace "#{$ns}"') { /// 2 /// 30 @include assert('with namespace "#{$ns}"') { /// 2 ///
28 @include output(false) { 31 @include output(false) {
29 @include iro-bem-block('something', $ns) { 32 @include bem.block('something', $ns) {
30 font-size: 1em; 33 font-size: 1em;
31 } 34 }
32 } 35 }
33 36
34 @include expect(false) { 37 @include expect(false) {
35 @if $ns != 'theme' { 38 @if $ns != 'theme' {
36 .#{map-get($iro-bem-namespaces, $ns)}-something { 39 .#{map-get(bem.$namespaces, $ns)}-something {
37 font-size: 1em; 40 font-size: 1em;
38 } 41 }
39 } @else { 42 } @else {
@@ -49,9 +52,9 @@
49 52
50 @include assert('nested') { /// 3 /// 53 @include assert('nested') { /// 3 ///
51 @include output(false) { 54 @include output(false) {
52 @include iro-bem-theme('theme') { 55 @include bem.theme('theme') {
53 @include iro-bem-theme('subtheme') { 56 @include bem.theme('subtheme') {
54 @include iro-bem-block('something') { 57 @include bem.block('something') {
55 font-size: 2em; 58 font-size: 2em;
56 } 59 }
57 } 60 }
@@ -70,7 +73,7 @@
70 @include assert('within selector') { /// 4 /// 73 @include assert('within selector') { /// 4 ///
71 @include output(false) { 74 @include output(false) {
72 .sel { 75 .sel {
73 @include iro-bem-block('something') { 76 @include bem.block('something') {
74 font-size: 2em; 77 font-size: 2em;
75 } 78 }
76 } 79 }
diff --git a/test/bem/_iro-bem-composed-of.scss b/test/bem/_composed-of.scss
index e724eb8..fcbf2c4 100644
--- a/test/bem/_iro-bem-composed-of.scss
+++ b/test/bem/_composed-of.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - without namespace, single 8// - /// 1 /// - without namespace, single
@@ -8,15 +11,15 @@
8// - /// 4 /// - with namespace, multiple 11// - /// 4 /// - with namespace, multiple
9// 12//
10 13
11@include it('iro-bem-composed-of') { 14@include it('composed-of') {
12 @include assert('without namespace, single') { /// 1 /// 15 @include assert('without namespace, single') { /// 1 ///
13 @include output(false) { 16 @include output(false) {
14 @include iro-bem-block('something') { 17 @include bem.block('something') {
15 font-size: 1em; 18 font-size: 1em;
16 } 19 }
17 20
18 @include iro-bem-block('another') { 21 @include bem.block('another') {
19 @include iro-bem-composed-of('something'); 22 @include bem.composed-of('something');
20 23
21 font-size: 2em; 24 font-size: 2em;
22 } 25 }
@@ -33,15 +36,15 @@
33 } 36 }
34 } 37 }
35 38
36 @each $ns in map-keys($iro-bem-namespaces) { 39 @each $ns in map-keys(bem.$namespaces) {
37 @include assert('with namespace "#{$ns}", single') { /// 2 /// 40 @include assert('with namespace "#{$ns}", single') { /// 2 ///
38 @include output(false) { 41 @include output(false) {
39 @include iro-bem-block('something', $ns) { 42 @include bem.block('something', $ns) {
40 font-size: 1em; 43 font-size: 1em;
41 } 44 }
42 45
43 @include iro-bem-block('another') { 46 @include bem.block('another') {
44 @include iro-bem-composed-of('something' $ns); 47 @include bem.composed-of('something' $ns);
45 48
46 font-size: 2em; 49 font-size: 2em;
47 } 50 }
@@ -49,7 +52,7 @@
49 52
50 @include expect(false) { 53 @include expect(false) {
51 @if $ns != 'theme' { 54 @if $ns != 'theme' {
52 .#{map-get($iro-bem-namespaces, $ns)}-something { 55 .#{map-get(bem.$namespaces, $ns)}-something {
53 font-size: 1em; 56 font-size: 1em;
54 } 57 }
55 } @else { 58 } @else {
@@ -69,16 +72,16 @@
69 72
70 @include assert('without namespace, multiple') { /// 3 /// 73 @include assert('without namespace, multiple') { /// 3 ///
71 @include output(false) { 74 @include output(false) {
72 @include iro-bem-block('something') { 75 @include bem.block('something') {
73 font-size: 1em; 76 font-size: 1em;
74 } 77 }
75 78
76 @include iro-bem-block('somethingElse') { 79 @include bem.block('somethingElse') {
77 font-size: 1em; 80 font-size: 1em;
78 } 81 }
79 82
80 @include iro-bem-block('another') { 83 @include bem.block('another') {
81 @include iro-bem-composed-of('something', 'somethingElse'); 84 @include bem.composed-of('something', 'somethingElse');
82 85
83 font-size: 2em; 86 font-size: 2em;
84 } 87 }
@@ -99,19 +102,19 @@
99 } 102 }
100 } 103 }
101 104
102 @each $ns in map-keys($iro-bem-namespaces) { 105 @each $ns in map-keys(bem.$namespaces) {
103 @include assert('with namespace "#{$ns}", multiple') { /// 4 /// 106 @include assert('with namespace "#{$ns}", multiple') { /// 4 ///
104 @include output(false) { 107 @include output(false) {
105 @include iro-bem-block('something', $ns) { 108 @include bem.block('something', $ns) {
106 font-size: 1em; 109 font-size: 1em;
107 } 110 }
108 111
109 @include iro-bem-block('somethingElse', $ns) { 112 @include bem.block('somethingElse', $ns) {
110 font-size: 1em; 113 font-size: 1em;
111 } 114 }
112 115
113 @include iro-bem-block('another') { 116 @include bem.block('another') {
114 @include iro-bem-composed-of('something' $ns, 'somethingElse' $ns); 117 @include bem.composed-of('something' $ns, 'somethingElse' $ns);
115 118
116 font-size: 2em; 119 font-size: 2em;
117 } 120 }
@@ -119,11 +122,11 @@
119 122
120 @include expect(false) { 123 @include expect(false) {
121 @if $ns != 'theme' { 124 @if $ns != 'theme' {
122 .#{map-get($iro-bem-namespaces, $ns)}-something { 125 .#{map-get(bem.$namespaces, $ns)}-something {
123 font-size: 1em; 126 font-size: 1em;
124 } 127 }
125 128
126 .#{map-get($iro-bem-namespaces, $ns)}-somethingElse { 129 .#{map-get(bem.$namespaces, $ns)}-somethingElse {
127 font-size: 1em; 130 font-size: 1em;
128 } 131 }
129 } @else { 132 } @else {
diff --git a/test/bem/_iro-bem-element.scss b/test/bem/_element.scss
index f69f133..c8839de 100644
--- a/test/bem/_iro-bem-element.scss
+++ b/test/bem/_element.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - single element 8// - /// 1 /// - single element
@@ -18,11 +21,11 @@
18// - /// 14 /// - single element, in at-theme 21// - /// 14 /// - single element, in at-theme
19// 22//
20 23
21@include it('iro-bem-element') { 24@include it('element') {
22 @include assert('single element') { /// 1 /// 25 @include assert('single element') { /// 1 ///
23 @include output { 26 @include output {
24 @include iro-bem-block('something') { 27 @include bem.block('something') {
25 @include iro-bem-element('child') { 28 @include bem.elem('child') {
26 font-size: 2em; 29 font-size: 2em;
27 } 30 }
28 } 31 }
@@ -37,15 +40,15 @@
37 40
38 @include assert('single element, manual selector in-between') { /// 2 /// 41 @include assert('single element, manual selector in-between') { /// 2 ///
39 @include output(false) { 42 @include output(false) {
40 @include iro-bem-block('something') { 43 @include bem.block('something') {
41 &:hover { 44 &:hover {
42 @include iro-bem-element('child1') { 45 @include bem.elem('child1') {
43 font-size: 2em; 46 font-size: 2em;
44 } 47 }
45 } 48 }
46 49
47 .test & { 50 .test & {
48 @include iro-bem-element('child2') { 51 @include bem.elem('child2') {
49 font-size: 2em; 52 font-size: 2em;
50 } 53 }
51 } 54 }
@@ -65,9 +68,9 @@
65 68
66 @include assert('single element, modifier in-between') { /// 3 /// 69 @include assert('single element, modifier in-between') { /// 3 ///
67 @include output { 70 @include output {
68 @include iro-bem-block('something') { 71 @include bem.block('something') {
69 @include iro-bem-modifier('mod') { 72 @include bem.modifier('mod') {
70 @include iro-bem-element('child') { 73 @include bem.elem('child') {
71 font-size: 2em; 74 font-size: 2em;
72 } 75 }
73 } 76 }
@@ -83,11 +86,11 @@
83 86
84 @include assert('single element, nested') { /// 4 /// 87 @include assert('single element, nested') { /// 4 ///
85 @include output { 88 @include output {
86 @include iro-bem-block('something') { 89 @include bem.block('something') {
87 @include iro-bem-element('child') { 90 @include bem.elem('child') {
88 font-size: 2em; 91 font-size: 2em;
89 92
90 @include iro-bem-element('subchild') { 93 @include bem.elem('subchild') {
91 font-size: 3em; 94 font-size: 3em;
92 } 95 }
93 } 96 }
@@ -107,38 +110,38 @@
107 110
108 @include assert('single element, nested, manual selector in-between') { /// 5 /// 111 @include assert('single element, nested, manual selector in-between') { /// 5 ///
109 @include output(false) { 112 @include output(false) {
110 @include iro-bem-block('something') { 113 @include bem.block('something') {
111 &:hover { 114 &:hover {
112 @include iro-bem-element('child1') { 115 @include bem.elem('child1') {
113 font-size: 2em; 116 font-size: 2em;
114 117
115 @include iro-bem-element('subchild1') { 118 @include bem.elem('subchild1') {
116 font-size: 3em; 119 font-size: 3em;
117 } 120 }
118 } 121 }
119 } 122 }
120 123
121 .test & { 124 .test & {
122 @include iro-bem-element('child2') { 125 @include bem.elem('child2') {
123 font-size: 2em; 126 font-size: 2em;
124 127
125 @include iro-bem-element('subchild2') { 128 @include bem.elem('subchild2') {
126 font-size: 3em; 129 font-size: 3em;
127 } 130 }
128 } 131 }
129 } 132 }
130 133
131 @include iro-bem-element('child3') { 134 @include bem.elem('child3') {
132 font-size: 2em; 135 font-size: 2em;
133 136
134 &:hover { 137 &:hover {
135 @include iro-bem-element('subchild3') { 138 @include bem.elem('subchild3') {
136 font-size: 3em; 139 font-size: 3em;
137 } 140 }
138 } 141 }
139 142
140 .test & { 143 .test & {
141 @include iro-bem-element('subchild4') { 144 @include bem.elem('subchild4') {
142 font-size: 3em; 145 font-size: 3em;
143 } 146 }
144 } 147 }
@@ -179,22 +182,22 @@
179 182
180 @include assert('single element, nested, modifier in-between') { /// 6 /// 183 @include assert('single element, nested, modifier in-between') { /// 6 ///
181 @include output { 184 @include output {
182 @include iro-bem-block('something') { 185 @include bem.block('something') {
183 @include iro-bem-modifier('mod') { 186 @include bem.modifier('mod') {
184 @include iro-bem-element('child') { 187 @include bem.elem('child') {
185 font-size: 2em; 188 font-size: 2em;
186 189
187 @include iro-bem-element('subchild') { 190 @include bem.elem('subchild') {
188 font-size: 3em; 191 font-size: 3em;
189 } 192 }
190 } 193 }
191 } 194 }
192 195
193 @include iro-bem-element('child') { 196 @include bem.elem('child') {
194 font-size: 2em; 197 font-size: 2em;
195 198
196 @include iro-bem-modifier('mod') { 199 @include bem.modifier('mod') {
197 @include iro-bem-element('subchild') { 200 @include bem.elem('subchild') {
198 font-size: 3em; 201 font-size: 3em;
199 } 202 }
200 } 203 }
@@ -223,9 +226,9 @@
223 226
224 @include assert('single element, in at-theme') { /// 7 /// 227 @include assert('single element, in at-theme') { /// 7 ///
225 @include output(false) { 228 @include output(false) {
226 @include iro-bem-block('something') { 229 @include bem.block('something') {
227 @include iro-bem-at-theme('dark') { 230 @include bem.at-theme('dark') {
228 @include iro-bem-element('child') { 231 @include bem.elem('child') {
229 font-size: 2em; 232 font-size: 2em;
230 } 233 }
231 } 234 }
@@ -243,8 +246,8 @@
243 246
244 @include assert('multiple elements') { /// 8 /// 247 @include assert('multiple elements') { /// 8 ///
245 @include output { 248 @include output {
246 @include iro-bem-block('something') { 249 @include bem.block('something') {
247 @include iro-bem-element('child1', 'child2') { 250 @include bem.elem('child1', 'child2') {
248 font-size: 2em; 251 font-size: 2em;
249 } 252 }
250 } 253 }
@@ -260,15 +263,15 @@
260 263
261 @include assert('multiple elements, manual selector in-between') { /// 9 /// 264 @include assert('multiple elements, manual selector in-between') { /// 9 ///
262 @include output(false) { 265 @include output(false) {
263 @include iro-bem-block('something') { 266 @include bem.block('something') {
264 &:hover { 267 &:hover {
265 @include iro-bem-element('child1', 'child2') { 268 @include bem.elem('child1', 'child2') {
266 font-size: 2em; 269 font-size: 2em;
267 } 270 }
268 } 271 }
269 272
270 .test & { 273 .test & {
271 @include iro-bem-element('child3', 'child4') { 274 @include bem.elem('child3', 'child4') {
272 font-size: 2em; 275 font-size: 2em;
273 } 276 }
274 } 277 }
@@ -290,9 +293,9 @@
290 293
291 @include assert('multiple elements, modifier in-between') { /// 10 /// 294 @include assert('multiple elements, modifier in-between') { /// 10 ///
292 @include output { 295 @include output {
293 @include iro-bem-block('something') { 296 @include bem.block('something') {
294 @include iro-bem-modifier('mod') { 297 @include bem.modifier('mod') {
295 @include iro-bem-element('child1', 'child2') { 298 @include bem.elem('child1', 'child2') {
296 font-size: 2em; 299 font-size: 2em;
297 } 300 }
298 } 301 }
@@ -309,19 +312,19 @@
309 312
310 @include assert('multiple elements, nested') { /// 11 /// 313 @include assert('multiple elements, nested') { /// 11 ///
311 @include output { 314 @include output {
312 @include iro-bem-block('something') { 315 @include bem.block('something') {
313 @include iro-bem-element('child1', 'child2') { 316 @include bem.elem('child1', 'child2') {
314 font-size: 2em; 317 font-size: 2em;
315 318
316 @include iro-bem-element('subchild1') { 319 @include bem.elem('subchild1') {
317 font-size: 3em; 320 font-size: 3em;
318 } 321 }
319 } 322 }
320 323
321 @include iro-bem-element('child3') { 324 @include bem.elem('child3') {
322 font-size: 2em; 325 font-size: 2em;
323 326
324 @include iro-bem-element('subchild2', 'subchild3') { 327 @include bem.elem('subchild2', 'subchild3') {
325 font-size: 3em; 328 font-size: 3em;
326 } 329 }
327 } 330 }
@@ -352,34 +355,34 @@
352 355
353 @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// 356 @include assert('multiple elements, nested, manual selector in-between') { /// 12 ///
354 @include output(false) { 357 @include output(false) {
355 @include iro-bem-block('something') { 358 @include bem.block('something') {
356 @include iro-bem-element('child1', 'child2') { 359 @include bem.elem('child1', 'child2') {
357 font-size: 2em; 360 font-size: 2em;
358 361
359 &:hover { 362 &:hover {
360 @include iro-bem-element('subchild1') { 363 @include bem.elem('subchild1') {
361 font-size: 3em; 364 font-size: 3em;
362 } 365 }
363 } 366 }
364 367
365 .test & { 368 .test & {
366 @include iro-bem-element('subchild2') { 369 @include bem.elem('subchild2') {
367 font-size: 3em; 370 font-size: 3em;
368 } 371 }
369 } 372 }
370 } 373 }
371 374
372 @include iro-bem-element('child3') { 375 @include bem.elem('child3') {
373 font-size: 2em; 376 font-size: 2em;
374 377
375 &:hover { 378 &:hover {
376 @include iro-bem-element('subchild3', 'subchild4') { 379 @include bem.elem('subchild3', 'subchild4') {
377 font-size: 3em; 380 font-size: 3em;
378 } 381 }
379 } 382 }
380 383
381 .test & { 384 .test & {
382 @include iro-bem-element('subchild5', 'subchild6') { 385 @include bem.elem('subchild5', 'subchild6') {
383 font-size: 3em; 386 font-size: 3em;
384 } 387 }
385 } 388 }
@@ -421,22 +424,22 @@
421 424
422 @include assert('multiple elements, nested, modifier in-between') { /// 13 /// 425 @include assert('multiple elements, nested, modifier in-between') { /// 13 ///
423 @include output { 426 @include output {
424 @include iro-bem-block('something') { 427 @include bem.block('something') {
425 @include iro-bem-element('child1', 'child2') { 428 @include bem.elem('child1', 'child2') {
426 font-size: 2em; 429 font-size: 2em;
427 430
428 @include iro-bem-modifier('mod') { 431 @include bem.modifier('mod') {
429 @include iro-bem-element('subchild1') { 432 @include bem.elem('subchild1') {
430 font-size: 3em; 433 font-size: 3em;
431 } 434 }
432 } 435 }
433 } 436 }
434 437
435 @include iro-bem-element('child3') { 438 @include bem.elem('child3') {
436 font-size: 2em; 439 font-size: 2em;
437 440
438 @include iro-bem-modifier('mod') { 441 @include bem.modifier('mod') {
439 @include iro-bem-element('subchild2', 'subchild3') { 442 @include bem.elem('subchild2', 'subchild3') {
440 font-size: 3em; 443 font-size: 3em;
441 } 444 }
442 } 445 }
@@ -468,9 +471,9 @@
468 471
469 @include assert('multiple elements, in at-theme') { /// 14 /// 472 @include assert('multiple elements, in at-theme') { /// 14 ///
470 @include output(false) { 473 @include output(false) {
471 @include iro-bem-block('something') { 474 @include bem.block('something') {
472 @include iro-bem-at-theme('dark') { 475 @include bem.at-theme('dark') {
473 @include iro-bem-element('child1', 'child2') { 476 @include bem.elem('child1', 'child2') {
474 font-size: 2em; 477 font-size: 2em;
475 } 478 }
476 } 479 }
diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss
index 243ee35..33deca0 100644
--- a/test/bem/_examples.scss
+++ b/test/bem/_examples.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - Media object 8// - /// 1 /// - Media object
@@ -10,30 +13,30 @@
10@include it('Examples') { 13@include it('Examples') {
11 @include assert('Media object') { /// 1 /// 14 @include assert('Media object') { /// 1 ///
12 @include output { 15 @include output {
13 @include iro-bem-object('media') { 16 @include bem.object('media') {
14 display: flex; 17 display: flex;
15 align-items: flex-start; 18 align-items: flex-start;
16 justify-content: flex-start; 19 justify-content: flex-start;
17 20
18 @include iro-bem-element('image') { 21 @include bem.elem('image') {
19 display: block; 22 display: block;
20 flex: 0 0 auto; 23 flex: 0 0 auto;
21 order: 1; 24 order: 1;
22 overflow: hidden; 25 overflow: hidden;
23 } 26 }
24 27
25 @include iro-bem-element('body') { 28 @include bem.elem('body') {
26 order: 2; 29 order: 2;
27 } 30 }
28 31
29 @include iro-bem-modifier('rtl') { 32 @include bem.modifier('rtl') {
30 justify-content: flex-end; 33 justify-content: flex-end;
31 34
32 @include iro-bem-element('image') { 35 @include bem.elem('image') {
33 order: 2; 36 order: 2;
34 } 37 }
35 38
36 @include iro-bem-element('body') { 39 @include bem.elem('body') {
37 order: 1; 40 order: 1;
38 } 41 }
39 } 42 }
@@ -74,30 +77,30 @@
74 77
75 @include assert('Tabs') { /// 2 /// 78 @include assert('Tabs') { /// 2 ///
76 @include output { 79 @include output {
77 @include iro-bem-component('tabs') { 80 @include bem.component('tabs') {
78 position: relative; 81 position: relative;
79 82
80 @include iro-bem-element('tab') { 83 @include bem.elem('tab') {
81 float: left; 84 float: left;
82 } 85 }
83 86
84 @include iro-bem-element('tabRadio') { 87 @include bem.elem('tabRadio') {
85 position: absolute; 88 position: absolute;
86 top: -9999px; 89 top: -9999px;
87 left: -9999px; 90 left: -9999px;
88 91
89 &:checked { 92 &:checked {
90 @include iro-bem-sibling-element('tabLabel') { 93 @include bem.sibling-elem('tabLabel') {
91 font-weight: bold; 94 font-weight: bold;
92 } 95 }
93 96
94 @include iro-bem-sibling-element('tabContent') { 97 @include bem.sibling-elem('tabContent') {
95 display: block; 98 display: block;
96 } 99 }
97 } 100 }
98 } 101 }
99 102
100 @include iro-bem-element('tabLabel') { 103 @include bem.elem('tabLabel') {
101 cursor: pointer; 104 cursor: pointer;
102 105
103 &:hover, 106 &:hover,
@@ -106,7 +109,7 @@
106 } 109 }
107 } 110 }
108 111
109 @include iro-bem-element('tabContent') { 112 @include bem.elem('tabContent') {
110 position: absolute; 113 position: absolute;
111 left: 0; 114 left: 0;
112 display: none; 115 display: none;
@@ -156,28 +159,28 @@
156 159
157 @include assert('Accordion') { /// 3 /// 160 @include assert('Accordion') { /// 3 ///
158 @include output { 161 @include output {
159 @include iro-bem-component('accordion') { 162 @include bem.component('accordion') {
160 @include iro-bem-element('section') { 163 @include bem.elem('section') {
161 // nothing to do 164 // nothing to do
162 } 165 }
163 166
164 @include iro-bem-element('sectionCheckbox') { 167 @include bem.elem('sectionCheckbox') {
165 position: absolute; 168 position: absolute;
166 top: -9999px; 169 top: -9999px;
167 left: -9999px; 170 left: -9999px;
168 171
169 &:checked { 172 &:checked {
170 @include iro-bem-sibling-element('sectionLabel') { 173 @include bem.sibling-elem('sectionLabel') {
171 font-weight: bold; 174 font-weight: bold;
172 } 175 }
173 176
174 @include iro-bem-sibling-element('sectionContent') { 177 @include bem.sibling-elem('sectionContent') {
175 display: block; 178 display: block;
176 } 179 }
177 } 180 }
178 } 181 }
179 182
180 @include iro-bem-element('sectionLabel') { 183 @include bem.elem('sectionLabel') {
181 cursor: pointer; 184 cursor: pointer;
182 185
183 &:hover, 186 &:hover,
@@ -186,7 +189,7 @@
186 } 189 }
187 } 190 }
188 191
189 @include iro-bem-element('sectionContent') { 192 @include bem.elem('sectionContent') {
190 display: none; 193 display: none;
191 } 194 }
192 } 195 }
diff --git a/test/bem/_iro-bem-modifier.scss b/test/bem/_modifier.scss
index 60e2fe4..934efa3 100644
--- a/test/bem/_iro-bem-modifier.scss
+++ b/test/bem/_modifier.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - block modifier 8// - /// 1 /// - block modifier
@@ -19,14 +22,14 @@
19// - /// 15 /// - block and element modifiers, multiple elements 22// - /// 15 /// - block and element modifiers, multiple elements
20// 23//
21 24
22@include it('iro-bem-modifier') { 25@include it('modifier') {
23 @include assert('block modifier') { /// 1 /// 26 @include assert('block modifier') { /// 1 ///
24 @include output { 27 @include output {
25 @include iro-bem-block('something') { 28 @include bem.block('something') {
26 @include iro-bem-modifier('mod') { 29 @include bem.modifier('mod') {
27 font-size: 1.5em; 30 font-size: 1.5em;
28 31
29 @include iro-bem-modifier('submod') { 32 @include bem.modifier('submod') {
30 font-size: 1.75em; 33 font-size: 1.75em;
31 } 34 }
32 } 35 }
@@ -46,12 +49,12 @@
46 49
47 @include assert('block modifier, in at-theme') { /// 2 /// 50 @include assert('block modifier, in at-theme') { /// 2 ///
48 @include output(false) { 51 @include output(false) {
49 @include iro-bem-block('something') { 52 @include bem.block('something') {
50 @include iro-bem-at-theme('dark') { 53 @include bem.at-theme('dark') {
51 @include iro-bem-modifier('mod') { 54 @include bem.modifier('mod') {
52 font-size: 1.5em; 55 font-size: 1.5em;
53 56
54 @include iro-bem-modifier('submod') { 57 @include bem.modifier('submod') {
55 font-size: 1.75em; 58 font-size: 1.75em;
56 } 59 }
57 } 60 }
@@ -76,12 +79,12 @@
76 79
77 @include assert('element modifier, single element') { /// 3 /// 80 @include assert('element modifier, single element') { /// 3 ///
78 @include output { 81 @include output {
79 @include iro-bem-block('something') { 82 @include bem.block('something') {
80 @include iro-bem-element('child') { 83 @include bem.elem('child') {
81 @include iro-bem-modifier('mod') { 84 @include bem.modifier('mod') {
82 font-size: 2.5em; 85 font-size: 2.5em;
83 86
84 @include iro-bem-modifier('submod') { 87 @include bem.modifier('submod') {
85 font-size: 2.75em; 88 font-size: 2.75em;
86 } 89 }
87 } 90 }
@@ -102,12 +105,12 @@
102 105
103 @include assert('element modifier, multiple elements') { /// 4 /// 106 @include assert('element modifier, multiple elements') { /// 4 ///
104 @include output { 107 @include output {
105 @include iro-bem-block('something') { 108 @include bem.block('something') {
106 @include iro-bem-element('child1', 'child2') { 109 @include bem.elem('child1', 'child2') {
107 @include iro-bem-modifier('mod') { 110 @include bem.modifier('mod') {
108 font-size: 2.5em; 111 font-size: 2.5em;
109 112
110 @include iro-bem-modifier('submod') { 113 @include bem.modifier('submod') {
111 font-size: 2.75em; 114 font-size: 2.75em;
112 } 115 }
113 } 116 }
@@ -130,13 +133,13 @@
130 133
131 @include assert('element modifier, single related element') { /// 5 /// 134 @include assert('element modifier, single related element') { /// 5 ///
132 @include output { 135 @include output {
133 @include iro-bem-block('something') { 136 @include bem.block('something') {
134 @include iro-bem-element('child1') { 137 @include bem.elem('child1') {
135 @include iro-bem-next-element('child2') { 138 @include bem.next-elem('child2') {
136 @include iro-bem-modifier('mod') { 139 @include bem.modifier('mod') {
137 font-size: 2.5em; 140 font-size: 2.5em;
138 141
139 @include iro-bem-modifier('submod') { 142 @include bem.modifier('submod') {
140 font-size: 2.75em; 143 font-size: 2.75em;
141 } 144 }
142 } 145 }
@@ -158,13 +161,13 @@
158 161
159 @include assert('element modifier, multiple related elements') { /// 6 /// 162 @include assert('element modifier, multiple related elements') { /// 6 ///
160 @include output { 163 @include output {
161 @include iro-bem-block('something') { 164 @include bem.block('something') {
162 @include iro-bem-element('child1') { 165 @include bem.elem('child1') {
163 @include iro-bem-next-element('child2', 'child3') { 166 @include bem.next-elem('child2', 'child3') {
164 @include iro-bem-modifier('mod') { 167 @include bem.modifier('mod') {
165 font-size: 2.5em; 168 font-size: 2.5em;
166 169
167 @include iro-bem-modifier('submod') { 170 @include bem.modifier('submod') {
168 font-size: 2.75em; 171 font-size: 2.75em;
169 } 172 }
170 } 173 }
@@ -188,13 +191,13 @@
188 191
189 @include assert('element modifier, single element, manual selector before') { /// 7 /// 192 @include assert('element modifier, single element, manual selector before') { /// 7 ///
190 @include output(false) { 193 @include output(false) {
191 @include iro-bem-block('something') { 194 @include bem.block('something') {
192 &:hover { 195 &:hover {
193 @include iro-bem-element('child1') { 196 @include bem.elem('child1') {
194 @include iro-bem-modifier('mod') { 197 @include bem.modifier('mod') {
195 font-size: 2.5em; 198 font-size: 2.5em;
196 199
197 @include iro-bem-modifier('submod') { 200 @include bem.modifier('submod') {
198 font-size: 2.75em; 201 font-size: 2.75em;
199 } 202 }
200 } 203 }
@@ -202,11 +205,11 @@
202 } 205 }
203 206
204 .test & { 207 .test & {
205 @include iro-bem-element('child2') { 208 @include bem.elem('child2') {
206 @include iro-bem-modifier('mod') { 209 @include bem.modifier('mod') {
207 font-size: 2.5em; 210 font-size: 2.5em;
208 211
209 @include iro-bem-modifier('submod') { 212 @include bem.modifier('submod') {
210 font-size: 2.75em; 213 font-size: 2.75em;
211 } 214 }
212 } 215 }
@@ -236,13 +239,13 @@
236 239
237 @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// 240 @include assert('element modifier, multiple elements, manual selector before') { /// 8 ///
238 @include output(false) { 241 @include output(false) {
239 @include iro-bem-block('something') { 242 @include bem.block('something') {
240 &:hover { 243 &:hover {
241 @include iro-bem-element('child1', 'child2') { 244 @include bem.elem('child1', 'child2') {
242 @include iro-bem-modifier('mod') { 245 @include bem.modifier('mod') {
243 font-size: 2.5em; 246 font-size: 2.5em;
244 247
245 @include iro-bem-modifier('submod') { 248 @include bem.modifier('submod') {
246 font-size: 2.75em; 249 font-size: 2.75em;
247 } 250 }
248 } 251 }
@@ -250,11 +253,11 @@
250 } 253 }
251 254
252 .test & { 255 .test & {
253 @include iro-bem-element('child3', 'child4') { 256 @include bem.elem('child3', 'child4') {
254 @include iro-bem-modifier('mod') { 257 @include bem.modifier('mod') {
255 font-size: 2.5em; 258 font-size: 2.5em;
256 259
257 @include iro-bem-modifier('submod') { 260 @include bem.modifier('submod') {
258 font-size: 2.75em; 261 font-size: 2.75em;
259 } 262 }
260 } 263 }
@@ -288,14 +291,14 @@
288 291
289 @include assert('element modifier, single related element, manual selector before') { /// 9 /// 292 @include assert('element modifier, single related element, manual selector before') { /// 9 ///
290 @include output(false) { 293 @include output(false) {
291 @include iro-bem-block('something') { 294 @include bem.block('something') {
292 &:hover { 295 &:hover {
293 @include iro-bem-element('child1') { 296 @include bem.elem('child1') {
294 @include iro-bem-next-element('child2') { 297 @include bem.next-elem('child2') {
295 @include iro-bem-modifier('mod1') { 298 @include bem.modifier('mod1') {
296 font-size: 2.5em; 299 font-size: 2.5em;
297 300
298 @include iro-bem-modifier('submod1') { 301 @include bem.modifier('submod1') {
299 font-size: 2.75em; 302 font-size: 2.75em;
300 } 303 }
301 } 304 }
@@ -304,12 +307,12 @@
304 } 307 }
305 308
306 .test & { 309 .test & {
307 @include iro-bem-element('child3') { 310 @include bem.elem('child3') {
308 @include iro-bem-next-element('child4') { 311 @include bem.next-elem('child4') {
309 @include iro-bem-modifier('mod1') { 312 @include bem.modifier('mod1') {
310 font-size: 2.5em; 313 font-size: 2.5em;
311 314
312 @include iro-bem-modifier('submod1') { 315 @include bem.modifier('submod1') {
313 font-size: 2.75em; 316 font-size: 2.75em;
314 } 317 }
315 } 318 }
@@ -317,13 +320,13 @@
317 } 320 }
318 } 321 }
319 322
320 @include iro-bem-element('child5') { 323 @include bem.elem('child5') {
321 &:hover { 324 &:hover {
322 @include iro-bem-next-element('child6') { 325 @include bem.next-elem('child6') {
323 @include iro-bem-modifier('mod2') { 326 @include bem.modifier('mod2') {
324 font-size: 2.5em; 327 font-size: 2.5em;
325 328
326 @include iro-bem-modifier('submod2') { 329 @include bem.modifier('submod2') {
327 font-size: 2.75em; 330 font-size: 2.75em;
328 } 331 }
329 } 332 }
@@ -331,11 +334,11 @@
331 } 334 }
332 335
333 .test & { 336 .test & {
334 @include iro-bem-next-element('child7') { 337 @include bem.next-elem('child7') {
335 @include iro-bem-modifier('mod2') { 338 @include bem.modifier('mod2') {
336 font-size: 2.5em; 339 font-size: 2.5em;
337 340
338 @include iro-bem-modifier('submod2') { 341 @include bem.modifier('submod2') {
339 font-size: 2.75em; 342 font-size: 2.75em;
340 } 343 }
341 } 344 }
@@ -382,14 +385,14 @@
382 385
383 @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// 386 @include assert('element modifier, multiple related elements, manual selector before') { /// 10 ///
384 @include output(false) { 387 @include output(false) {
385 @include iro-bem-block('something') { 388 @include bem.block('something') {
386 &:hover { 389 &:hover {
387 @include iro-bem-element('child1') { 390 @include bem.elem('child1') {
388 @include iro-bem-next-element('child2', 'child3') { 391 @include bem.next-elem('child2', 'child3') {
389 @include iro-bem-modifier('mod1') { 392 @include bem.modifier('mod1') {
390 font-size: 2.5em; 393 font-size: 2.5em;
391 394
392 @include iro-bem-modifier('submod1') { 395 @include bem.modifier('submod1') {
393 font-size: 2.75em; 396 font-size: 2.75em;
394 } 397 }
395 } 398 }
@@ -398,12 +401,12 @@
398 } 401 }
399 402
400 .test & { 403 .test & {
401 @include iro-bem-element('child4') { 404 @include bem.elem('child4') {
402 @include iro-bem-next-element('child5', 'child6') { 405 @include bem.next-elem('child5', 'child6') {
403 @include iro-bem-modifier('mod1') { 406 @include bem.modifier('mod1') {
404 font-size: 2.5em; 407 font-size: 2.5em;
405 408
406 @include iro-bem-modifier('submod1') { 409 @include bem.modifier('submod1') {
407 font-size: 2.75em; 410 font-size: 2.75em;
408 } 411 }
409 } 412 }
@@ -411,13 +414,13 @@
411 } 414 }
412 } 415 }
413 416
414 @include iro-bem-element('child7') { 417 @include bem.elem('child7') {
415 &:hover { 418 &:hover {
416 @include iro-bem-next-element('child8', 'child9') { 419 @include bem.next-elem('child8', 'child9') {
417 @include iro-bem-modifier('mod2') { 420 @include bem.modifier('mod2') {
418 font-size: 2.5em; 421 font-size: 2.5em;
419 422
420 @include iro-bem-modifier('submod2') { 423 @include bem.modifier('submod2') {
421 font-size: 2.75em; 424 font-size: 2.75em;
422 } 425 }
423 } 426 }
@@ -425,11 +428,11 @@
425 } 428 }
426 429
427 .test & { 430 .test & {
428 @include iro-bem-next-element('child10', 'child11') { 431 @include bem.next-elem('child10', 'child11') {
429 @include iro-bem-modifier('mod2') { 432 @include bem.modifier('mod2') {
430 font-size: 2.5em; 433 font-size: 2.5em;
431 434
432 @include iro-bem-modifier('submod2') { 435 @include bem.modifier('submod2') {
433 font-size: 2.75em; 436 font-size: 2.75em;
434 } 437 }
435 } 438 }
@@ -482,47 +485,45 @@
482 } 485 }
483 } 486 }
484 487
485 /* 488 // @include assert('element modifier, in at-theme') { /// 11 ///
486 @include assert('element modifier, in at-theme') { /// 11 /// 489 // @include output(false) {
487 @include output(false) { 490 // @include bem.block('something') {
488 @include iro-bem-block('something') { 491 // @include bem.at-theme('dark') {
489 @include iro-bem-at-theme('dark') { 492 // @include bem.elem('child') {
490 @include iro-bem-element('child') { 493 // @include bem.modifier('mod') {
491 @include iro-bem-modifier('mod') { 494 // font-size: 2.5em;
492 font-size: 2.5em; 495 //
493 496 // @include bem.modifier('submod') {
494 @include iro-bem-modifier('submod') { 497 // font-size: 2.75em;
495 font-size: 2.75em; 498 // }
496 } 499 // }
497 } 500 // }
498 } 501 // }
499 } 502 // }
500 } 503 // }
501 } 504 //
502 505 // @include expect(false) {
503 @include expect(false) { 506 // .t-dark .something__child--mod,
504 .t-dark .something__child--mod, 507 // [class*=' t-'] .t-dark .something__child--mod,
505 [class*=' t-'] .t-dark .something__child--mod, 508 // [class^='t-'] .t-dark .something__child--mod {
506 [class^='t-'] .t-dark .something__child--mod { 509 // font-size: 2.5em;
507 font-size: 2.5em; 510 // }
508 } 511 //
509 512 // .t-dark .something__child--mod.something__child--submod,
510 .t-dark .something__child--mod.something__child--submod, 513 // [class*=' t-'] .t-dark .something__child--mod.something__child--submod,
511 [class*=' t-'] .t-dark .something__child--mod.something__child--submod, 514 // [class^='t-'] .t-dark .something__child--mod.something__child--submod {
512 [class^='t-'] .t-dark .something__child--mod.something__child--submod { 515 // font-size: 2.75em;
513 font-size: 2.75em; 516 // }
514 } 517 // }
515 } 518 // }
516 }
517 */
518 519
519 @include assert('nested block modifiers, extending') { /// 12 /// 520 @include assert('nested block modifiers, extending') { /// 12 ///
520 @include output { 521 @include output {
521 @include iro-bem-block('something') { 522 @include bem.block('something') {
522 @include iro-bem-modifier('mod') { 523 @include bem.modifier('mod') {
523 font-size: 1.5em; 524 font-size: 1.5em;
524 525
525 @include iro-bem-modifier('submod' true) { 526 @include bem.modifier('submod' true) {
526 font-size: 1.75em; 527 font-size: 1.75em;
527 } 528 }
528 } 529 }
@@ -542,12 +543,12 @@
542 543
543 @include assert('nested element modifiers, extending') { /// 13 /// 544 @include assert('nested element modifiers, extending') { /// 13 ///
544 @include output { 545 @include output {
545 @include iro-bem-block('something') { 546 @include bem.block('something') {
546 @include iro-bem-element('child') { 547 @include bem.elem('child') {
547 @include iro-bem-modifier('mod') { 548 @include bem.modifier('mod') {
548 font-size: 2.5em; 549 font-size: 2.5em;
549 550
550 @include iro-bem-modifier('submod' true) { 551 @include bem.modifier('submod' true) {
551 font-size: 2.75em; 552 font-size: 2.75em;
552 } 553 }
553 } 554 }
@@ -568,19 +569,19 @@
568 569
569 @include assert('block and element modifiers, single element') { /// 14 /// 570 @include assert('block and element modifiers, single element') { /// 14 ///
570 @include output { 571 @include output {
571 @include iro-bem-block('something') { 572 @include bem.block('something') {
572 @include iro-bem-modifier('mod1') { 573 @include bem.modifier('mod1') {
573 font-size: 1.5em; 574 font-size: 1.5em;
574 575
575 @include iro-bem-modifier('submod1') { 576 @include bem.modifier('submod1') {
576 font-size: 1.75em; 577 font-size: 1.75em;
577 } 578 }
578 579
579 @include iro-bem-element('child') { 580 @include bem.elem('child') {
580 @include iro-bem-modifier('mod2') { 581 @include bem.modifier('mod2') {
581 font-size: 2.5em; 582 font-size: 2.5em;
582 583
583 @include iro-bem-modifier('submod2') { 584 @include bem.modifier('submod2') {
584 font-size: 2.75em; 585 font-size: 2.75em;
585 } 586 }
586 } 587 }
@@ -610,19 +611,19 @@
610 611
611 @include assert('block and element modifiers, multiple elements') { /// 15 /// 612 @include assert('block and element modifiers, multiple elements') { /// 15 ///
612 @include output { 613 @include output {
613 @include iro-bem-block('something') { 614 @include bem.block('something') {
614 @include iro-bem-modifier('mod1') { 615 @include bem.modifier('mod1') {
615 font-size: 1.5em; 616 font-size: 1.5em;
616 617
617 @include iro-bem-modifier('submod') { 618 @include bem.modifier('submod1') {
618 font-size: 1.75em; 619 font-size: 1.75em;
619 } 620 }
620 621
621 @include iro-bem-element('child1', 'child2') { 622 @include bem.elem('child1', 'child2') {
622 @include iro-bem-modifier('mod2') { 623 @include bem.modifier('mod2') {
623 font-size: 2.5em; 624 font-size: 2.5em;
624 625
625 @include iro-bem-modifier('submod2') { 626 @include bem.modifier('submod2') {
626 font-size: 2.75em; 627 font-size: 2.75em;
627 } 628 }
628 } 629 }
diff --git a/test/bem/_iro-bem-multi.scss b/test/bem/_multi.scss
index 84bbca2..255fb45 100644
--- a/test/bem/_iro-bem-multi.scss
+++ b/test/bem/_multi.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - in root, 2 blocks 8// - /// 1 /// - in root, 2 blocks
@@ -22,13 +25,13 @@
22// - /// 18 /// - in multiple elements, 1 twin element, 1 modifier 25// - /// 18 /// - in multiple elements, 1 twin element, 1 modifier
23// 26//
24 27
25@include it('iro-bem-state') { 28@include it('multi') {
26 @include assert('in root, 2 blocks') { /// 1 /// 29 @include assert('in root, 2 blocks') { /// 1 ///
27 @include output { 30 @include output {
28 @include iro-bem-multi('component:' 'block1', 'object:' 'block2') { 31 @include bem.multi('component:' 'block1', 'object:' 'block2') {
29 font-size: 1em; 32 font-size: 1em;
30 33
31 @include iro-bem-element('child2') { 34 @include bem.elem('child2') {
32 font-size: 2em; 35 font-size: 2em;
33 } 36 }
34 } 37 }
@@ -55,7 +58,7 @@
55 58
56 @include assert('in root, 1 block, 1 manual selector') { /// 2 /// 59 @include assert('in root, 1 block, 1 manual selector') { /// 2 ///
57 @include output { 60 @include output {
58 @include iro-bem-multi('component:' 'block1', 'a:hover') { 61 @include bem.multi('component:' 'block1', 'a:hover') {
59 font-size: 1em; 62 font-size: 1em;
60 } 63 }
61 } 64 }
@@ -73,11 +76,11 @@
73 76
74 @include assert('in block, 2 elements') { /// 3 /// 77 @include assert('in block, 2 elements') { /// 3 ///
75 @include output { 78 @include output {
76 @include iro-bem-block('something') { 79 @include bem.block('something') {
77 @include iro-bem-multi('element:' 'child1' 'child2') { 80 @include bem.multi('elem:' 'child1' 'child2') {
78 font-size: 2em; 81 font-size: 2em;
79 82
80 @include iro-bem-modifier('mod') { 83 @include bem.modifier('mod') {
81 font-size: 2.5em; 84 font-size: 2.5em;
82 } 85 }
83 } 86 }
@@ -99,11 +102,11 @@
99 102
100 @include assert('in block, 1 element, 1 modifier') { /// 4 /// 103 @include assert('in block, 1 element, 1 modifier') { /// 4 ///
101 @include output { 104 @include output {
102 @include iro-bem-block('something') { 105 @include bem.block('something') {
103 @include iro-bem-multi('element:' 'child', 'modifier:' 'mod1') { 106 @include bem.multi('elem:' 'child', 'modifier:' 'mod1') {
104 font-size: 2em; 107 font-size: 2em;
105 108
106 @include iro-bem-modifier('mod2') { 109 @include bem.modifier('mod2') {
107 font-size: 2.5em; 110 font-size: 2.5em;
108 } 111 }
109 } 112 }
@@ -131,11 +134,11 @@
131 134
132 @include assert('in block, 1 element, 1 extending modifier') { /// 5 /// 135 @include assert('in block, 1 element, 1 extending modifier') { /// 5 ///
133 @include output { 136 @include output {
134 @include iro-bem-block('something') { 137 @include bem.block('something') {
135 @include iro-bem-multi('element:' 'child', 'modifier:' 'mod1') { 138 @include bem.multi('elem:' 'child', 'modifier:' 'mod1') {
136 font-size: 2em; 139 font-size: 2em;
137 140
138 @include iro-bem-modifier('mod2' true) { 141 @include bem.modifier('mod2' true) {
139 font-size: 2.5em; 142 font-size: 2.5em;
140 } 143 }
141 } 144 }
@@ -163,11 +166,11 @@
163 166
164 @include assert('in block, 1 element, 1 & selector') { /// 6 /// 167 @include assert('in block, 1 element, 1 & selector') { /// 6 ///
165 @include output { 168 @include output {
166 @include iro-bem-block('something') { 169 @include bem.block('something') {
167 @include iro-bem-multi('&', 'element:' 'child') { 170 @include bem.multi('&', 'elem:' 'child') {
168 font-size: 2em; 171 font-size: 2em;
169 172
170 @include iro-bem-modifier('mod') { 173 @include bem.modifier('mod') {
171 font-size: 2.5em; 174 font-size: 2.5em;
172 } 175 }
173 } 176 }
@@ -195,11 +198,11 @@
195 198
196 @include assert('in block, 1 element, 1 manual selector') { /// 7 /// 199 @include assert('in block, 1 element, 1 manual selector') { /// 7 ///
197 @include output { 200 @include output {
198 @include iro-bem-block('something') { 201 @include bem.block('something') {
199 @include iro-bem-multi('> a:hover', 'element:' 'child1') { 202 @include bem.multi('> a:hover', 'elem:' 'child1') {
200 font-size: 2em; 203 font-size: 2em;
201 204
202 @include iro-bem-element('child2') { 205 @include bem.elem('child2') {
203 font-size: 3em; 206 font-size: 3em;
204 } 207 }
205 } 208 }
@@ -227,12 +230,12 @@
227 230
228 @include assert('in element, 2 elements, 1 modifier') { /// 8 /// 231 @include assert('in element, 2 elements, 1 modifier') { /// 8 ///
229 @include output { 232 @include output {
230 @include iro-bem-block('something') { 233 @include bem.block('something') {
231 @include iro-bem-element('child') { 234 @include bem.elem('child') {
232 @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { 235 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod1') {
233 font-size: 3em; 236 font-size: 3em;
234 237
235 @include iro-bem-modifier('mod2') { 238 @include bem.modifier('mod2') {
236 font-size: 3.5em; 239 font-size: 3.5em;
237 } 240 }
238 } 241 }
@@ -263,12 +266,12 @@
263 266
264 @include assert('in element, 1 element, 1 & selector') { /// 9 /// 267 @include assert('in element, 1 element, 1 & selector') { /// 9 ///
265 @include output { 268 @include output {
266 @include iro-bem-block('something') { 269 @include bem.block('something') {
267 @include iro-bem-element('child') { 270 @include bem.elem('child') {
268 @include iro-bem-multi('element:' 'subchild', '&') { 271 @include bem.multi('elem:' 'subchild', '&') {
269 font-size: 3em; 272 font-size: 3em;
270 273
271 @include iro-bem-modifier('mod') { 274 @include bem.modifier('mod') {
272 font-size: 3.5em; 275 font-size: 3.5em;
273 } 276 }
274 } 277 }
@@ -297,13 +300,13 @@
297 300
298 @include assert('in element in manual selector, 2 elements') { /// 10 /// 301 @include assert('in element in manual selector, 2 elements') { /// 10 ///
299 @include output { 302 @include output {
300 @include iro-bem-block('something') { 303 @include bem.block('something') {
301 @include iro-bem-element('child') { 304 @include bem.elem('child') {
302 &:hover { 305 &:hover {
303 @include iro-bem-multi('element:' 'subchild1' 'subchild2') { 306 @include bem.multi('elem:' 'subchild1' 'subchild2') {
304 font-size: 3em; 307 font-size: 3em;
305 308
306 @include iro-bem-modifier('mod2') { 309 @include bem.modifier('mod2') {
307 font-size: 3.5em; 310 font-size: 3.5em;
308 } 311 }
309 } 312 }
@@ -327,10 +330,10 @@
327 330
328 @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 /// 331 @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 ///
329 @include output { 332 @include output {
330 @include iro-bem-block('something') { 333 @include bem.block('something') {
331 @include iro-bem-element('child') { 334 @include bem.elem('child') {
332 &:hover { 335 &:hover {
333 @include iro-bem-multi('element:' 'subchild', '&') { 336 @include bem.multi('elem:' 'subchild', '&') {
334 font-size: 3em; 337 font-size: 3em;
335 } 338 }
336 } 339 }
@@ -351,9 +354,9 @@
351 354
352 @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 /// 355 @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 ///
353 @include output { 356 @include output {
354 @include iro-bem-block('something') { 357 @include bem.block('something') {
355 @include iro-bem-element('child1', 'child2') { 358 @include bem.elem('child1', 'child2') {
356 @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod') { 359 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') {
357 font-size: 3em; 360 font-size: 3em;
358 } 361 }
359 } 362 }
@@ -377,12 +380,12 @@
377 380
378 @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 /// 381 @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 ///
379 @include output { 382 @include output {
380 @include iro-bem-block('something') { 383 @include bem.block('something') {
381 @include iro-bem-element('child1', 'child2') { 384 @include bem.elem('child1', 'child2') {
382 @include iro-bem-multi('element:' 'subchild', '&') { 385 @include bem.multi('elem:' 'subchild', '&') {
383 font-size: 3em; 386 font-size: 3em;
384 387
385 @include iro-bem-modifier('mod') { 388 @include bem.modifier('mod') {
386 font-size: 3.5em; 389 font-size: 3.5em;
387 } 390 }
388 } 391 }
@@ -415,10 +418,10 @@
415 418
416 @include assert('in related elements, 2 elements, 1 modifier') { /// 14 /// 419 @include assert('in related elements, 2 elements, 1 modifier') { /// 14 ///
417 @include output { 420 @include output {
418 @include iro-bem-block('something') { 421 @include bem.block('something') {
419 @include iro-bem-element('child1') { 422 @include bem.elem('child1') {
420 @include iro-bem-next-element('child2', 'child3') { 423 @include bem.next-elem('child2', 'child3') {
421 @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod') { 424 @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') {
422 font-size: 3em; 425 font-size: 3em;
423 } 426 }
424 } 427 }
@@ -443,13 +446,13 @@
443 446
444 @include assert('in related elements, 1 element, 1 & selector') { /// 15 /// 447 @include assert('in related elements, 1 element, 1 & selector') { /// 15 ///
445 @include output { 448 @include output {
446 @include iro-bem-block('something') { 449 @include bem.block('something') {
447 @include iro-bem-element('child1') { 450 @include bem.elem('child1') {
448 @include iro-bem-next-element('child2', 'child3') { 451 @include bem.next-elem('child2', 'child3') {
449 @include iro-bem-multi('element:' 'subchild', '&') { 452 @include bem.multi('elem:' 'subchild', '&') {
450 font-size: 4em; 453 font-size: 4em;
451 454
452 @include iro-bem-modifier('mod') { 455 @include bem.modifier('mod') {
453 font-size: 4.5em; 456 font-size: 4.5em;
454 } 457 }
455 } 458 }
@@ -483,12 +486,12 @@
483 486
484 @include assert('in element, 2 related elements, 1 modifier') { /// 16 /// 487 @include assert('in element, 2 related elements, 1 modifier') { /// 16 ///
485 @include output { 488 @include output {
486 @include iro-bem-block('something') { 489 @include bem.block('something') {
487 @include iro-bem-element('child1') { 490 @include bem.elem('child1') {
488 @include iro-bem-multi('next-element:' 'child2' 'child3', 'modifier:' 'mod1') { 491 @include bem.multi('next-elem:' 'child2' 'child3', 'modifier:' 'mod1') {
489 font-size: 3em; 492 font-size: 3em;
490 493
491 @include iro-bem-modifier('mod2') { 494 @include bem.modifier('mod2') {
492 font-size: 3.5em; 495 font-size: 3.5em;
493 } 496 }
494 } 497 }
@@ -519,12 +522,12 @@
519 522
520 @include assert('in element, 1 twin element, 1 modifier') { /// 17 /// 523 @include assert('in element, 1 twin element, 1 modifier') { /// 17 ///
521 @include output { 524 @include output {
522 @include iro-bem-block('something') { 525 @include bem.block('something') {
523 @include iro-bem-element('child') { 526 @include bem.elem('child') {
524 @include iro-bem-multi('next-twin-element', 'modifier:' 'mod1') { 527 @include bem.multi('next-twin-elem', 'modifier:' 'mod1') {
525 font-size: 3em; 528 font-size: 3em;
526 529
527 @include iro-bem-modifier('mod2') { 530 @include bem.modifier('mod2') {
528 font-size: 3.5em; 531 font-size: 3.5em;
529 } 532 }
530 } 533 }
@@ -553,12 +556,12 @@
553 556
554 @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 /// 557 @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 ///
555 @include output { 558 @include output {
556 @include iro-bem-block('something') { 559 @include bem.block('something') {
557 @include iro-bem-element('child1', 'child2') { 560 @include bem.elem('child1', 'child2') {
558 @include iro-bem-multi('next-twin-element', 'modifier:' 'mod1') { 561 @include bem.multi('next-twin-elem', 'modifier:' 'mod1') {
559 font-size: 3em; 562 font-size: 3em;
560 563
561 @include iro-bem-modifier('mod2') { 564 @include bem.modifier('mod2') {
562 font-size: 3.5em; 565 font-size: 3.5em;
563 } 566 }
564 } 567 }
diff --git a/test/bem/_iro-bem-next-twin-element.scss b/test/bem/_next-twin-element.scss
index 96fc3a9..85fe473 100644
--- a/test/bem/_iro-bem-next-twin-element.scss
+++ b/test/bem/_next-twin-element.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - single element 8// - /// 1 /// - single element
@@ -10,12 +13,12 @@
10// - /// 6 /// - multiple elements, modifier in-between 13// - /// 6 /// - multiple elements, modifier in-between
11// 14//
12 15
13@include it('iro-bem-next-twin-element') { 16@include it('next-twin-element') {
14 @include assert('single element') { /// 1 /// 17 @include assert('single element') { /// 1 ///
15 @include output { 18 @include output {
16 @include iro-bem-block('something') { 19 @include bem.block('something') {
17 @include iro-bem-element('child') { 20 @include bem.elem('child') {
18 @include iro-bem-next-twin-element { 21 @include bem.next-twin-element {
19 font-size: 2em; 22 font-size: 2em;
20 } 23 }
21 } 24 }
@@ -31,16 +34,16 @@
31 34
32 @include assert('single element, manual selector in-between') { /// 2 /// 35 @include assert('single element, manual selector in-between') { /// 2 ///
33 @include output(false) { 36 @include output(false) {
34 @include iro-bem-block('something') { 37 @include bem.block('something') {
35 @include iro-bem-element('child') { 38 @include bem.elem('child') {
36 &:hover { 39 &:hover {
37 @include iro-bem-next-twin-element { 40 @include bem.next-twin-element {
38 font-size: 2em; 41 font-size: 2em;
39 } 42 }
40 } 43 }
41 44
42 .test & { 45 .test & {
43 @include iro-bem-next-twin-element { 46 @include bem.next-twin-element {
44 font-size: 2em; 47 font-size: 2em;
45 } 48 }
46 } 49 }
@@ -61,10 +64,10 @@
61 64
62 @include assert('single element, modifier in-between') { /// 3 /// 65 @include assert('single element, modifier in-between') { /// 3 ///
63 @include output { 66 @include output {
64 @include iro-bem-block('something') { 67 @include bem.block('something') {
65 @include iro-bem-element('child') { 68 @include bem.elem('child') {
66 @include iro-bem-modifier('mod') { 69 @include bem.modifier('mod') {
67 @include iro-bem-next-twin-element { 70 @include bem.next-twin-element {
68 font-size: 2.5em; 71 font-size: 2.5em;
69 } 72 }
70 } 73 }
@@ -81,9 +84,9 @@
81 84
82 @include assert('multiple elements') { /// 4 /// 85 @include assert('multiple elements') { /// 4 ///
83 @include output { 86 @include output {
84 @include iro-bem-block('something') { 87 @include bem.block('something') {
85 @include iro-bem-element('child1', 'child2') { 88 @include bem.elem('child1', 'child2') {
86 @include iro-bem-next-twin-element { 89 @include bem.next-twin-element {
87 font-size: 2em; 90 font-size: 2em;
88 } 91 }
89 } 92 }
@@ -100,16 +103,16 @@
100 103
101 @include assert('multiple elements, manual selector in-between') { /// 5 /// 104 @include assert('multiple elements, manual selector in-between') { /// 5 ///
102 @include output(false) { 105 @include output(false) {
103 @include iro-bem-block('something') { 106 @include bem.block('something') {
104 @include iro-bem-element('child1', 'child2') { 107 @include bem.elem('child1', 'child2') {
105 &:hover { 108 &:hover {
106 @include iro-bem-next-twin-element { 109 @include bem.next-twin-element {
107 font-size: 2em; 110 font-size: 2em;
108 } 111 }
109 } 112 }
110 113
111 .test & { 114 .test & {
112 @include iro-bem-next-twin-element { 115 @include bem.next-twin-element {
113 font-size: 2em; 116 font-size: 2em;
114 } 117 }
115 } 118 }
@@ -132,10 +135,10 @@
132 135
133 @include assert('multiple elements, modifier in-between') { /// 6 /// 136 @include assert('multiple elements, modifier in-between') { /// 6 ///
134 @include output { 137 @include output {
135 @include iro-bem-block('something') { 138 @include bem.block('something') {
136 @include iro-bem-element('child1', 'child2') { 139 @include bem.elem('child1', 'child2') {
137 @include iro-bem-modifier('mod') { 140 @include bem.modifier('mod') {
138 @include iro-bem-next-twin-element { 141 @include bem.next-twin-element {
139 font-size: 2.5em; 142 font-size: 2.5em;
140 } 143 }
141 } 144 }
diff --git a/test/bem/_iro-bem-related-element.scss b/test/bem/_related-element.scss
index b0c6b94..5a829e8 100644
--- a/test/bem/_iro-bem-related-element.scss
+++ b/test/bem/_related-element.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - single element, single related element 8// - /// 1 /// - single element, single related element
@@ -16,16 +19,16 @@
16// - /// 12 /// - multiple elements, multiple related elements, modifier in-between 19// - /// 12 /// - multiple elements, multiple related elements, modifier in-between
17// 20//
18 21
19@include it('iro-bem-related-element') { 22@include it('related-element') {
20 @include assert('single element, single related element') { /// 1 /// 23 @include assert('single element, single related element') { /// 1 ///
21 @include output { 24 @include output {
22 @include iro-bem-block('something') { 25 @include bem.block('something') {
23 @include iro-bem-element('child') { 26 @include bem.elem('child') {
24 @include iro-bem-related-element('+', 'subchild1') { 27 @include bem.related-elem('+', 'subchild1') {
25 font-size: 2em; 28 font-size: 2em;
26 } 29 }
27 30
28 @include iro-bem-related-element('~', 'subchild2') { 31 @include bem.related-elem('~', 'subchild2') {
29 font-size: 2em; 32 font-size: 2em;
30 } 33 }
31 } 34 }
@@ -45,24 +48,24 @@
45 48
46 @include assert('single element, single related element, manual selector in-between') { /// 2 /// 49 @include assert('single element, single related element, manual selector in-between') { /// 2 ///
47 @include output(false) { 50 @include output(false) {
48 @include iro-bem-block('something') { 51 @include bem.block('something') {
49 @include iro-bem-element('child') { 52 @include bem.elem('child') {
50 &:hover { 53 &:hover {
51 @include iro-bem-related-element('+', 'subchild1') { 54 @include bem.related-elem('+', 'subchild1') {
52 font-size: 2em; 55 font-size: 2em;
53 } 56 }
54 57
55 @include iro-bem-related-element('~', 'subchild2') { 58 @include bem.related-elem('~', 'subchild2') {
56 font-size: 2em; 59 font-size: 2em;
57 } 60 }
58 } 61 }
59 62
60 .test & { 63 .test & {
61 @include iro-bem-related-element('+', 'subchild3') { 64 @include bem.related-elem('+', 'subchild3') {
62 font-size: 2em; 65 font-size: 2em;
63 } 66 }
64 67
65 @include iro-bem-related-element('~', 'subchild4') { 68 @include bem.related-elem('~', 'subchild4') {
66 font-size: 2em; 69 font-size: 2em;
67 } 70 }
68 } 71 }
@@ -91,14 +94,14 @@
91 94
92 @include assert('single element, single related element, modifier in-between') { /// 3 /// 95 @include assert('single element, single related element, modifier in-between') { /// 3 ///
93 @include output { 96 @include output {
94 @include iro-bem-block('something') { 97 @include bem.block('something') {
95 @include iro-bem-element('child') { 98 @include bem.elem('child') {
96 @include iro-bem-modifier('mod') { 99 @include bem.modifier('mod') {
97 @include iro-bem-related-element('+', 'subchild1') { 100 @include bem.related-elem('+', 'subchild1') {
98 font-size: 2.5em; 101 font-size: 2.5em;
99 } 102 }
100 103
101 @include iro-bem-related-element('~', 'subchild2') { 104 @include bem.related-elem('~', 'subchild2') {
102 font-size: 2.5em; 105 font-size: 2.5em;
103 } 106 }
104 } 107 }
@@ -119,13 +122,13 @@
119 122
120 @include assert('single element, multiple related elements') { /// 4 /// 123 @include assert('single element, multiple related elements') { /// 4 ///
121 @include output { 124 @include output {
122 @include iro-bem-block('something') { 125 @include bem.block('something') {
123 @include iro-bem-element('child') { 126 @include bem.elem('child') {
124 @include iro-bem-related-element('+', 'subchild1', 'subchild2') { 127 @include bem.related-elem('+', 'subchild1', 'subchild2') {
125 font-size: 2.5em; 128 font-size: 2.5em;
126 } 129 }
127 130
128 @include iro-bem-related-element('~', 'subchild3', 'subchild4') { 131 @include bem.related-elem('~', 'subchild3', 'subchild4') {
129 font-size: 2.5em; 132 font-size: 2.5em;
130 } 133 }
131 } 134 }
@@ -147,24 +150,24 @@
147 150
148 @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// 151 @include assert('single element, multiple related elements, manual selector in-between') { /// 5 ///
149 @include output(false) { 152 @include output(false) {
150 @include iro-bem-block('something') { 153 @include bem.block('something') {
151 @include iro-bem-element('child') { 154 @include bem.elem('child') {
152 &:hover { 155 &:hover {
153 @include iro-bem-related-element('+', 'subchild1', 'subchild2') { 156 @include bem.related-elem('+', 'subchild1', 'subchild2') {
154 font-size: 2.5em; 157 font-size: 2.5em;
155 } 158 }
156 159
157 @include iro-bem-related-element('~', 'subchild3', 'subchild4') { 160 @include bem.related-elem('~', 'subchild3', 'subchild4') {
158 font-size: 2.5em; 161 font-size: 2.5em;
159 } 162 }
160 } 163 }
161 164
162 .test & { 165 .test & {
163 @include iro-bem-related-element('+', 'subchild5', 'subchild6') { 166 @include bem.related-elem('+', 'subchild5', 'subchild6') {
164 font-size: 2.5em; 167 font-size: 2.5em;
165 } 168 }
166 169
167 @include iro-bem-related-element('~', 'subchild7', 'subchild8') { 170 @include bem.related-elem('~', 'subchild7', 'subchild8') {
168 font-size: 2.5em; 171 font-size: 2.5em;
169 } 172 }
170 } 173 }
@@ -197,14 +200,14 @@
197 200
198 @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// 201 @include assert('single element, multiple related elements, modifier in-between') { /// 6 ///
199 @include output { 202 @include output {
200 @include iro-bem-block('something') { 203 @include bem.block('something') {
201 @include iro-bem-element('child') { 204 @include bem.elem('child') {
202 @include iro-bem-modifier('mod') { 205 @include bem.modifier('mod') {
203 @include iro-bem-related-element('+', 'subchild1', 'subchild2') { 206 @include bem.related-elem('+', 'subchild1', 'subchild2') {
204 font-size: 2.5em; 207 font-size: 2.5em;
205 } 208 }
206 209
207 @include iro-bem-related-element('~', 'subchild3', 'subchild4') { 210 @include bem.related-elem('~', 'subchild3', 'subchild4') {
208 font-size: 2.5em; 211 font-size: 2.5em;
209 } 212 }
210 } 213 }
@@ -227,13 +230,13 @@
227 230
228 @include assert('multiple elements, single related element') { /// 7 /// 231 @include assert('multiple elements, single related element') { /// 7 ///
229 @include output { 232 @include output {
230 @include iro-bem-block('something') { 233 @include bem.block('something') {
231 @include iro-bem-element('child1', 'child2') { 234 @include bem.elem('child1', 'child2') {
232 @include iro-bem-related-element('+', 'subchild1') { 235 @include bem.related-elem('+', 'subchild1') {
233 font-size: 2em; 236 font-size: 2em;
234 } 237 }
235 238
236 @include iro-bem-related-element('~', 'subchild2') { 239 @include bem.related-elem('~', 'subchild2') {
237 font-size: 2em; 240 font-size: 2em;
238 } 241 }
239 } 242 }
@@ -255,24 +258,24 @@
255 258
256 @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// 259 @include assert('multiple elements, single related element, manual selector in-between') { /// 8 ///
257 @include output(false) { 260 @include output(false) {
258 @include iro-bem-block('something') { 261 @include bem.block('something') {
259 @include iro-bem-element('child1', 'child2') { 262 @include bem.elem('child1', 'child2') {
260 &:hover { 263 &:hover {
261 @include iro-bem-related-element('+', 'subchild1') { 264 @include bem.related-elem('+', 'subchild1') {
262 font-size: 2em; 265 font-size: 2em;
263 } 266 }
264 267
265 @include iro-bem-related-element('~', 'subchild2') { 268 @include bem.related-elem('~', 'subchild2') {
266 font-size: 2em; 269 font-size: 2em;
267 } 270 }
268 } 271 }
269 272
270 .test & { 273 .test & {
271 @include iro-bem-related-element('+', 'subchild3') { 274 @include bem.related-elem('+', 'subchild3') {
272 font-size: 2em; 275 font-size: 2em;
273 } 276 }
274 277
275 @include iro-bem-related-element('~', 'subchild4') { 278 @include bem.related-elem('~', 'subchild4') {
276 font-size: 2em; 279 font-size: 2em;
277 } 280 }
278 } 281 }
@@ -305,14 +308,14 @@
305 308
306 @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// 309 @include assert('multiple elements, single related element, modifier in-between') { /// 9 ///
307 @include output { 310 @include output {
308 @include iro-bem-block('something') { 311 @include bem.block('something') {
309 @include iro-bem-element('child1', 'child2') { 312 @include bem.elem('child1', 'child2') {
310 @include iro-bem-modifier('mod') { 313 @include bem.modifier('mod') {
311 @include iro-bem-related-element('+', 'subchild1') { 314 @include bem.related-elem('+', 'subchild1') {
312 font-size: 2.5em; 315 font-size: 2.5em;
313 } 316 }
314 317
315 @include iro-bem-related-element('~', 'subchild2') { 318 @include bem.related-elem('~', 'subchild2') {
316 font-size: 2.5em; 319 font-size: 2.5em;
317 } 320 }
318 } 321 }
@@ -335,13 +338,13 @@
335 338
336 @include assert('multiple elements, multiple related elements') { /// 10 /// 339 @include assert('multiple elements, multiple related elements') { /// 10 ///
337 @include output { 340 @include output {
338 @include iro-bem-block('something') { 341 @include bem.block('something') {
339 @include iro-bem-element('child1', 'child2') { 342 @include bem.elem('child1', 'child2') {
340 @include iro-bem-related-element('+', 'subchild1', 'subchild2') { 343 @include bem.related-elem('+', 'subchild1', 'subchild2') {
341 font-size: 2em; 344 font-size: 2em;
342 } 345 }
343 346
344 @include iro-bem-related-element('~', 'subchild3', 'subchild4') { 347 @include bem.related-elem('~', 'subchild3', 'subchild4') {
345 font-size: 2em; 348 font-size: 2em;
346 } 349 }
347 } 350 }
@@ -367,24 +370,24 @@
367 370
368 @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// 371 @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 ///
369 @include output(false) { 372 @include output(false) {
370 @include iro-bem-block('something') { 373 @include bem.block('something') {
371 @include iro-bem-element('child1', 'child2') { 374 @include bem.elem('child1', 'child2') {
372 &:hover { 375 &:hover {
373 @include iro-bem-related-element('+', 'subchild1', 'subchild2') { 376 @include bem.related-elem('+', 'subchild1', 'subchild2') {
374 font-size: 2em; 377 font-size: 2em;
375 } 378 }
376 379
377 @include iro-bem-related-element('~', 'subchild3', 'subchild4') { 380 @include bem.related-elem('~', 'subchild3', 'subchild4') {
378 font-size: 2em; 381 font-size: 2em;
379 } 382 }
380 } 383 }
381 384
382 .test & { 385 .test & {
383 @include iro-bem-related-element('+', 'subchild5', 'subchild6') { 386 @include bem.related-elem('+', 'subchild5', 'subchild6') {
384 font-size: 2em; 387 font-size: 2em;
385 } 388 }
386 389
387 @include iro-bem-related-element('~', 'subchild7', 'subchild8') { 390 @include bem.related-elem('~', 'subchild7', 'subchild8') {
388 font-size: 2em; 391 font-size: 2em;
389 } 392 }
390 } 393 }
@@ -425,14 +428,14 @@
425 428
426 @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// 429 @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 ///
427 @include output { 430 @include output {
428 @include iro-bem-block('something') { 431 @include bem.block('something') {
429 @include iro-bem-element('child1', 'child2') { 432 @include bem.elem('child1', 'child2') {
430 @include iro-bem-modifier('mod') { 433 @include bem.modifier('mod') {
431 @include iro-bem-related-element('+', 'subchild1', 'subchild2') { 434 @include bem.related-elem('+', 'subchild1', 'subchild2') {
432 font-size: 2em; 435 font-size: 2em;
433 } 436 }
434 437
435 @include iro-bem-related-element('~', 'subchild3', 'subchild4') { 438 @include bem.related-elem('~', 'subchild3', 'subchild4') {
436 font-size: 2em; 439 font-size: 2em;
437 } 440 }
438 } 441 }
diff --git a/test/bem/_iro-bem-state.scss b/test/bem/_state.scss
index 57eb233..674da5f 100644
--- a/test/bem/_iro-bem-state.scss
+++ b/test/bem/_state.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - single block, single state 8// - /// 1 /// - single block, single state
@@ -10,15 +13,15 @@
10// - /// 6 /// - multiple elements, multiple states 13// - /// 6 /// - multiple elements, multiple states
11// 14//
12 15
13@include it('iro-bem-state') { 16@include it('state') {
14 @include assert('single block, single state') { /// 1 /// 17 @include assert('single block, single state') { /// 1 ///
15 @include output { 18 @include output {
16 @include iro-bem-block('something') { 19 @include bem.block('something') {
17 @include iro-bem-is('active') { 20 @include bem.is('active') {
18 font-size: 1.25em; 21 font-size: 1.25em;
19 } 22 }
20 23
21 @include iro-bem-has('state') { 24 @include bem.has('state') {
22 font-size: 1.75em; 25 font-size: 1.75em;
23 } 26 }
24 } 27 }
@@ -37,13 +40,13 @@
37 40
38 @include assert('single element, single state') { /// 2 /// 41 @include assert('single element, single state') { /// 2 ///
39 @include output { 42 @include output {
40 @include iro-bem-block('something') { 43 @include bem.block('something') {
41 @include iro-bem-element('child') { 44 @include bem.elem('child') {
42 @include iro-bem-is('active') { 45 @include bem.is('active') {
43 font-size: 2.25em; 46 font-size: 2.25em;
44 } 47 }
45 48
46 @include iro-bem-has('state') { 49 @include bem.has('state') {
47 font-size: 2.75em; 50 font-size: 2.75em;
48 } 51 }
49 } 52 }
@@ -63,12 +66,12 @@
63 66
64 @include assert('single block, multiple states') { /// 3 /// 67 @include assert('single block, multiple states') { /// 3 ///
65 @include output { 68 @include output {
66 @include iro-bem-block('something') { 69 @include bem.block('something') {
67 @include iro-bem-is('active', 'primary') { 70 @include bem.is('active', 'primary') {
68 font-size: 1.25em; 71 font-size: 1.25em;
69 } 72 }
70 73
71 @include iro-bem-has('state', 'indicator') { 74 @include bem.has('state', 'indicator') {
72 font-size: 1.75em; 75 font-size: 1.75em;
73 } 76 }
74 } 77 }
@@ -89,13 +92,13 @@
89 92
90 @include assert('single element, multiple states') { /// 4 /// 93 @include assert('single element, multiple states') { /// 4 ///
91 @include output { 94 @include output {
92 @include iro-bem-block('something') { 95 @include bem.block('something') {
93 @include iro-bem-element('child') { 96 @include bem.elem('child') {
94 @include iro-bem-is('active', 'primary') { 97 @include bem.is('active', 'primary') {
95 font-size: 2.25em; 98 font-size: 2.25em;
96 } 99 }
97 100
98 @include iro-bem-has('state', 'indicator') { 101 @include bem.has('state', 'indicator') {
99 font-size: 2.75em; 102 font-size: 2.75em;
100 } 103 }
101 } 104 }
@@ -117,13 +120,13 @@
117 120
118 @include assert('multiple elements, single state') { /// 5 /// 121 @include assert('multiple elements, single state') { /// 5 ///
119 @include output { 122 @include output {
120 @include iro-bem-block('something') { 123 @include bem.block('something') {
121 @include iro-bem-element('child1', 'child2') { 124 @include bem.elem('child1', 'child2') {
122 @include iro-bem-is('active') { 125 @include bem.is('active') {
123 font-size: 2.25em; 126 font-size: 2.25em;
124 } 127 }
125 128
126 @include iro-bem-has('state') { 129 @include bem.has('state') {
127 font-size: 2.75em; 130 font-size: 2.75em;
128 } 131 }
129 } 132 }
@@ -145,13 +148,13 @@
145 148
146 @include assert('multiple elements, multiple states') { /// 6 /// 149 @include assert('multiple elements, multiple states') { /// 6 ///
147 @include output { 150 @include output {
148 @include iro-bem-block('something') { 151 @include bem.block('something') {
149 @include iro-bem-element('child1', 'child2') { 152 @include bem.elem('child1', 'child2') {
150 @include iro-bem-is('active', 'primary') { 153 @include bem.is('active', 'primary') {
151 font-size: 2.25em; 154 font-size: 2.25em;
152 } 155 }
153 156
154 @include iro-bem-has('state', 'indicator') { 157 @include bem.has('state', 'indicator') {
155 font-size: 2.75em; 158 font-size: 2.75em;
156 } 159 }
157 } 160 }
diff --git a/test/bem/_iro-bem-suffix.scss b/test/bem/_suffix.scss
index c6ca787..34f55b6 100644
--- a/test/bem/_iro-bem-suffix.scss
+++ b/test/bem/_suffix.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - block suffix 8// - /// 1 /// - block suffix
@@ -8,11 +11,11 @@
8// - /// 4 /// - multiple element suffix 11// - /// 4 /// - multiple element suffix
9// 12//
10 13
11@include it('iro-bem-suffix') { 14@include it('suffix') {
12 @include assert('block suffix') { /// 1 /// 15 @include assert('block suffix') { /// 1 ///
13 @include output { 16 @include output {
14 @include iro-bem-block('something') { 17 @include bem.block('something') {
15 @include iro-bem-suffix('sm') { 18 @include bem.suffix('sm') {
16 font-size: 1.5em; 19 font-size: 1.5em;
17 } 20 }
18 } 21 }
@@ -27,9 +30,9 @@
27 30
28 @include assert('element suffix') { /// 2 /// 31 @include assert('element suffix') { /// 2 ///
29 @include output { 32 @include output {
30 @include iro-bem-block('something') { 33 @include bem.block('something') {
31 @include iro-bem-element('child') { 34 @include bem.elem('child') {
32 @include iro-bem-suffix('sm') { 35 @include bem.suffix('sm') {
33 font-size: 2.5em; 36 font-size: 2.5em;
34 } 37 }
35 } 38 }
@@ -45,16 +48,16 @@
45 48
46 @include assert('modifier suffix') { /// 3 /// 49 @include assert('modifier suffix') { /// 3 ///
47 @include output { 50 @include output {
48 @include iro-bem-block('something') { 51 @include bem.block('something') {
49 @include iro-bem-modifier('mod1') { 52 @include bem.modifier('mod1') {
50 @include iro-bem-suffix('sm') { 53 @include bem.suffix('sm') {
51 font-size: 1.75em; 54 font-size: 1.75em;
52 } 55 }
53 } 56 }
54 57
55 @include iro-bem-element('child') { 58 @include bem.elem('child') {
56 @include iro-bem-modifier('mod2') { 59 @include bem.modifier('mod2') {
57 @include iro-bem-suffix('sm') { 60 @include bem.suffix('sm') {
58 font-size: 2.75em; 61 font-size: 2.75em;
59 } 62 }
60 } 63 }
@@ -75,9 +78,9 @@
75 78
76 @include assert('multiple element suffix') { /// 4 /// 79 @include assert('multiple element suffix') { /// 4 ///
77 @include output { 80 @include output {
78 @include iro-bem-block('something') { 81 @include bem.block('something') {
79 @include iro-bem-element('child1', 'child2') { 82 @include bem.elem('child1', 'child2') {
80 @include iro-bem-suffix('sm') { 83 @include bem.suffix('sm') {
81 font-size: 2.5em; 84 font-size: 2.5em;
82 } 85 }
83 } 86 }
diff --git a/test/test.scss b/test/test.scss
index 86c86e9..bddd801 100644
--- a/test/test.scss
+++ b/test/test.scss
@@ -1,8 +1,7 @@
1@import '../src/main'; 1@use 'true' as *;
2@use '../src/gradients';
2 3
3@import 'true'; 4gradients.$easing-gradient-steps: 4;
4
5$iro-easing-gradient-steps: 4;
6 5
7@import 'functions'; 6@import 'functions';
8@import 'contexts'; 7@import 'contexts';
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 02:36:47 +0000