refactor(static): refactor weather-icons lib

static/src/index.ts

@@ -1,7 +1,6 @@
 import * as bootstrap from "bootstrap";
 import "./components";
 import "./language";
-//import "./main.scss";
 import "./theme";
 import "./weather/weather";
 import "./schedule/schedule";

static/src/lib/weather-icons.scss

@@ -0,0 +1,3 @@
+@use "./weather-icons/sass/weather-icons" with (
+  $weather-icons-path: "weather-icons/icons"
+);

static/src/lib/weather-icons/build.py

@@ -1,22 +0,0 @@
-from pathlib import Path
-from string import Template
-
-LIST_ITEM = Template(
-    """.$name {
-  mask-image: url(./svg/$name.svg);
-}
-"""
-)
-
-
-def generate():
-    work_dir = Path(__file__).parent
-    data = ""
-    for item in (work_dir / "svg").glob("*.svg"):
-        data += LIST_ITEM.substitute({"name": item.stem})
-    target = work_dir / "classes-list.scss"
-    target.write_text(data)
-
-
-if __name__ == "__main__":
-    generate()

static/src/lib/weather-icons/classes-list.scss

@@ -1,93 +0,0 @@
-.wi-day-snow {
-  mask-image: url(./svg/wi-day-snow.svg);
-}
-.wi-rain-mix {
-  mask-image: url(./svg/wi-rain-mix.svg);
-}
-.wi-thunderstorm {
-  mask-image: url(./svg/wi-thunderstorm.svg);
-}
-.wi-hail {
-  mask-image: url(./svg/wi-hail.svg);
-}
-.wi-day-rain {
-  mask-image: url(./svg/wi-day-rain.svg);
-}
-.wi-cloudy {
-  mask-image: url(./svg/wi-cloudy.svg);
-}
-.wi-day-hail {
-  mask-image: url(./svg/wi-day-hail.svg);
-}
-.wi-night-clear {
-  mask-image: url(./svg/wi-night-clear.svg);
-}
-.wi-day-cloudy {
-  mask-image: url(./svg/wi-day-cloudy.svg);
-}
-.wi-day-storm-showers {
-  mask-image: url(./svg/wi-day-storm-showers.svg);
-}
-.wi-lightning {
-  mask-image: url(./svg/wi-lightning.svg);
-}
-.wi-day-rain-mix {
-  mask-image: url(./svg/wi-day-rain-mix.svg);
-}
-.wi-day-showers {
-  mask-image: url(./svg/wi-day-showers.svg);
-}
-.wi-storm-showers {
-  mask-image: url(./svg/wi-storm-showers.svg);
-}
-.wi-snow {
-  mask-image: url(./svg/wi-snow.svg);
-}
-.wi-cloud {
-  mask-image: url(./svg/wi-cloud.svg);
-}
-.wi-night-alt-snow {
-  mask-image: url(./svg/wi-night-alt-snow.svg);
-}
-.wi-night-alt-lightning {
-  mask-image: url(./svg/wi-night-alt-lightning.svg);
-}
-.wi-day-sunny {
-  mask-image: url(./svg/wi-day-sunny.svg);
-}
-.wi-night-alt-hail {
-  mask-image: url(./svg/wi-night-alt-hail.svg);
-}
-.wi-night-alt-cloudy {
-  mask-image: url(./svg/wi-night-alt-cloudy.svg);
-}
-.wi-night-alt-storm-showers {
-  mask-image: url(./svg/wi-night-alt-storm-showers.svg);
-}
-.wi-day-thunderstorm {
-  mask-image: url(./svg/wi-day-thunderstorm.svg);
-}
-.wi-wind-deg {
-  mask-image: url(./svg/wi-wind-deg.svg);
-}
-.wi-showers {
-  mask-image: url(./svg/wi-showers.svg);
-}
-.wi-night-alt-rain-mix {
-  mask-image: url(./svg/wi-night-alt-rain-mix.svg);
-}
-.wi-rain {
-  mask-image: url(./svg/wi-rain.svg);
-}
-.wi-night-alt-thunderstorm {
-  mask-image: url(./svg/wi-night-alt-thunderstorm.svg);
-}
-.wi-night-alt-showers {
-  mask-image: url(./svg/wi-night-alt-showers.svg);
-}
-.wi-day-lightning {
-  mask-image: url(./svg/wi-day-lightning.svg);
-}
-.wi-night-alt-rain {
-  mask-image: url(./svg/wi-night-alt-rain.svg);
-}

static/src/lib/weather-icons/sass/_variables.scss

@@ -0,0 +1,34 @@
+$weather-icons-path: "../icons" !default;
+$weather-icons-included: (
+  "wi-cloud",
+  "wi-cloudy",
+  "wi-day-cloudy",
+  "wi-day-hail",
+  "wi-day-lightning",
+  "wi-day-rain-mix",
+  "wi-day-rain",
+  "wi-day-showers",
+  "wi-day-snow",
+  "wi-day-storm-showers",
+  "wi-day-sunny",
+  "wi-day-thunderstorm",
+  "wi-hail",
+  "wi-lightning",
+  "wi-night-alt-cloudy",
+  "wi-night-alt-hail",
+  "wi-night-alt-lightning",
+  "wi-night-alt-rain-mix",
+  "wi-night-alt-rain",
+  "wi-night-alt-showers",
+  "wi-night-alt-snow",
+  "wi-night-alt-storm-showers",
+  "wi-night-alt-thunderstorm",
+  "wi-night-clear",
+  "wi-rain-mix",
+  "wi-rain",
+  "wi-showers",
+  "wi-snow",
+  "wi-storm-showers",
+  "wi-thunderstorm",
+  "wi-wind-deg"
+) !default;

static/src/lib/weather-icons/sass/_weather-icons-base.scss

@@ -1,5 +1,4 @@
-@import "./classes-list";
-@import "./classes-wind-aliases";
+@use "variables";
 
 .wi {
   display: inline-block;
@@ -21,3 +20,9 @@
     font-size: 3.5rem;
   }
 }
+
+@mixin weather-icon($icon) {
+  .#{$icon} {
+    mask-image: url(#{variables.$weather-icons-path}/#{$icon}.svg);
+  }
+}

static/src/lib/weather-icons/sass/_weather-icons-list.scss

@@ -0,0 +1,6 @@
+@use "variables";
+@use "weather-icons-base";
+
+@each $icon in variables.$weather-icons-included {
+  @include weather-icons-base.weather-icon($icon);
+}

static/src/lib/weather-icons/sass/weather-icons.scss

@@ -0,0 +1,4 @@
+@forward "variables";
+@use "weather-icons-base";
+@use "weather-icons-list";
+@use "weather-wind-aliases";

static/src/main.scss

@@ -1,7 +1,7 @@
 @import "./lib/flag-icons";
 @import "./lib/bootstrap";
 @import "./lib/bootstrap-icons";
-@import "./lib/weather-icons/weather-icons";
+@import "./lib/weather-icons";
 
 @import "./widget.scss";
 @import "./weather/weather.scss";