From f0f84513f8efe533b6ee670a6f1a0c074387b2ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 13 Aug 2025 12:01:46 +0200 Subject: Make use of SASS modules --- src/bem/_modifier.scss | 227 ++++++++++++++++++++++++------------------------- 1 file changed, 113 insertions(+), 114 deletions(-) (limited to 'src/bem/_modifier.scss') diff --git a/src/bem/_modifier.scss b/src/bem/_modifier.scss index 07267fe..10e2826 100644 --- a/src/bem/_modifier.scss +++ b/src/bem/_modifier.scss @@ -4,6 +4,11 @@ /// @access public //// +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:selector'; +@use 'sass:string'; @use './validators'; @use './vars'; @use '../functions'; @@ -111,22 +116,22 @@ /// } /// @mixin modifier($name, $names...) { - $result: modifier($name, $names...); - $selector: nth($result, 1); - $context: nth($result, 2); + $result: modifier($name, $names...); + $selector: list.nth($result, 1); + $context: list.nth($result, 2); - @include validators.validate( - 'modifier', - (name: $name, names: $names), - $selector, - $context - ); + @include validators.validate( + 'modifier', + (name: $name, names: $names), + $selector, + $context + ); - @include contexts.push(vars.$context-id, $context...); - @at-root #{$selector} { - @content; - } - @include contexts.pop(vars.$context-id); + @include contexts.push(vars.$context-id, $context...); + @at-root #{$selector} { + @content; + } + @include contexts.pop(vars.$context-id); } /// @@ -137,121 +142,115 @@ /// @see {mixin} modifier /// @function modifier($name, $names...) { - $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); - $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); - $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state'); - $parent-selector: map-get(nth($parent-context, 2), 'selector'); - $selector: (); - $parts-data: (); + $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state'); + $parent-selector: map.get(list.nth($parent-context, 2), 'selector'); + $selector: (); + $parts-data: (); - @if not functions.selector-suffix-match(&, $parent-selector) { - // - // The current selector doesn't match the parent selector. - // The user manually added a selector between parent context and this modifier call. - // This case is forbidden because any outcome semantically wouldn't make sense: - // - {b,e,m,s} [manual selector] {b,e,m,s}--modifier - // - {b,e,m,s}--modifier [manual selector] - // The first case would make the modifier behave like an element. - // The second case is unintuitive, the code would be more clear by nesting the manual - // selector in the modifier instead. - // + @if not functions.selector-suffix-match(&, $parent-selector) { + // + // The current selector doesn't match the parent selector. + // The user manually added a selector between parent context and this modifier call. + // This case is forbidden because any outcome semantically wouldn't make sense: + // - {b,e,m,s} [manual selector] {b,e,m,s}--modifier + // - {b,e,m,s}--modifier [manual selector] + // The first case would make the modifier behave like an element. + // The second case is unintuitive, the code would be more clear by nesting the manual + // selector in the modifier instead. + // - @error 'A modifier must be an immediate child of the parent context'; - } + @error 'A modifier must be an immediate child of the parent context'; + } - @each $name in functions.list-prepend($names, $name) { - $extend: false; - @if type-of($name) == list { - $extend: nth($name, 2); - $name: nth($name, 1); - } + @each $name in functions.list-prepend($names, $name) { + $extend: false; + @if meta.type-of($name) == list { + $extend: list.nth($name, 2); + $name: list.nth($name, 1); + } - @if index('block' 'element', nth($parent-context, 1)) or $extend == true { - // - // Either the parent context is block or element, or a modifier or suffix - // is to be extended. The modifier part can simply be appended. - // Possible outcomes: - // - {b,e,m,s}--modifier - // + @if list.index('block' 'element', list.nth($parent-context, 1)) or $extend == true { + // + // Either the parent context is block or element, or a modifier or suffix + // is to be extended. The modifier part can simply be appended. + // Possible outcomes: + // - {b,e,m,s}--modifier + // - $sel: selector-append(&, vars.$modifier-separator + $name); - $selector: join($selector, $sel, comma); - $parts-data: append( - $parts-data, ( - 'name': $name, - 'selector': $sel - ) - ); - } @else { - // - // Parent context is modifier, suffix or state and $extend is false. - // + $sel: selector.append(&, vars.$modifier-separator + $name); + $selector: list.join($selector, $sel, comma); + $parts-data: list.append($parts-data, ( + 'name': $name, + 'selector': $sel + )); + } @else { + // + // Parent context is modifier, suffix or state and $extend is false. + // - $be-context: contexts.get(vars.$context-id, 'block' 'element'); + $be-context: contexts.get(vars.$context-id, 'block' 'element'); - @if nth($be-context, 1) == 'element' { - // - // Latest context is element. Since element contexts can consist of multiple single - // elements, inspect all elements and append its selector with the suffix "--$name". - // This has to be done with string comparison since none of Sass selector functions - // is of use here. - // Possible outcomes: - // - {m,s}.{e}--modifier - // + @if list.nth($be-context, 1) == 'element' { + // + // Latest context is element. Since element contexts can consist of multiple single + // elements, inspect all elements and append its selector with the suffix "--$name". + // This has to be done with string comparison since none of Sass selector functions + // is of use here. + // Possible outcomes: + // - {m,s}.{e}--modifier + // - $nsel: (); + $nsel: (); - @each $elem-part-data in map-get(nth($be-context, 2), 'parts') { - $elem-part-selector: map-get($elem-part-data, 'selector'); + @each $elem-part-data in map.get(list.nth($be-context, 2), 'parts') { + $elem-part-selector: map.get($elem-part-data, 'selector'); - $sel: (); - @each $s in & { - @each $ps in $elem-part-selector { - @if str-index(inspect($s), inspect($ps) + vars.$modifier-separator) or str-index(inspect($s), inspect($ps) + vars.$suffix-separator) { - $sel: join($sel, selector-unify($s, selector-append($ps, vars.$modifier-separator + $name)), comma); - } - } - } - @if length($sel) == 0 { - @error 'Could not generate modifier selector.'; - } + $sel: (); + @each $s in & { + @each $ps in $elem-part-selector { + @if string.index(meta.inspect($s), meta.inspect($ps) + vars.$modifier-separator) or string.index(meta.inspect($s), meta.inspect($ps) + vars.$suffix-separator) { + $sel: list.join($sel, selector.unify($s, selector.append($ps, vars.$modifier-separator + $name)), comma); + } + } + } + @if list.length($sel) == 0 { + @error 'Could not generate modifier selector.'; + } - $nsel: join($nsel, $sel, comma); - } + $nsel: list.join($nsel, $sel, comma); + } - $selector: join($selector, $nsel, comma); - $parts-data: append( - $parts-data, ( - 'name': $name, - 'selector': $nsel - ) - ); - } @else { - // - // Latest context is block. Just append the modifier part. - // Possible outcomes: - // - {m,s}.{b}--modifier - // + $selector: list.join($selector, $nsel, comma); + $parts-data: list.append($parts-data, ( + 'name': $name, + 'selector': $nsel + )); + } @else { + // + // Latest context is block. Just append the modifier part. + // Possible outcomes: + // - {m,s}.{b}--modifier + // - $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); + $block-base-selector: map.get(list.nth($be-context, 2), 'base-selector'); - $sel: selector-append(&, $block-base-selector, vars.$modifier-separator + $name); - $selector: join($selector, $sel, comma); - $parts-data: append( - $parts-data, ( - 'name': $name, - 'selector': $sel - ) - ); - } - } - } + $sel: selector.append(&, $block-base-selector, vars.$modifier-separator + $name); + $selector: list.join($selector, $sel, comma); + $parts-data: list.append($parts-data, ( + 'name': $name, + 'selector': $sel + )); + } + } + } - $context: 'modifier', ( - 'parts': $parts-data, - 'selector': $selector - ); + $context: 'modifier', ( + 'parts': $parts-data, + 'selector': $selector + ); - @return $selector $context; + @return $selector $context; } -- cgit v1.2.3-70-g09d2