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

@@ -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
+```

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) {

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;

vite.config.ts

@@ -37,6 +37,13 @@ export default defineConfig({
   define: {
     global: "window",
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler",
+      },
+    },
+  },
   envPrefix: ["TAURI_", "VITE_"],
   plugins: [
     ViteYaml(),