refactor(variant.combine()): use values.join(), use and update spec.

angular-package · Sep 24, 2023 · 5afd3c2 · 5afd3c2
1 parent e8d08d3
commit 5afd3c2
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 24 deletions.
diff --git a/class/variant/_variant.combine.mixin.scss b/class/variant/_variant.combine.mixin.scss
@@ -4,7 +4,9 @@
 
 // Functions.
 @use '../../selector/selector.class.function' as *;
-@use '../../values/values.combine.function' as *;
+
+// Modules.
+@use '../../values';
 
 // Status: REVIEW:
 // The `variant.combine()` mixin.
@@ -30,11 +32,24 @@
                 @each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
                   $-value-class: $value-class;
                   @each $value-class in if(list.separator($value-class) == comma, $value-class, ($value-class,)) {
-                    $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class, $attribute, $value-class), $pseudo-class, $dictionary), $separator: comma);
+                    $-class: list.append(
+                      $-class,
+                      meta.call(
+                        $function,
+                        values.join(
+                          if(&, '&', ()),
+                          $class,
+                          $attribute,
+                          $value-class
+                        ),
+                        $pseudo-class,
+                        $dictionary
+                      ),
+                      $separator: comma
+                    );
                   }
                 }
               }
-
               #{$-class} {
                 @content($class, $attribute, $-value-class, $value);
               }
@@ -44,11 +59,22 @@
               $-class: ();
               @each $class in if(list.separator($class) == comma, $class, ($class,)) {
                 @each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
-                  $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class, $attribute), $pseudo-class, $dictionary), $separator: comma);
+                  $-class: list.append(
+                    $-class, meta.call(
+                      $function,
+                      values.join(
+                        if(&, '&', ()),
+                        $class,
+                        $attribute
+                      ),
+                      $pseudo-class,
+                      $dictionary
+                    ),
+                    $separator: comma
+                  );
                 }
               }
             }
-
             #{$-class} {
               @content($class, $attribute, $value);
             }
@@ -58,10 +84,21 @@
         @each $value in $attribute-value {
           $-class: ();
           @each $class in if(list.separator($class) == comma, $class, ($class,)) {
-            $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class), $pseudo-class, $dictionary), $separator: comma);
+            $-class: list.append(
+              $-class,
+              meta.call(
+                $function,
+                values.join(
+                  if(&, '&', ()),
+                  $class
+                ),
+                $pseudo-class,
+                $dictionary
+              ),
+              $separator: comma
+            );
           }
         }
-
         #{$-class} {
           @content($class, $attribute-value);
         }

diff --git a/class/variant/_variant.combine.mixin.spec.scss b/class/variant/_variant.combine.mixin.spec.scss
@@ -1,8 +1,8 @@
 // Mixins.
-@use 'class.variant-combine.mixin' as *;
+@use 'variant.combine.mixin' as *;
 
 // Examples.
-// @include variant-combine((padding: unit 1)) using($property, $value) {
+// @include combine((padding: unit 1)) using($property, $value) {
 //   @debug $property; // padding
 //   @debug $value; // unit 1
 
@@ -12,7 +12,7 @@
 //   padding: unit 1;
 // }
 
-// @include variant-combine((padding: (unit 1 unit 2))) using($property, $value) {
+// @include combine((padding: (unit 1 unit 2))) using($property, $value) {
 //   @debug $property; // padding
 //   @debug $value; // unit 1 unit 2
 
@@ -22,7 +22,7 @@
 //   padding: unit 1 unit 2;
 // }
 
-// @include variant-combine((padding: (unit 1, unit 2))) using($property, $value) {
+// @include combine((padding: (unit 1, unit 2))) using($property, $value) {
 //   @debug $property; // padding
 //   @debug $value; // unit 1, unit 2
 
@@ -32,7 +32,7 @@
 //   padding: unit 1, unit 2;
 // }
 
-// @include variant-combine((padding large: unit 1)) using($property, $value) {
+// @include combine((padding large: unit 1)) using($property, $value) {
 //   @debug $property; // padding large
 //   @debug $value; // unit 1
 
@@ -42,7 +42,7 @@
 //   padding: unit 1;
 // }
 
-// @include variant-combine((padding (small, large): unit 1)) using($property, $value) {
+// @include combine((padding (small, large): unit 1)) using($property, $value) {
 //   @debug $property; // padding (small, large)
 //   @debug $value; // unit 1
 
@@ -52,7 +52,7 @@
 //   padding: unit 1;
 // }
 
-// @include variant-combine(((outline, inline) padding: unit 1)) using($property, $value) {
+// @include combine(((outline, inline) padding: unit 1)) using($property, $value) {
 //   @debug $property; // (outline, inline) padding
 //   @debug $value; // unit 1
 
@@ -62,14 +62,14 @@
 //   padding: unit 1;
 // }
 
-// @include variant-combine((padding: (size one: unit 1))) using($property, $value-class, $value) {
+// @include combine((padding: (size one: unit 1))) using($property, $value-class, $value) {
 //   #{$property}: #{$value};
 // }
 // .padding-size-one {
 //   padding: unit 1;
 // }
 
-// @include variant-combine((border: ((top left, top right): unit 1))) using($property, $side, $value) {
+// @include combine((border: ((top left, top right): unit 1))) using($property, $side, $value) {
 //   @debug $property; // padding
 //   @debug $side; // top left, top right
 //   @debug $value; // unit 1
@@ -80,14 +80,14 @@
 //   border: unit 1;
 // }
 
-// @include variant-combine((padding: ((top, bottom): unit 1))) using($property, $value-class, $value) {
+// @include combine((padding: ((top, bottom): unit 1))) using($property, $value-class, $value) {
 //   #{$property}: #{$value};
 // }
 // .padding-top, .padding-bottom {
 //   padding: unit 1;
 // }
 
-// @include variant-combine(((margin, padding): ((left, right): 0))) using($property, $side, $value) {
+// @include combine(((margin, padding): ((left, right): 0))) using($property, $side, $value) {
 //   @each $property in $property {
 //     #{$property}: #{$value};
 //   }
@@ -97,7 +97,7 @@
 //   padding: 0;
 // }
 
-// @include variant-combine(((margin, padding): ((left): 0))) using($property, $side, $value) {
+// @include combine(((margin, padding): ((left): 0))) using($property, $side, $value) {
 //   @each $property in $property {
 //     #{$property}: #{$value};
 //   }
@@ -107,7 +107,7 @@
 //   padding: 0;
 // }
 
-// @include variant-combine((margin: ((left, right): (0: 0)))) using($property, $side, $value-class, $value) {
+// @include combine((margin: ((left, right): (0: 0)))) using($property, $side, $value-class, $value) {
 //   @debug $property; // margin
 //   @debug $side; // left, right
 //   @debug $value-class; // 0
@@ -119,7 +119,7 @@
 //   cursor: grab;
 // }
 
-// @include variant-combine(((margin, padding): ((left, right): ((xs, xl): 0)))) using($property, $side, $value-class, $value) {
+// @include combine(((margin, padding): ((left, right): ((xs, xl): 0)))) using($property, $side, $value-class, $value) {
 //   @debug $property; // margin, padding
 //   @debug $side; // left, right
 //   @debug $value-class; // xs, xl
@@ -131,15 +131,15 @@
 //   margin: 0;
 // }
 
-// @include variant-combine((padding: ((top, bottom): ((size one, size two): unit 1, size two: unit 2)))) using($property, $side, $value-class, $value) {
+// @include combine((padding: ((top, bottom): ((size one, size two): unit 1, size two: unit 2)))) using($property, $side, $value-class, $value) {
 //   font: 100;
 // }
 
-// @include variant-combine(((padding, margin): ((top, right, bottom, left): (size one: unit 1)))) using($property, $side, $value-class, $value) {
+// @include combine(((padding, margin): ((top, right, bottom, left): (size one: unit 1)))) using($property, $side, $value-class, $value) {
 //   padding: #{$value};
 // }
 
-// @include variant-combine(((padding, border): ((right bottom, left top, ): (2: unit 2, 3: unit 3)))) using($resolved...) {
+// @include combine(((padding, border): ((right bottom, left top, ): (2: unit 2, 3: unit 3)))) using($resolved...) {
 //   @debug $resolved;
 //   font-size: 1;
 // }