diff options
Diffstat (limited to 'src/bem/_modifier.scss')
| -rw-r--r-- | src/bem/_modifier.scss | 63 |
1 files changed, 34 insertions, 29 deletions
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, |
