From bc5d5a0a4f1f1a700c3f4cb7df0630fd8f3e1a98 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 15 Dec 2021 16:27:09 +0900
Subject: [PATCH] Add: SASS - each media

---
 __tests__/media.test.scss | 45 +++++++++++++++++++++++++++++++++++++++
 src/utils/_media.scss     | 18 ++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 __tests__/media.test.scss
 create mode 100644 src/utils/_media.scss

diff --git a/__tests__/media.test.scss b/__tests__/media.test.scss
new file mode 100644
index 0000000..a29d2e4
--- /dev/null
+++ b/__tests__/media.test.scss
@@ -0,0 +1,45 @@
+@use 'true' as *;
+@use "../src/utils/media";
+
+// TODO: Need more tests..
+@include test-module("Create each media at once [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        $input: "hover: hover" "max-width: 1024px";
+        @include media.each($input) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @media (hover: hover), (max-width: 1024px) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  @include test("beyond") {
+    @include assert {
+      @include output {
+        $input: "hover: hover" "max-width: 1024px";
+        body {
+          @include media.each($input) {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @media (hover: hover), (max-width: 1024px) {
+          body {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/utils/_media.scss b/src/utils/_media.scss
new file mode 100644
index 0000000..5296901
--- /dev/null
+++ b/src/utils/_media.scss
@@ -0,0 +1,18 @@
+@use "sass:list";
+@use "list" as list-utils;
+
+@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 + "), ");
+    }
+  }
+  $media: list.nth($list, $listL);
+  $list: list.set-nth($list, $listL, "(" + $media + ")");
+
+  @media #{list-utils.to-string($list)} {
+    @content;
+  }
+}