mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: SASS - AtEach mixin

Browse source
This commit is contained in:
alstjr7375 2022-03-18 02:14:32 +09:00
parent a8e4ad5e5f
commit d6f604dbdc
2 changed files with 141 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

121
__tests__/each.test.scss Normal file
View file

@ -0,0 +1,121 @@
@use 'true' as *;
@use "../src/utils/each";
@include test-module("Create each at rules [mix]") {
@include test("prefix single") {
@include assert {
@include output {
@include each.AtEach("-moz-document", "about:home", "url") {
body {
font-size: 16px;
}
}
}
@include expect {
@-moz-document url(about:home) {
body {
font-size: 16px;
}
}
}
}
}
@include test("prefix multiple") {
@include assert {
@include output {
$input: "about:home" "about:newtab";
@include each.AtEach("-moz-document", $input, "url") {
body {
font-size: 16px;
}
}
}
@include expect {
@-moz-document url(about:home), url(about:newtab) {
body {
font-size: 16px;
}
}
}
}
}
@include test("null prefix single") {
@include assert {
@include output {
@include each.AtEach("media", "max-width: 1024px") {
body {
font-size: 16px;
}
}
}
@include expect {
@media (max-width: 1024px) {
body {
font-size: 16px;
}
}
}
}
}
@include test("null prefix multiple") {
@include assert {
@include output {
$input: "hover: hover" "max-width: 1024px";
@include each.AtEach("media", $input) {
body {
font-size: 16px;
}
}
}
@include expect {
@media (hover: hover), (max-width: 1024px) {
body {
font-size: 16px;
}
}
}
}
}
@include test("prefix custom seperator single") {
@include assert {
@include output {
@include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", " or ") {
body {
font-size: 16px;
}
}
}
@include expect {
@supports -moz-bool-pref(userChrome.tab.photon) {
body {
font-size: 16px;
}
}
}
}
}
@include test("prefix custom seperator multiple") {
@include assert {
@include output {
$input: "userChrome.tab.photon" "userChrome.padding.photon";
@include each.AtEach("supports", $input, "-moz-bool-pref", " or ") {
body {
font-size: 16px;
}
}
}
@include expect {
@supports -moz-bool-pref(userChrome.tab.photon) or -moz-bool-pref(userChrome.padding.photon) {
body {
font-size: 16px;
}
}
}
}
}
}

20
src/utils/_each.scss Normal file
View file

@ -0,0 +1,20 @@
@use "sass:list";
@use "list" as list-utils;
@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}";
}
}
@#{$name} #{"#{$blocks}"} {
@content;
}
}
}