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/_modifier.scss | |
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/_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, |