[refactor]: Move nesting to bem-extend()

ElementUI · Nov 20, 2019 · e71acd8 · e71acd8
1 parent e3198ca
commit e71acd8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 53 deletions.
diff --git a/src/mixins/function.scss b/src/mixins/function.scss
@@ -6,7 +6,7 @@
 /// See [Combinators](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators "CSS selectors")
 $_selector-combinators: ("+", "~", ">", "||");
 
-@function bem-extend($selectors, $extendee, $extender) {
+@function bem-extend($selectors, $extendees, $extender) {
   $returns: ();
 
   @if null == $selectors {
@@ -16,15 +16,13 @@ $_selector-combinators: ("+", "~", ">", "||");
   @each $selector in $selectors {
     $len: length($selector);
 
-    @if nth($selector, $len) == $extendee {
-      @if $len >= 2 {
-        @if index($_selector-combinators, nth($selector, $len - 1)) == null {
-          $returns: append($returns, set-nth($selector, $len, $extender), "comma");
-        } @else {
-          $returns: append($returns, append($selector, $extender), "comma");
-        }
-      } @else {
+    @if index($extendees, nth($selector, $len)) != null {
+      @if $len < 2 {
         $returns: append($returns, ($extender), "comma");
+      } @else if index($_selector-combinators, nth($selector, $len - 1)) == null {
+        $returns: append($returns, set-nth($selector, $len, $extender), "comma");
+      } @else {
+        $returns: append($returns, append($selector, $extender), "comma");
       }
     } @else {
       $returns: append($returns, append($selector, $extender), "comma");

diff --git a/src/mixins/mixins.scss b/src/mixins/mixins.scss
@@ -83,42 +83,34 @@ $_BEM: (null, null, null);
 
 @mixin e($elements) {
   $block: nth($_BEM, 1);
+  $old-elements: nth($_BEM, 2);
 
   @if null == $block {
     @error "Base-level rules cannot contain an element mixin";
   } @else {
-    $selects: &;
-    $old-elems: nth($_BEM, 2);
-
-    @if (null != $old-elems) {
-      $selects: ();
-
-      @each $old-select in & {
-        @each $old-element in $old-elems {
-          $old-bem: ".#{$namespace}-#{$block}#{$element-separator}#{$old-element}";
-          $old-len: length($old-select);
-
-          @if nth($old-select, $old-len) == $old-bem {
-            $selects: append($selects, set-nth($old-select, $old-len, ".#{$namespace}-#{$block}"), "comma", );
-          } @else {
-            $selects: append($selects, $old-select, "comma", );
-          }
-        }
-      }
-    }
-
     $lastBEM: $_BEM;
     $_BEM: ($block, $elements, null) !global;
 
-    $parent: ".#{$namespace}-#{$block}";
+    $parents: ();
+
+    @if (null == $old-elements) {
+      $parents: append($parents, ".#{$namespace}-#{$block}");
+    } @else {
+      @each $element in $old-elements {
+        $parents: append($parents, ".#{$namespace}-#{$block}#{$element-separator}#{$element}");
+      }
+    }
+
     $current: ();
 
     @each $element in $elements {
-      $current: append(
-        $current,
-        bem-extend($selects, $parent, "#{$parent}#{$element-separator}#{$element}"),
-        "comma",
-      );
+      @each $parent in $parents {
+        $current: append(
+          $current,
+          bem-extend(&, $parent, ".#{$namespace}-#{$block}#{$element-separator}#{$element}"),
+          "comma",
+        );
+      }
     }
 
     @at-root {
@@ -133,42 +125,42 @@ $_BEM: (null, null, null);
 
 @mixin m($modifiers) {
   $block: nth($_BEM, 1);
+  $elements: nth($_BEM, 2);
+  $old-modifiers: nth($_BEM, 3);
 
   @if null == $block {
     @error "Base-level rules cannot contain a modifier mixin";
-  } @else if null != nth($_BEM, 3) {
+  } @else if null != $old-modifiers {
     @error "Modifier-level rules cannot contain another modifier mixin";
   } @else {
-    $elements: nth($_BEM, 2);
-
-    @if (null == $elements) {
-      $elements: (null);
-    }
-
     $lastBEM: $_BEM;
     $_BEM: ($block, $elements, $modifiers) !global;
 
-    @each $element in $elements {
-      $parent: ".#{$namespace}-#{$block}";
+    $parents: ();
 
-      @if (null != $element) {
-        $parent: "#{$parent}#{$element-separator}#{$element}";
+    @if (null == $elements) {
+      $parents: append($parents, ".#{$namespace}-#{$block}");
+    } @else {
+      @each $element in $elements {
+        $parents: append($parents, ".#{$namespace}-#{$block}#{$element-separator}#{$element}");
       }
+    }
 
-      $current: ();
+    $current: ();
 
-      @each $modifier in $modifiers {
+    @each $modifier in $modifiers {
+      @each $parent in $parents {
         $current: append(
           $current,
-          bem-extend(&, $parent, "#{$parent}#{$modifier-separator}#{$modifier}"),
+          bem-extend(&, $parents, "#{$parent}#{$modifier-separator}#{$modifier}"),
           "comma",
         );
       }
+    }
 
-      @at-root {
-        #{$current} {
-          @content;
-        }
+    @at-root {
+      #{$current} {
+        @content;
       }
     }