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/_element.scss | 191 ++++++++++++++++++++++++++------------------------ 1 file changed, 98 insertions(+), 93 deletions(-) (limited to 'src/bem/_element.scss') diff --git a/src/bem/_element.scss b/src/bem/_element.scss index b3d2fee..84e85fb 100644 --- a/src/bem/_element.scss +++ b/src/bem/_element.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new BEM element. /// @@ -20,10 +25,10 @@ /// @throw If the element is not preceded by a block, element, modifier or suffix. /// /// @example scss - Element for a block -/// @include iro-bem-component('block') { +/// @include component('block') { /// /* some block definitions */ /// -/// @include iro-bem-element('elem') { +/// @include elem('elem') { /// /* some element definitions */ /// } /// } @@ -39,15 +44,15 @@ /// } /// /// @example scss - Element that is affected by the user hovering the block -/// @include iro-bem-component('block') { +/// @include component('block') { /// /* some block definitions */ /// -/// @include iro-bem-element('elem') { +/// @include elem('elem') { /// background-color: #eee; /// } /// /// &:hover { -/// @include iro-bem-element('elem') { +/// @include elem('elem') { /// background-color: #000; /// } /// } @@ -68,10 +73,10 @@ /// } /// /// @example scss - Multiple elements -/// @include iro-bem-component('block') { +/// @include component('block') { /// /* some block definitions */ /// -/// @include iro-bem-element('elem1', 'elem2') { +/// @include elem('elem1', 'elem2') { /// /* some element definitions */ /// } /// } @@ -86,23 +91,23 @@ /// /* some element definitions */ /// } /// -@mixin iro-bem-element($name, $names...) { - $result: iro-bem-element($name, $names...); +@mixin elem($name, $names...) { + $result: elem($name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'element', (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); } /// @@ -110,26 +115,26 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-element +/// @see {mixin} element /// -@function iro-bem-element($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 elem($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'); + $parent-context: contexts.get(vars.$context-id, 'block' 'element'); $selector: (); $parts-data: (); @if nth($parent-context, 1) == 'element' { - @if $iro-bem-element-nesting-policy == 'disallow' { + @if vars.$element-nesting-policy == 'disallow' { @error 'Element nesting is forbidden.'; } - @if $iro-bem-element-nesting-policy == 'append' { + @if vars.$element-nesting-policy == 'append' { $element-selector: map-get(nth($parent-context, 2), 'selector'); - @if not iro-selector-suffix-match(&, $element-selector) { + @if not functions.selector-suffix-match(&, $element-selector) { @error 'A nested element must be an immediate children of the parent element.'; } @@ -140,7 +145,7 @@ // @each $name in join($name, $names) { - $sel: selector-append(&, $iro-bem-element-separator + $name); + $sel: selector-append(&, vars.$element-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -149,13 +154,13 @@ } } - $parent-context: iro-context-get($iro-bem-context-id, 'block'); + $parent-context: contexts.get(vars.$context-id, 'block'); } @if length($selector) == 0 { $parent-selector: map-get(nth($parent-context, 2), 'selector'); - @if iro-selector-suffix-match(&, $parent-selector) { + @if functions.selector-suffix-match(&, $parent-selector) { // // Possible outcomes: // - {b}__element @@ -163,7 +168,7 @@ // @each $name in join($name, $names) { - $sel: selector-append(&, $iro-bem-element-separator + $name); + $sel: selector-append(&, vars.$element-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -178,13 +183,13 @@ // @if nth($parent-context, 1) != 'block' { - $parent-context: iro-context-get($iro-bem-context-id, 'block'); + $parent-context: contexts.get(vars.$context-id, 'block'); } $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); @each $name in join($name, $names) { - $sel: selector-nest(&, selector-append($block-base-selector, $iro-bem-element-separator + $name)); + $sel: selector-nest(&, selector-append($block-base-selector, vars.$element-separator + $name)); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -217,11 +222,11 @@ /// @throw If the element is not preceded by an element. /// /// @example scss - A sibling element to a single element -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem') { +/// @include component('block') { +/// @include elem('elem') { /// /* some element definitions */ /// -/// @include iro-bem-related-element('~', 'sibling') { +/// @include related-elem('~', 'sibling') { /// /* some sibling element definitions */ /// } /// } @@ -238,11 +243,11 @@ /// } /// /// @example scss - A successor element to a single element -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem') { +/// @include component('block') { +/// @include elem('elem') { /// /* some element definitions */ /// -/// @include iro-bem-related-element('+', 'successor') { +/// @include related-elem('+', 'successor') { /// /* some successor element definitions */ /// } /// } @@ -259,11 +264,11 @@ /// } /// /// @example scss - A successor element to multiple elements -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem1', 'elem2') { +/// @include component('block') { +/// @include elem('elem1', 'elem2') { /// /* some element definitions */ /// -/// @include iro-bem-related-element('+', 'successor') { +/// @include related-elem('+', 'successor') { /// /* some successor element definitions */ /// } /// } @@ -279,23 +284,23 @@ /// /* some successor element definitions */ /// } /// -@mixin iro-bem-related-element($sign, $name, $names...) { - $result: iro-bem-related-element($sign, $name, $names...); +@mixin related-elem($sign, $name, $names...) { + $result: related-elem($sign, $name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'related-element', (sign: $sign, 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); } /// @@ -304,9 +309,9 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-related-element +/// @see {mixin} related-element /// -@function iro-bem-related-element($sign, $name, $names...) { +@function related-elem($sign, $name, $names...) { // // Generating this selector is simple: Take the latest block context, use it // to generate the element part, and insert it at the end of the current selector. @@ -315,21 +320,21 @@ // - {e} ({m,s}) ([manual selector]) ~ {e} // - $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, 'element'); + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); @if $sign != '+' and $sign != '~' { @error 'Invalid relationship sign #{inspect($sign)}.'; } - $block-context: iro-context-get($iro-bem-context-id, 'block'); + $block-context: contexts.get(vars.$context-id, 'block'); $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); $selector: (); $parts-data: (); @each $name in join($name, $names) { - $sel: selector-nest(&, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $name)); + $sel: selector-nest(&, $sign, selector-append($block-base-selector, vars.$element-separator + $name)); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -348,15 +353,15 @@ /// /// Generate a BEM element that is a sibling of the current element. /// -/// It's a shorthand for iro-bem-related-element('~', $name). +/// It's a shorthand for related-elem('~', $name). /// /// @param {string} $name - First element name /// @param {list} $names - List of more element names /// /// @content /// -@mixin iro-bem-sibling-element($name, $names...) { - @include iro-bem-related-element('~', $name, $names...) { +@mixin sibling-elem($name, $names...) { + @include related-elem('~', $name, $names...) { @content; } } @@ -367,24 +372,24 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-sibling-element +/// @see {mixin} sibling-element /// -@function iro-bem-sibling-element($name, $names...) { - @return iro-bem-related-element('~', $name, $names...); +@function sibling-elem($name, $names...) { + @return related-elem('~', $name, $names...); } /// /// Generate a BEM element that is the successor of the current element. /// -/// It's a shorthand for iro-bem-related-element('+', $name). +/// It's a shorthand for related-elem('+', $name). /// /// @param {string} $name - First element name /// @param {string} $names - More element names /// /// @content /// -@mixin iro-bem-next-element($name, $names...) { - @include iro-bem-related-element('+', $name, $names...) { +@mixin next-elem($name, $names...) { + @include related-elem('+', $name, $names...) { @content; } } @@ -395,28 +400,28 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-next-element +/// @see {mixin} next-element /// -@function iro-bem-next-element($name, $names...) { - @return iro-bem-related-element('+', $name, $names...); +@function next-elem($name, $names...) { + @return related-elem('+', $name, $names...); } /// /// Generate the current BEM element as a successor of itself. /// /// If this is applied to a single element, it behaves exactly the same as -/// iro-bem-related-element('+', name); +/// related-elem('+', name); /// However, if it is applied to multiple elements, each twin element only will influence -/// their other twin, which is not replicable with iro-bem-related-element. +/// their other twin, which is not replicable with related-element. /// /// @content /// /// @example scss - Two twin elements -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem') { +/// @include component('block') { +/// @include elem('elem') { /// /* some element definitions */ /// -/// @include iro-bem-next-twin-element { +/// @include next-twin-element { /// /* some twin element definitions */ /// } /// } @@ -433,11 +438,11 @@ /// } /// /// @example scss - Multiple twin elements -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem1', 'elem2') { +/// @include component('block') { +/// @include elem('elem1', 'elem2') { /// /* some element definitions */ /// -/// @include iro-bem-next-twin-element { +/// @include next-twin-element { /// /* some twin element definitions */ /// } /// } @@ -453,23 +458,23 @@ /// /* some twin element definitions */ /// } /// -@mixin iro-bem-related-twin-element($sign) { - $result: iro-bem-related-twin-element($sign); +@mixin related-twin-elem($sign) { + $result: related-twin-elem($sign); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'next-twin-element', (), $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); } /// @@ -478,16 +483,16 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-next-twin-element +/// @see {mixin} next-twin-element /// -@function iro-bem-related-twin-element($sign) { - $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, 'element'); +@function related-twin-elem($sign) { + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); - $element-context: iro-context-get($iro-bem-context-id, 'element'); + $element-context: contexts.get(vars.$context-id, 'element'); $element-selector: map-get(nth($element-context, 2), 'selector'); - $block-context: iro-context-get($iro-bem-context-id, 'block'); + $block-context: contexts.get(vars.$context-id, 'block'); $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); $selector: (); @@ -505,7 +510,7 @@ $part-name: map-get($part-data, 'name'); $sel: (); - @if iro-selector-suffix-match(&, $element-selector) { + @if functions.selector-suffix-match(&, $element-selector) { // // This mixin is included in the selector the last element mixin created. // Possible outcomes: @@ -516,7 +521,7 @@ @each $s in & { @each $ps in $part-selector { @if nth($s, -1) == nth($ps, -1) { - $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); + $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, vars.$element-separator + $part-name)); $sel: join($sel, $sel-ent, comma); } } @@ -537,7 +542,7 @@ $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; @if not $match { - @each $separator in $iro-bem-element-separator $iro-bem-modifier-separator $iro-bem-suffix-separator { + @each $separator in vars.$element-separator vars.$modifier-separator vars.$suffix-separator { @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { $match: true; } @@ -545,7 +550,7 @@ } @if $match { - $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); + $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, vars.$element-separator + $part-name)); $sel: join($sel, $sel-ent, comma); } } @@ -574,12 +579,12 @@ /// /// Generate the current BEM element as a sibling of itself. /// -/// It's a shorthand for iro-bem-related-twin-element('~'). +/// It's a shorthand for related-twin-elem('~'). /// /// @content /// -@mixin iro-bem-sibling-twin-element { - @include iro-bem-related-twin-element('~') { +@mixin sibling-twin-element { + @include related-twin-elem('~') { @content; } } @@ -590,21 +595,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-sibling-twin-element +/// @see {mixin} sibling-twin-element /// -@function iro-bem-sibling-twin-element() { - @return iro-bem-related-twin-element('~'); +@function sibling-twin-elem() { + @return related-twin-elem('~'); } /// /// Generate the current BEM element as a next sibling of itself. /// -/// It's a shorthand for iro-bem-related-twin-element('+', $name). +/// It's a shorthand for related-twin-elem('+', $name). /// /// @content /// -@mixin iro-bem-next-twin-element { - @include iro-bem-related-twin-element('+') { +@mixin next-twin-element { + @include related-twin-elem('+') { @content; } } @@ -615,8 +620,8 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-next-twin-element +/// @see {mixin} next-twin-element /// -@function iro-bem-next-twin-element() { - @return iro-bem-related-twin-element('+'); +@function next-twin-elem() { + @return related-twin-elem('+'); } -- cgit v1.3.1