refactor(class): handle 3 elements in $content-keys, and use `funct…

…ion` in `$attribute`, update variant spec.
angular-package · Aug 22, 2023 · c88c00a · c88c00a
1 parent a2ed250
commit c88c00a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/class/variant/_variant.mixin.scss b/class/variant/_variant.mixin.scss
@@ -11,6 +11,7 @@
 @use '../class.content.mixin' as class;
 
 // Modules.
+@use '../../function';
 @use '../../values';
 
 // Status: DONE
@@ -27,17 +28,23 @@
   $content-type: list
 ) {
   @if type-of($variant) == map {
-    $content-keys: (class, (2: value, 4: property), (4: value-class, 5: attribute), (4: value, 5: value-class), value, variant);
+    $content-keys: (
+      class,
+      (2: value, 3: property, 4: property),
+      (3: value, 4: value-class, 5: attribute),
+      (4: value, 5: value-class),
+      value,
+      variant
+    );
     @each $class, $attribute-variant in $variant {
       $property: null;
       @if type-of($class) == map { @each $-class, $-property in $class { $class: $-class; $property: $-property; }}
       @if type-of($attribute-variant) == map {
         @each $attribute, $variant in $attribute-variant {
           @if type-of($attribute) == map {
-            @each $key, $value in $attribute { $attribute: nest(($key, $value)); }
-          } @else {
-            // @debug $attribute;
-            // $attribute: if(list.length($attribute) > 0, values.call($attribute, (list: false)), ());
+            @each $key, $value in $attribute { $attribute: nest($key, $value); }
+          } @else if function.has($attribute) {
+            $attribute: function.call-arglist($attribute...);
           }
           @each $class in if(list.separator($class) == comma, $class, ($class,)) {
             @if type-of($variant) == map {
@@ -82,8 +89,8 @@
               @include class.content(values.combine((method: join), if(&, '&', ()), $class), $pseudo-class, $dictionary, $function) {
                 $content: if(
                   $content-type == map,
-                  to-map(($class, $property, $value), $content-keys...),
-                  values.combine((separator: comma), $class, $property, $value)
+                  to-map(($class, $property or $class, $value), $content-keys...),
+                  values.combine((separator: comma), $class, $property or $class, $value)
                 );
                 @if type-of($content) == list { @content($content...); } @else { @content($content); }
               }

diff --git a/class/variant/_variant.mixin.spec.scss b/class/variant/_variant.mixin.spec.scss
@@ -6,6 +6,17 @@
 // Mixins.
 @use 'variant.mixin' as *;
 
+// @include variant(((color: (background, color)): primary dark)) using($resolved...) {
+//   @debug $resolved;
+
+//   width: auto;
+// }
+
+// @include variant((color: primary dark)) using($resolved...) {
+//   @debug $resolved;
+
+//   width: auto;
+// }
 
 // @include variant(((color basic: (red, green)))) using($resolved...) {
 //   @debug $resolved;
@@ -24,7 +35,6 @@
 //   color: list.nth($resolved, 4);
 // }
 
-
 // @include variant(((color basic: (red: (light: red light, dark: red dark))))) using($resolved...) {
 //   // @debug list.nth($resolved, 4);
 //   @debug $resolved;
@@ -38,14 +48,10 @@
 //   width: auto;
 // }
 
-
-
 // @include variant(((color basic: (red: (light: red light, dark: red dark))))) using($resolved...) {
 //   color: list.nth($resolved, 5);
 // }
 
-
-
 // Examples.
 // @include variant((padding: unit 1)) using($property, $value) {
 //   #{$property}: #{$value};