From 63d0ad7ae877cc3a9ac741fd3119d0e79fe36695 Mon Sep 17 00:00:00 2001
From: Aleksandr Iushmanov <izeren.ml@gmail.com>
Date: Tue, 8 Apr 2025 10:51:36 +0100
Subject: [PATCH] Use modern compiler for css processing in vite (to remove
 SASS 2.0.0 warnings on deprecated JS API usage); (#180)

Resolve some of SASS deprecation warnings;
Add note to readme about icons generation
---
 CONTRIBUTING.md                 |  6 ++++++
 src/lib/style/form/_button.scss |  7 ++-----
 src/lib/style/theme.scss        | 14 +++++++-------
 vite.config.ts                  |  7 +++++++
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3da9f2aa..e7fd3b4a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -35,3 +35,9 @@ way to subset variable woff2 fonts with ligatures.
 
 In other words, either have python as a development dependency or
 serve a 3.5MB icons font of which 99.5% is completely unused.
+
+To generate the icons use the following command:
+
+```shell
+npm run minify-icons
+```
\ No newline at end of file
diff --git a/src/lib/style/form/_button.scss b/src/lib/style/form/_button.scss
index d297ddf2..1cdba0ce 100644
--- a/src/lib/style/form/_button.scss
+++ b/src/lib/style/form/_button.scss
@@ -19,6 +19,8 @@ button {
 
   font-family: inherit;
   font-weight: 600;
+  border-radius: 32px;
+  transition: all 250ms ease;
 
   @media not (forced-colors: active) {
     color: currentcolor;
@@ -36,10 +38,6 @@ button {
     color: ButtonText;
   }
 
-  border-radius: 32px;
-
-  transition: all 250ms ease;
-
   &.icon {
     display: inline-flex;
 
@@ -48,7 +46,6 @@ button {
     padding-inline: 0;
 
     font-size: 24px;
-
     border-radius: 50%;
 
     @media (forced-colors: active) {
diff --git a/src/lib/style/theme.scss b/src/lib/style/theme.scss
index d6f17f55..c25715a1 100644
--- a/src/lib/style/theme.scss
+++ b/src/lib/style/theme.scss
@@ -1,13 +1,13 @@
-@import "./reset";
+@use "reset";
 
-@import "./form/button";
-@import "./form/toggle";
-@import "./form/checkbox";
+@use "form/button";
+@use "form/toggle";
+@use "form/checkbox";
 
-@import "./kbd";
-@import "./print";
+@use "kbd";
+@use "print";
 
-@import "./elements/h1";
+@use "elements/h1";
 
 body {
   overflow: hidden;
diff --git a/vite.config.ts b/vite.config.ts
index 0b2e6a11..50122d27 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -37,6 +37,13 @@ export default defineConfig({
   define: {
     global: "window",
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler",
+      },
+    },
+  },
   envPrefix: ["TAURI_", "VITE_"],
   plugins: [
     ViteYaml(),