aboutsummaryrefslogtreecommitdiffstats
path: root/src/bem/_modifier.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/bem/_modifier.scss')
-rw-r--r--src/bem/_modifier.scss63
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,