aboutsummaryrefslogtreecommitdiffstats
path: root/src/bem/_block.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/bem/_block.scss')
-rw-r--r--src/bem/_block.scss166
1 files changed, 86 insertions, 80 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 }