diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
| commit | dd5f3c463fab336d694f426dcad11a1783590fc9 (patch) | |
| tree | faebf738a9556eaa393371852ed86550d4adf66a /src/bem | |
| parent | Fix errors from transition from node-sass to sass (diff) | |
| download | iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2 iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip | |
Ported from import syntax to modules
Diffstat (limited to 'src/bem')
| -rw-r--r-- | src/bem/_block.scss | 166 | ||||
| -rw-r--r-- | src/bem/_debug.scss | 8 | ||||
| -rw-r--r-- | src/bem/_element.scss | 191 | ||||
| -rw-r--r-- | src/bem/_functions.scss | 6 | ||||
| -rw-r--r-- | src/bem/_modifier.scss | 63 | ||||
| -rw-r--r-- | src/bem/_multi.scss | 56 | ||||
| -rw-r--r-- | src/bem/_state.scss | 50 | ||||
| -rw-r--r-- | src/bem/_suffix.scss | 37 | ||||
| -rw-r--r-- | src/bem/_theme.scss | 27 | ||||
| -rw-r--r-- | src/bem/_validators.scss | 68 | ||||
| -rw-r--r-- | src/bem/_vars.scss | 20 |
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, |
