Add: SASS - OS mixin

This commit is contained in:
alstjr7375 2021-12-17 00:54:46 +09:00
parent 9f1f19d1b3
commit 38812b9baa
2 changed files with 204 additions and 0 deletions

152
__tests__/os.test.scss Normal file
View file

@ -0,0 +1,152 @@
@use 'true' as *;
@use "../src/utils/os" as *;
// TODO: Need more tests..
@mixin example() {
body {
font-size: 16px;
}
}
@include test-module("Create OS related media [mix]") {
@include test("win7") {
@include assert {
@include output {
@include OS($win7) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win7) {
@include example;
}
}
}
}
@include test("win8") {
@include assert {
@include output {
@include OS($win8) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win8) {
@include example;
}
}
}
}
@include test("win10") {
@include assert {
@include output {
@include OS($win10) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win10) {
@include example;
}
}
}
}
@include test("linux") {
@include assert {
@include output {
@include OS($linux) {
@include example;
}
}
@include expect {
@media (-moz-gtk-csd-available) {
@include example;
}
}
}
}
@include test("mac") {
@include assert {
@include output {
@include OS($mac) {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@include example;
}
}
}
}
@include test("bigsur") {
@include assert {
@include output {
@include OS($bigsur) {
@include example;
}
}
@include expect {
@media (-moz-mac-big-sur-theme: 0) {
@include example;
}
}
}
}
@include test("win") {
@include assert {
@include output {
@include OS($win) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
@include example;
}
}
}
}
@include test("all os - win7, win8, win10, mac, bigsur, linux") {
@include assert {
@include output {
@include OS($win7, $win8, $win10, $mac, $bigsur, $linux) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) {
@include example;
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@include example;
}
}
}
}
@include test("all os - win, mac, bigsur, linux") {
@include assert {
@include output {
@include OS($win, $mac, $bigsur, $linux) {
@include example;
}
}
@include expect {
@media (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available), (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
@include example;
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@include example;
}
}
}
}
}

52
src/utils/_os.scss Normal file
View file

@ -0,0 +1,52 @@
@use "sass:list";
@use "sass:map";
@use "list" as list-utils;
@use "media";
$win: "win";
$mac: "mac";
$linux: "linux";
$win7: "win7";
$win8: "win8";
$win10: "win10";
$bigsur: "bigsur";
$_win-template: "-moz-os-version: windows-";
$_win-media: (
#{$win7}: $_win-template + "win7",
#{$win8}: $_win-template + "win8",
#{$win10}: $_win-template + "win10",
);
$_others-media: (
#{$linux}: "-moz-gtk-csd-available",
#{$bigsur}: "-moz-mac-big-sur-theme: 0",
);
$_os-media: map.merge(
$_win-media, $_others-media
);
@mixin OS($osNames...) {
@if list.index($osNames, $win) {
$osNames: list-utils.remove($osNames, $win);
$osNames: list.join($osNames, map.keys($_win-media));
}
$osMedias: ();
@each $osName in $osNames {
$osMedia: map.get($_os-media, $osName);
@if $osMedia != null {
$osMedias: list.append($osMedias, $osMedia);
}
}
@include media.each($osMedias) {
@content;
}
@if list.index($osNames, $mac) {
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@content;
}
}
}