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/_block.scss | 166 ++++++++++++++++++++-------------------- src/bem/_debug.scss | 8 +- src/bem/_element.scss | 191 ++++++++++++++++++++++++----------------------- src/bem/_functions.scss | 6 +- src/bem/_modifier.scss | 63 +++++++++------- src/bem/_multi.scss | 56 +++++++++----- src/bem/_state.scss | 50 +++++++------ src/bem/_suffix.scss | 37 +++++---- src/bem/_theme.scss | 27 ++++--- src/bem/_validators.scss | 68 +++++++++-------- src/bem/_vars.scss | 20 ++--- 11 files changed, 373 insertions(+), 319 deletions(-) (limited to 'src/bem') diff --git a/src/bem/_block.scss b/src/bem/_block.scss index d065891..49af04b 100644 --- a/src/bem/_block.scss +++ b/src/bem/_block.scss @@ -4,6 +4,12 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use './functions' as bemfunctions; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new block. /// @@ -20,7 +26,7 @@ /// @throw If the block is preceded by another block, element, modifier or suffix /// /// @example scss - Creating a new block -/// @include iro-bem-block('something', 'component') { +/// @include block('something', 'component') { /// /* some definitions */ /// } /// @@ -30,12 +36,12 @@ /// /* some definitions */ /// } /// -@mixin iro-bem-block($name, $type: null) { - $result: iro-bem-block($name, $type); +@mixin block($name, $type: null) { + $result: block($name, $type); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'block', (name: $name, type: $type), $selector, @@ -43,16 +49,16 @@ ); @if $type != null { - $iro-bem-blocks: append($iro-bem-blocks, $name + '_' + $type) !global; + vars.$blocks: append(vars.$blocks, $name + '_' + $type); } @else { - $iro-bem-blocks: append($iro-bem-blocks, $name) !global; + vars.$blocks: append(vars.$blocks, $name); } - @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); } /// @@ -60,21 +66,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-block +/// @see {mixin} block /// -@function iro-bem-block($name, $type: null) { +@function block($name, $type: null) { // // Possible outcomes: // - ({b,e,m,s}) block // - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); $selector: null; $base-selector: null; @if $type != null { - $namespace: map-get($iro-bem-namespaces, $type); + $namespace: map-get(vars.$namespaces, $type); @if not $namespace { @error '"#{$type}" is not a valid type.'; @@ -85,7 +91,7 @@ @if $type != 'theme' or & { $selector: $base-selector; } @else if not & { - $selector: iro-bem-theme-selector($name); + $selector: bemfunctions.theme-selector($name); } } @else { $base-selector: selector-parse('.' + $name); @@ -107,14 +113,14 @@ } /// -/// Generate a new object block. It's a shorthand for iro-bem-block($name, 'object'). +/// Generate a new object block. It's a shorthand for block($name, 'object'). /// /// @param {string} $name - Object block name /// /// @content /// -@mixin iro-bem-object($name) { - @include iro-bem-block($name, 'object') { +@mixin object($name) { + @include block($name, 'object') { @content; } } @@ -124,21 +130,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-object +/// @see {mixin} object /// -@function iro-bem-object($name) { - @return iro-bem-block($name, 'object'); +@function object($name) { + @return block($name, 'object'); } /// -/// Generate a new component block. It's a shorthand for iro-bem-block($name, 'component'). +/// Generate a new component block. It's a shorthand for block($name, 'component'). /// /// @param {string} $name - Component block name /// /// @content /// -@mixin iro-bem-component($name) { - @include iro-bem-block($name, 'component') { +@mixin component($name) { + @include block($name, 'component') { @content; } } @@ -148,21 +154,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-component +/// @see {mixin} component /// -@function iro-bem-component($name) { - @return iro-bem-block($name, 'component'); +@function component($name) { + @return block($name, 'component'); } /// -/// Generate a new layout block. It's a shorthand for iro-bem-block($name, 'layout'). +/// Generate a new layout block. It's a shorthand for block($name, 'layout'). /// /// @param {string} $name - Layout block name /// /// @content /// -@mixin iro-bem-layout($name) { - @include iro-bem-block($name, 'layout') { +@mixin layout($name) { + @include block($name, 'layout') { @content; } } @@ -172,21 +178,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-layout +/// @see {mixin} layout /// -@function iro-bem-layout($name) { - @return iro-bem-block($name, 'layout'); +@function layout($name) { + @return block($name, 'layout'); } /// -/// Generate a new utility block. It's a shorthand for iro-bem-block($name, 'utility'). +/// Generate a new utility block. It's a shorthand for block($name, 'utility'). /// /// @param {string} $name - Utility block name /// /// @content /// -@mixin iro-bem-utility($name) { - @include iro-bem-block($name, 'utility') { +@mixin utility($name) { + @include block($name, 'utility') { @content; } } @@ -196,21 +202,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-utility +/// @see {mixin} utility /// -@function iro-bem-utility($name) { - @return iro-bem-block($name, 'utility'); +@function utility($name) { + @return block($name, 'utility'); } /// -/// Generate a new scope block. It's a shorthand for iro-bem-block($name, 'scope'). +/// Generate a new scope block. It's a shorthand for block($name, 'scope'). /// /// @param {string} $name - Scope block name /// /// @content /// -@mixin iro-bem-scope($name) { - @include iro-bem-block($name, 'scope') { +@mixin scope($name) { + @include block($name, 'scope') { @content; } } @@ -220,21 +226,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-scope +/// @see {mixin} scope /// -@function iro-bem-scope($name) { - @return iro-bem-block($name, 'scope'); +@function scope($name) { + @return block($name, 'scope'); } /// -/// Generate a new theme block. It's a shorthand for iro-bem-block($name, 'theme'). +/// Generate a new theme block. It's a shorthand for block($name, 'theme'). /// /// @param {string} $name - Theme block name /// /// @content /// -@mixin iro-bem-theme($name) { - @include iro-bem-block($name, 'theme') { +@mixin theme($name) { + @include block($name, 'theme') { @content; } } @@ -244,21 +250,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-theme +/// @see {mixin} theme /// -@function iro-bem-theme($name) { - @return iro-bem-block($name, 'theme'); +@function theme($name) { + @return block($name, 'theme'); } /// -/// Generate a new JS block. It's a shorthand for iro-bem-block($name, 'js'). +/// Generate a new JS block. It's a shorthand for block($name, 'js'). /// /// @param {string} $name - JS block name /// /// @content /// -@mixin iro-bem-js($name) { - @include iro-bem-block($name, 'js') { +@mixin js($name) { + @include block($name, 'js') { @content; } } @@ -268,21 +274,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-js +/// @see {mixin} js /// -@function iro-bem-js($name) { - @return iro-bem-block($name, 'js'); +@function js($name) { + @return block($name, 'js'); } /// -/// Generate a new QA block. It's a shorthand for iro-bem-block($name, 'qa'). +/// Generate a new QA block. It's a shorthand for block($name, 'qa'). /// /// @param {string} $name - QA block name /// /// @content /// -@mixin iro-bem-qa($name) { - @include iro-bem-block($name, 'qa') { +@mixin qa($name) { + @include block($name, 'qa') { @content; } } @@ -292,21 +298,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-qa +/// @see {mixin} qa /// -@function iro-bem-qa($name) { - @return iro-bem-block($name, 'qa'); +@function qa($name) { + @return block($name, 'qa'); } /// -/// Generate a new hack block. It's a shorthand for iro-bem-block($name, 'hack'). +/// Generate a new hack block. It's a shorthand for block($name, 'hack'). /// /// @param {string} $name - Hack block name /// /// @content /// -@mixin iro-bem-hack($name) { - @include iro-bem-block($name, 'hack') { +@mixin hack($name) { + @include block($name, 'hack') { @content; } } @@ -316,10 +322,10 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-hack +/// @see {mixin} hack /// -@function iro-bem-hack($name) { - @return iro-bem-block($name, 'hack'); +@function hack($name) { + @return block($name, 'hack'); } /// @@ -337,15 +343,15 @@ /// @throw If a block doesn't exist /// /// @example scss - Successful assertion -/// @include iro-bem-component('someBlock') { +/// @include component('someBlock') { /// /* some definitions */ /// } /// -/// @include iro-bem-component('anotherBlock') { +/// @include component('anotherBlock') { /// /* some definitions */ /// -/// @include iro-bem-element('elem') { -/// @include iro-bem-composed-of('someBlock' 'component'); +/// @include elem('elem') { +/// @include composed-of('someBlock' 'component'); /// /// /* some definitions */ /// } @@ -354,37 +360,37 @@ /// // Intended use:
...
/// /// @example scss - Failing assertion -/// @include iro-bem-component('anotherBlock') { +/// @include component('anotherBlock') { /// /* some definitions */ /// -/// @include iro-bem-element('elem') { -/// @include iro-bem-composed-of('someBlock' 'component'); +/// @include elem('elem') { +/// @include composed-of('someBlock' 'component'); /// /// /* some definitions */ /// } /// } /// -/// @include iro-bem-component('someBlock') { +/// @include component('someBlock') { /// /* some definitions */ /// } /// /// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem /// -@mixin iro-bem-composed-of($block, $blocks...) { - @each $block in iro-list-prepend($blocks, $block) { +@mixin composed-of($block, $blocks...) { + @each $block in functions.list-prepend($blocks, $block) { @if type-of($block) == string { - @if not index($iro-bem-blocks, $block) { + @if not index(vars.$blocks, $block) { @error 'Block "#{$block}" does not exist.'; } } @else { $name: nth($block, 1); $type: nth($block, 2); - @if not map-get($iro-bem-namespaces, $type) { + @if not map-get(vars.$namespaces, $type) { @error '"#{$type}" is not a valid type.'; } - @if not index($iro-bem-blocks, $name + '_' + $type) { + @if not index(vars.$blocks, $name + '_' + $type) { @error 'Block "#{$name}" does not exist.'; } } diff --git a/src/bem/_debug.scss b/src/bem/_debug.scss index e69083c..8ea0f05 100644 --- a/src/bem/_debug.scss +++ b/src/bem/_debug.scss @@ -4,9 +4,11 @@ /// @access public //// -@if $iro-bem-debug { - @each $type, $color in $iro-bem-debug-colors { - $namespace: map-get($iro-bem-namespaces, $type); +@use './vars'; + +@if vars.$debug { + @each $type, $color in vars.$debug-colors { + $namespace: map-get(vars.$namespaces, $type); [class^='#{$namespace}-'], [class*=' #{$namespace}-'] { 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('+'); } diff --git a/src/bem/_functions.scss b/src/bem/_functions.scss index 4bb95c4..b7bd5ec 100644 --- a/src/bem/_functions.scss +++ b/src/bem/_functions.scss @@ -4,11 +4,13 @@ /// @access public //// +@use './vars'; + /// /// @access private /// -@function iro-bem-theme-selector($name, $names...) { - $namespace: map-get($iro-bem-namespaces, 'theme'); +@function theme-selector($name, $names...) { + $namespace: map-get(vars.$namespaces, 'theme'); $selector: null; @each $name in join($name, $names) { 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, diff --git a/src/bem/_multi.scss b/src/bem/_multi.scss index 9e47ce4..1de5cdc 100644 --- a/src/bem/_multi.scss +++ b/src/bem/_multi.scss @@ -4,6 +4,16 @@ /// @access public //// +@use '../functions'; +@use '../contexts'; +@use './block'; +@use './element'; +@use './modifier'; +@use './state'; +@use './suffix'; +@use './theme'; +@use './vars'; + /// /// Generate multiple entities (BEM or not) at once. /// @@ -15,10 +25,10 @@ /// @content /// /// @example scss - Creating multiple elements, a modifier and an anchor -/// @include iro-bem-object('buttonstrip') { +/// @include object('buttonstrip') { /// display: none; /// -/// @include iro-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') { +/// @include multi('modifier' 'mod', 'elem' 'button' 'separator', '> a') { /// display: block; /// } /// } @@ -43,10 +53,10 @@ /// } /// /// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included -/// @include iro-bem-object('buttonstrip') { +/// @include object('buttonstrip') { /// display: none; /// -/// @include iro-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') { +/// @include multi('modifier:' 'mod', 'elem:' 'button' 'separator', '> a') { /// display: block; /// } /// } @@ -70,14 +80,16 @@ /// display: block; /// } /// -@mixin iro-bem-multi($first, $others...) { - @include iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); +@mixin multi($first, $others...) { + @include contexts.assert-stack-count(vars.$context-id, vars.$max-depth); - @each $entity in iro-list-prepend($others, $first) { + @each $entity in functions.list-prepend($others, $first) { $is-manual-selector: false; - @if type-of($entity) == string and not function-exists('iro-bem-' + $entity) { - $is-manual-selector: true; + @if type-of($entity) == string { + @if find-bem-function($entity) == null { + $is-manual-selector: true; + } } @if $is-manual-selector { @@ -91,23 +103,17 @@ @if type-of($entity) == list { $entity-func-id: nth($entity, 1); - $entity: iro-list-slice($entity, 2); + $entity: functions.list-slice($entity, 2); } @else { $entity-func-id: $entity; $entity: (); } @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' { - $entity-func-id: str-slice($entity-func-id, 1, str-length($entity-func-id) - 1); + $entity-func-id: unquote(str-slice($entity-func-id, 1, str-length($entity-func-id) - 1)); } - $sel-func: null; - - @if function-exists('iro-bem-' + $entity-func-id) { - $sel-func: get-function('iro-bem-' + $entity-func-id); - } @else if function-exists($entity-func-id) { - $sel-func: get-function($entity-func-id); - } + $sel-func: find-bem-function($entity-func-id); @if $sel-func == null { @error 'Function "#{inspect($entity-func-id)}" was not found.'; @@ -118,14 +124,24 @@ $entity-result-context: nth($entity-result, 2); @if $entity-result-context != null { - @include iro-context-push($iro-bem-context-id, $entity-result-context...); + @include contexts.push(vars.$context-id, $entity-result-context...); } @at-root #{$entity-result-selector} { @content; } @if $entity-result-context != null { - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } } } } + +@function find-bem-function($name) { + @each $module in (block element modifier state suffix theme) { + @if function-exists($name, $module) { + @return get-function($name, $module: $module); + } + } + + @return null; +} diff --git a/src/bem/_state.scss b/src/bem/_state.scss index 4a85bbb..2d430bf 100644 --- a/src/bem/_state.scss +++ b/src/bem/_state.scss @@ -4,6 +4,10 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../contexts'; + /// /// Create a new state rule. /// @@ -13,10 +17,10 @@ /// @content /// /// @example scss - Using single is-state -/// @include iro-bem-object('menu') { +/// @include object('menu') { /// display: none; /// -/// @include iro-bem-state('is', open') { +/// @include state('is', open') { /// display: block; /// } /// } @@ -32,10 +36,10 @@ /// } /// /// @example scss - Using multiple is-states -/// @include iro-bem-object('menu') { +/// @include object('menu') { /// display: none; /// -/// @include iro-bem-state('is', open', 'visible') { +/// @include state('is', open', 'visible') { /// display: block; /// } /// } @@ -51,23 +55,23 @@ /// display: block; /// } /// -@mixin iro-bem-state($prefix, $state, $states...) { - $result: iro-bem-state($prefix, $state, $states...); +@mixin state($prefix, $state, $states...) { + $result: state($prefix, $state, $states...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'state', (prefix: $prefix, state: $state, states: $states), $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); } /// @@ -75,9 +79,9 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-has +/// @see {mixin} has /// -@function iro-bem-state($prefix, $state, $states...) { +@function state($prefix, $state, $states...) { $selector: (); $parts-data: (); @@ -104,10 +108,10 @@ /// /// Create a new has-state modifier. /// -/// It's a shorthand for iro-bem-state('is', $state, $states...). +/// It's a shorthand for state('is', $state, $states...). /// -@mixin iro-bem-is($state, $states...) { - @include iro-bem-state('is', $state, $states...) { +@mixin is($state, $states...) { + @include state('is', $state, $states...) { @content; } } @@ -117,19 +121,19 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-is +/// @see {mixin} is /// -@function iro-bem-is($state, $states...) { - @return iro-bem-state('is', $state, $states...); +@function is($state, $states...) { + @return state('is', $state, $states...); } /// /// Create a new has-state modifier. /// -/// It's a shorthand for iro-bem-state('has', $state, $states...). +/// It's a shorthand for state('has', $state, $states...). /// -@mixin iro-bem-has($state, $states...) { - @include iro-bem-state('has', $state, $states...) { +@mixin has($state, $states...) { + @include state('has', $state, $states...) { @content; } } @@ -139,8 +143,8 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-has +/// @see {mixin} has /// -@function iro-bem-has($state, $states...) { - @return iro-bem-state('has', $state, $states...); +@function has($state, $states...) { + @return state('has', $state, $states...); } diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss index b103c9f..2ddb54d 100644 --- a/src/bem/_suffix.scss +++ b/src/bem/_suffix.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new suffix. /// @@ -14,17 +19,17 @@ /// @throw If the element is not preceded by a block or modifier. /// /// @example scss - Using a suffix -/// @include iro-bem-utility('hidden') { +/// @include utility('hidden') { /// display: none; /// /// @media (max-width: 320px) { -/// @include iro-bem-suffix('phone') { +/// @include suffix('phone') { /// display: none; /// } /// } /// /// @media (max-width: 768px) { -/// @include iro-bem-suffix('tablet') { +/// @include suffix('tablet') { /// display: none; /// } /// } @@ -48,23 +53,23 @@ /// } /// } /// -@mixin iro-bem-suffix($name) { - $result: iro-bem-suffix($name); +@mixin suffix($name) { + $result: suffix($name); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'suffix', (name: $name), $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); } /// @@ -72,21 +77,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-suffix +/// @see {mixin} suffix /// -@function iro-bem-suffix($name) { +@function suffix($name) { // // Suffixes can be used on block, element and modifier. // - $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'); - $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); + $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-must-not-contain(vars.$context-id, 'suffix'); - $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); + $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); - @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 suffix call. @@ -107,7 +112,7 @@ // - {b,e,m}@suffix // - $selector: selector-append(&, $iro-bem-suffix-separator + $name); + $selector: selector-append(&, vars.$suffix-separator + $name); $context: 'suffix', ( 'name': $name, diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss index a49981c..ff1ba49 100644 --- a/src/bem/_theme.scss +++ b/src/bem/_theme.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './functions'; +@use './validators'; +@use './vars'; +@use '../contexts'; + /// /// Declare new rules for the current block for when this theme is active. /// @@ -12,23 +17,23 @@ /// /// @content /// -@mixin iro-bem-at-theme($name, $names...) { - $result: iro-bem-at-theme($name, $names...); +@mixin at-theme($name, $names...) { + $result: at-theme($name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'at-theme', (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); } /// @@ -37,19 +42,19 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-at-theme +/// @see {mixin} at-theme /// -@function iro-bem-at-theme($name, $names...) { - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); +@function at-theme($name, $names...) { + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); - $parent-context: iro-context-get($iro-bem-context-id, 'block'); + $parent-context: contexts.get(vars.$context-id, 'block'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); - //@if not iro-selector-suffix-match(&, $parent-selector) { + //@if not functions.selector-suffix-match(&, $parent-selector) { // @error 'An at-theme rule must be an immediate child of a block'; //} - $selector: iro-bem-theme-selector($name, $names...); + $selector: functions.theme-selector($name, $names...); $selector: selector-nest($selector, &); $context: 'at-theme', ( diff --git a/src/bem/_validators.scss b/src/bem/_validators.scss index eb09a60..042e15e 100644 --- a/src/bem/_validators.scss +++ b/src/bem/_validators.scss @@ -16,6 +16,10 @@ /// @access public //// +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// A list of validator functions. /// @@ -23,7 +27,7 @@ /// /// @access private /// -$iro-bem-validators: (); +$validators: (); /// /// Register one or multiple validator functions. @@ -41,19 +45,19 @@ $iro-bem-validators: (); /// @param {string} $func-name - First function name. /// @param {string} $func-names - Other function names. /// -@mixin iro-bem-add-validator($func-name, $func-names...) { - $noop: iro-bem-add-validator($func-name, $func-names...); +@mixin add($func-name, $func-names...) { + $noop: add($func-name, $func-names...); } /// /// Register one or multiple validator functions. Check the respective mixin documentation for more information. /// -/// @see {mixin} iro-bem-add-validator +/// @see {mixin} add /// -@function iro-bem-add-validator($func-name, $func-names...) { +@function add($func-name, $func-names...) { @each $fn-name in join($func-name, $func-names) { $fn: get-function($fn-name); - $iro-bem-validators: map-merge($iro-bem-validators, ($fn-name: $fn)) !global; + $validators: map-merge($validators, ($fn-name: $fn)); } @return null; } @@ -64,25 +68,25 @@ $iro-bem-validators: (); /// @param {string} $func-name - First function name. /// @param {string} $func-names - Other function names. /// -@mixin iro-bem-remove-validator($func-name, $func-names...) { - $noop: iro-bem-remove-validator($func-name, $func-names...); +@mixin remove($func-name, $func-names...) { + $noop: remove($func-name, $func-names...); } /// /// Unregister one or multiple validator functions. Check the respective mixin documentation for more information. /// -/// @see {mixin} iro-bem-remove-validator +/// @see {mixin} remove /// -@function iro-bem-remove-validator($func-name, $func-names...) { - $iro-bem-validators: map-remove($iro-bem-validators, $func-name, $func-names...) !global; +@function remove($func-name, $func-names...) { + $validators: map-remove($validators, $func-name, $func-names...); @return null; } /// /// @access private /// -@mixin iro-bem-validate($type, $args, $selector, $context) { - @each $id, $fn in $iro-bem-validators { +@mixin validate($type, $args, $selector, $context) { + @each $id, $fn in $validators { $result: call($fn, $type, $args, $selector, $context); @if not nth($result, 1) { @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}'; @@ -100,26 +104,26 @@ $iro-bem-validators: (); /// A validator that makes sure blocks are declared in the right order, determined by the /// namespace used. /// -@function iro-bem-validator--enforce-namespace-order($type, $args, $selector, $context) { - @if not global-variable-exists(iro-bem-namespace-order) { - $iro-bem-namespace-order: map-keys($iro-bem-namespaces) !global; +@function enforce-namespace-order($type, $args, $selector, $context) { + @if not global-variable-exists(namespace-order, vars) { + vars.$namespace-order: map-keys(vars.$namespaces); } - @if not global-variable-exists(iro-bem-cur-namespace-index) { - $iro-bem-cur-namespace-index: 1 !global; + @if not global-variable-exists(cur-namespace-index, vars) { + vars.$cur-namespace-index: 1; } @if $type == 'block' { $block-type: map-get($args, 'type'); @if $block-type != null { - $ns-index: index($iro-bem-namespace-order, $block-type); + $ns-index: index(vars.$namespace-order, $block-type); @if $ns-index != null { - @if $ns-index < $iro-bem-cur-namespace-index { - @return false 'Namespace "#{$block-type}" comes before current namespace #{nth($iro-bem-namespace-order, $iro-bem-cur-namespace-index)}'; + @if $ns-index < vars.$cur-namespace-index { + @return false 'Namespace "#{$block-type}" comes before current namespace #{nth(vars.$namespace-order, vars.$cur-namespace-index)}'; } - $iro-bem-cur-namespace-index: $ns-index !global; + vars.$cur-namespace-index: $ns-index; } } } @@ -130,9 +134,9 @@ $iro-bem-validators: (); /// /// A validator that makes all BEM entities immutable. /// -@function iro-bem-validator--immutable-entities($type, $args, $selector, $context) { - @if not global-variable-exists(iro-bem-generated-selectors) { - $iro-bem-generated-selectors: () !global; +@function immutable-entities($type, $args, $selector, $context) { + @if not global-variable-exists(generated-selectors, vars) { + vars.$generated-selectors: (); } $block-name: null; @@ -143,7 +147,7 @@ $iro-bem-validators: (); $block-name: map-get($args, 'name'); $block-type: map-get($args, 'type'); } @else { - $block-context: iro-context-get($iro-bem-context-id, 'block'); + $block-context: contexts.get(vars.$context-id, 'block'); $block-name: map-get(nth($block-context, 2), 'name'); $block-type: map-get(nth($block-context, 2), 'type'); } @@ -155,21 +159,21 @@ $iro-bem-validators: (); } @if $type == 'block' { - @if map-has-key($iro-bem-generated-selectors, $block-id) { - @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; + @if map-has-key(vars.$generated-selectors, $block-id) { + @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.'; } - $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: ())) !global; + vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: ())); } @else { - $selectors: map-get($iro-bem-generated-selectors, $block-id); + $selectors: map-get(vars.$generated-selectors, $block-id); @if index($selectors, $selector) { - @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; + @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.'; } $selectors: append($selectors, $selector); - $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: $selectors)) !global; + vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: $selectors)); } @return true ''; diff --git a/src/bem/_vars.scss b/src/bem/_vars.scss index 5942d4f..3d0f92a 100644 --- a/src/bem/_vars.scss +++ b/src/bem/_vars.scss @@ -9,21 +9,21 @@ /// /// @type string /// -$iro-bem-element-separator: '__' !default; +$element-separator: '__' !default; /// /// Separating character sequence for modifiers. /// /// @type string /// -$iro-bem-modifier-separator: '--' !default; +$modifier-separator: '--' !default; /// /// Separating character sequence for BEMIT suffixes. /// /// @type string /// -$iro-bem-suffix-separator: '\\@' !default; +$suffix-separator: '\\@' !default; /// /// Prefixes for all BEMIT namespaces. @@ -40,7 +40,7 @@ $iro-bem-suffix-separator: '\\@' !default; /// /// @type map /// -$iro-bem-namespaces: ( +$namespaces: ( object: 'o', component: 'c', layout: 'l', @@ -59,14 +59,14 @@ $iro-bem-namespaces: ( /// /// @access private /// -$iro-bem-blocks: (); +$blocks: (); /// /// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit. /// /// @type number /// -$iro-bem-max-depth: 99 !default; +$max-depth: 99 !default; /// /// Indicates how nested elements should be handled. @@ -78,28 +78,28 @@ $iro-bem-max-depth: 99 !default; /// /// @type string /// -$iro-bem-element-nesting-policy: 'allow' !default; +$element-nesting-policy: 'allow' !default; /// /// Context ID used for all BEM-related mixins. /// /// @type string /// -$iro-bem-context-id: 'bem' !default; +$context-id: 'bem' !default; /// /// Debug mode. /// /// @type bool /// -$iro-bem-debug: false !default; +$debug: false !default; /// /// Colors assigned to namespaces. /// /// @type map /// -$iro-bem-debug-colors: ( +$debug-colors: ( object: #ffa500, component: #00f, layout: #ff0, -- cgit v1.2.3-54-g00ecf