aboutsummaryrefslogtreecommitdiffstats
path: root/src/bem
diff options
context:
space:
mode:
Diffstat (limited to 'src/bem')
-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
11 files changed, 373 insertions, 319 deletions
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,
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 08:00:00 +0000