From dd5f3c463fab336d694f426dcad11a1783590fc9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 07:52:13 +0100 Subject: Ported from import syntax to modules --- src/bem/_modifier.scss | 63 +++++++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 29 deletions(-) (limited to 'src/bem/_modifier.scss') 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 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new BEM modifier. /// @@ -25,13 +30,13 @@ /// @throw If the element is not preceded by a block, element, modifier or suffix. /// /// @example scss - Modifier that modifies a block or element -/// @include iro-bem-component('block') { -/// @include iro-bem-modifier('mod') { +/// @include component('block') { +/// @include modifier('mod') { /// background-color: #eee; /// } /// -/// @include iro-bem-element('elem') { -/// @include iro-bem-modifier('mod') { +/// @include elem('elem') { +/// @include modifier('mod') { /// background-color: #222; /// } /// } @@ -48,15 +53,15 @@ /// } /// /// @example scss - Modifier nested in another modifier, not extending -/// @include iro-bem-component('block') { -/// @include iro-bem-modifier('mod') { +/// @include component('block') { +/// @include modifier('mod') { /// background-color: #eee; /// } /// -/// @include iro-bem-modifier('dark') { +/// @include modifier('dark') { /// /* some definitions */ /// -/// @include iro-bem-modifier('mod') { +/// @include modifier('mod') { /// background-color: #222; /// } /// } @@ -77,15 +82,15 @@ /// } /// /// @example scss - Modifier nested in another modifier, extending -/// @include iro-bem-component('block') { -/// @include iro-bem-modifier('mod') { +/// @include component('block') { +/// @include modifier('mod') { /// background-color: #eee; /// } /// -/// @include iro-bem-modifier('dark') { +/// @include modifier('dark') { /// /* some definitions */ /// -/// @include iro-bem-modifier('mod' true) { +/// @include modifier('mod' true) { /// background-color: #222; /// } /// } @@ -105,23 +110,23 @@ /// background-color: #222; /// } /// -@mixin iro-bem-modifier($name, $names...) { - $result: iro-bem-modifier($name, $names...); +@mixin modifier($name, $names...) { + $result: modifier($name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'modifier', (name: $name, names: $names), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -129,18 +134,18 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-modifier +/// @see {mixin} modifier /// -@function iro-bem-modifier($name, $names...) { - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); +@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'); - $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier' 'suffix' 'state'); + $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); $selector: (); $parts-data: (); - @if not iro-selector-suffix-match(&, $parent-selector) { + @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. @@ -155,7 +160,7 @@ @error 'A modifier must be an immediate child of the parent context'; } - @each $name in iro-list-prepend($names, $name) { + @each $name in functions.list-prepend($names, $name) { $extend: false; @if type-of($name) == list { $extend: nth($name, 2); @@ -170,7 +175,7 @@ // - {b,e,m,s}--modifier // - $sel: selector-append(&, $iro-bem-modifier-separator + $name); + $sel: selector-append(&, vars.$modifier-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -181,7 +186,7 @@ // Parent context is modifier, suffix or state and $extend is false. // - $be-context: iro-context-get($iro-bem-context-id, 'block' 'element'); + $be-context: contexts.get(vars.$context-id, 'block' 'element'); @if nth($be-context, 1) == 'element' { // @@ -201,8 +206,8 @@ $sel: (); @each $s in & { @each $ps in $elem-part-selector { - @if str-index(inspect($s), inspect($ps) + $iro-bem-modifier-separator) or str-index(inspect($s), inspect($ps) + $iro-bem-suffix-separator) { - $sel: join($sel, selector-unify($s, selector-append($ps, $iro-bem-modifier-separator + $name)), comma); + @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); } } } @@ -227,7 +232,7 @@ $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); - $sel: selector-append(&, $block-base-selector, $iro-bem-modifier-separator + $name); + $sel: selector-append(&, $block-base-selector, vars.$modifier-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, -- cgit v1.2.3-54-g00ecf