refactor(variant.update()): add ability to modify variant item 1, 2, 3.

angular-package · Oct 5, 2023 · 0272f3c · 0272f3c
1 parent b58f461
commit 0272f3c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/variant/_variant.update.function.scss b/variant/_variant.update.function.scss
@@ -16,54 +16,71 @@
 @function update($variant, $modifier) {
   $result: ();
   @each $name, $side-variant in $variant {
+    $modified: false;
     @if type-of($side-variant) == map {
       @each $side, $variant in $side-variant {
         @if type-of($variant) == map {
           @each $-class, $value in $variant {
-            @if map.get-any($modifier, class, property, null) {
+            @if map.get-any($modifier, 3, class, property, null) {
+              // use level modifier
+              $-modifier: map.get-any($modifier, 3, null) or $modifier;
               $result: map.deep-merge(
                 $result, (
-                  update.item($name, map.pick(map.get($modifier, class), prefix), map.get($modifier, property)): (
-                    update.item($side, null, map.get($modifier, property), attribute): (
-                      class.affix-add($-class, map.pick(map.get($modifier, class), suffix)): $value
+                  update.item($name, map.pick(map.get($-modifier, class), prefix), map.get($-modifier, property)): (
+                    update.item($side, null, map.get($-modifier, property), attribute): (
+                      class.affix-add($-class, map.pick(map.get($-modifier, class), suffix)): $value
                     )
                   )
                 )
               );
+              $modified: true;
             }
           }
         } @else {
-          @if map.get-any($modifier, class, property, null) {
+          @if map.get-any($modifier, 2, class, property, null) {
+            // use level modifier
+            $-modifier: map.get-any($modifier, 2, null) or $modifier;
             $-class: $side;
+
+            // set proper variable names
             $side: $name;
             $value: $variant;
             $result: map.deep-merge(
               $result, (
-                update.item((), map.pick(map.get($modifier, class), prefix), map.get($modifier, property)): (
-                  update.item($side, null, map.get($modifier, property), attribute): (
-                    class.affix-add($-class, map.pick(map.get($modifier, class), suffix)): $value
+                update.item((), map.pick(map.get($-modifier, class), prefix), map.get($-modifier, property)): (
+                  update.item($side, null, map.get($-modifier, property), attribute): (
+                    class.affix-add($-class, map.pick(map.get($-modifier, class), suffix)): $value
                   )
                 )
               )
             );
+            $modified: true;
           }
         }
       }
     } @else {
-      @if map.get-any($modifier, class, property, null) {
+      @if map.get-any($modifier, 1, class, property, null) {
+        // use level modifier
+        $-modifier: map.get-any($modifier, 1, null) or $modifier;
+
+        // set proper variable names
         $value: $side-variant;
         $value-class: $name;
         $result: map.deep-merge(
           $result, (
-            update.item((), map.pick(map.get($modifier, class), prefix), map.get($modifier, property)): (
-              update.item((), null, map.get($modifier, property), attribute): (
-                class.affix-add($value-class, map.pick(map.get($modifier, class), suffix)): $value
+            update.item((), map.pick(map.get($-modifier, class), prefix), map.get($-modifier, property)): (
+              update.item((), null, map.get($-modifier, property), attribute): (
+                class.affix-add($value-class, map.pick(map.get($-modifier, class), suffix)): $value
               )
             )
           )
         );
+        $modified: true;
       }
     }
+    @if not $modified {
+      $result: map.deep-merge($result, ($name: $side-variant));
+    }
   }
   @return $result;
 }
diff --git a/variant/_variant.update.spec.scss b/variant/_variant.update.spec.scss
@@ -99,3 +99,14 @@
 //   (class: (prefix: border, suffix: test), property: (base: border, attribute: radius))
 // ));
 
+@debug variant.update(
+  (
+    border: (basic: (third: third light, fourth: fourth light)),
+    basic: (secondary: secondary light, primary: primary light),
+    primary: primary dark,
+  ),
+  (
+    1: (class: (prefix: border, suffix: test), property: (base: border, attribute: radius)),
+    2: (class: (prefix: border, suffix: end), property: (middle: null)),
+  )
+);