From bef58329db7eb4a31f0a21e381341c4f89fa973e Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 18 Mar 2022 10:11:07 +0900
Subject: [PATCH] Clean: SASS - apply `AtEach`

---
 __tests__/media.test.scss  |  4 ++--
 __tests__/option.test.scss | 42 ++++++++++++++++++++++++++++++++++++--
 src/utils/_each.scss       | 24 ++++++++++++----------
 src/utils/_media.scss      | 22 ++++----------------
 src/utils/_option.scss     | 10 +++++----
 src/utils/_os.scss         |  2 +-
 6 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/__tests__/media.test.scss b/__tests__/media.test.scss
index c41b031..bd561ae 100644
--- a/__tests__/media.test.scss
+++ b/__tests__/media.test.scss
@@ -7,7 +7,7 @@
     @include assert {
       @include output {
         $input: "hover: hover" "max-width: 1024px";
-        @include media.each($input) {
+        @include media.each($input...) {
           body {
             font-size: 16px;
           }
@@ -28,7 +28,7 @@
       @include output {
         $input: "hover: hover" "max-width: 1024px";
         body {
-          @include media.each($input) {
+          @include media.each($input...) {
             font-size: 16px;
           }
         }
diff --git a/__tests__/option.test.scss b/__tests__/option.test.scss
index 1f6032a..936911f 100644
--- a/__tests__/option.test.scss
+++ b/__tests__/option.test.scss
@@ -12,7 +12,26 @@
         }
       }
       @include expect {
-        @supports -moz-bool-pref("userChrome.tab.photon") {
+        @supports -moz-bool-pref(userChrome.tab.photon) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  @include test("multiple") {
+    @include assert {
+      @include output {
+        @include option.Option("userChrome.tab.photon", "userChrome.padding.photon") {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref(userChrome.tab.photon) or -moz-bool-pref(userChrome.padding.photon) {
           body {
             font-size: 16px;
           }
@@ -33,7 +52,26 @@
         }
       }
       @include expect {
-        @supports not -moz-bool-pref("userChrome.tab.photon") {
+        @supports not -moz-bool-pref(userChrome.tab.photon) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  @include test("multiple") {
+    @include assert {
+      @include output {
+        @include option.Option("userChrome.tab.photon", "userChrome.padding.photon") {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref(userChrome.tab.photon) or -moz-bool-pref(userChrome.padding.photon) {
           body {
             font-size: 16px;
           }
diff --git a/src/utils/_each.scss b/src/utils/_each.scss
index 631fdf2..0836615 100644
--- a/src/utils/_each.scss
+++ b/src/utils/_each.scss
@@ -3,18 +3,20 @@
 
 @mixin AtEach($name, $list, $prefix: null, $seperator: ", ") {
   $listL: list.length($list);
-  $first: list.nth($list, 1);
-  @if $listL >= 1 and $first != null {
-    $blocks: "#{$prefix}(#{$first})";
-    @if $listL > 1 {
-      @for $i from 2 through ($listL) {
-        $nextBlock: list.nth($list, $i);
-        $nextBlock: "#{$seperator}#{$prefix}(#{$nextBlock})";
-        $blocks: "#{$blocks}#{$nextBlock}";
+  @if $listL >= 1 {
+    $first: list.nth($list, 1);
+    @if $first != null and $first != () {
+      $blocks: "#{$prefix}(#{$first})";
+      @if $listL > 1 {
+        @for $i from 2 through ($listL) {
+          $nextBlock: list.nth($list, $i);
+          $nextBlock: "#{$seperator}#{$prefix}(#{$nextBlock})";
+          $blocks: "#{$blocks}#{$nextBlock}";
+        }
+      }
+      @#{$name} #{"#{$blocks}"} {
+        @content;
       }
-    }
-    @#{$name} #{"#{$blocks}"} {
-      @content;
     }
   }
 }
diff --git a/src/utils/_media.scss b/src/utils/_media.scss
index b2ddf36..2a87955 100644
--- a/src/utils/_media.scss
+++ b/src/utils/_media.scss
@@ -1,21 +1,7 @@
-@use "sass:list";
-@use "list" as list-utils;
+@use "each";
 
-@mixin each($list) {
-  $listL: list.length($list);
-  @if $listL > 1  {
-    @for $i from 1 through ($listL - 1) {
-      $media: list.nth($list, $i);
-      $list: list.set-nth($list, $i, "(" + $media + "), ");
-    }
-  }
-
-  @if ($listL >= 1) and list.nth($list, 1) != null {
-    $media: list.nth($list, $listL);
-    $list: list.set-nth($list, $listL, "(" + $media + ")");
-
-    @media #{list-utils.to-string($list)} {
-      @content;
-    }
+@mixin each($list...) {
+  @include each.AtEach("media", $list) {
+    @content;
   }
 }
diff --git a/src/utils/_option.scss b/src/utils/_option.scss
index 8c8cc4a..8986164 100644
--- a/src/utils/_option.scss
+++ b/src/utils/_option.scss
@@ -1,3 +1,5 @@
+@use "each";
+
 $tabProton: "userChrome.tab.proton";
 $tabConnectToWindow: "userChrome.tab.connect_to_window";
 $tabBoxShadow: "userChrome.tab.box_shadow";
@@ -9,14 +11,14 @@ $tabProtonLikePadding: "userChrome.tab.proton_like_padding";
 
 $tabMultiSelected: "userChrome.tab.multi_selected";
 
-@mixin Option($optionName) {
-  @supports -moz-bool-pref("#{$optionName}") {
+@mixin Option($optionNames...) {
+  @include each.AtEach("supports", $optionNames, "-moz-bool-pref", " or ") {
     @content;
   }
 }
 
-@mixin NotOption($optionName) {
-  @supports not -moz-bool-pref("#{$optionName}") {
+@mixin NotOption($optionNames...) {
+  @include each.AtEach("supports", $optionNames, "not -moz-bool-pref", " or ") {
     @content;
   }
 }
diff --git a/src/utils/_os.scss b/src/utils/_os.scss
index 8b26164..f326f1e 100644
--- a/src/utils/_os.scss
+++ b/src/utils/_os.scss
@@ -54,7 +54,7 @@ $_os-media: map.merge(
     }
   }
 
-  @include media.each($osMedias) {
+  @include media.each($osMedias...) {
     @content;
   }