UI - CSS - Modernising stylesheet build

changedetectionio/static/styles/package.json

@@ -3,15 +3,16 @@
   "version": "0.0.3",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    "watch": "node-sass -w scss -o .",
-    "build": "node-sass scss -o ."
+  "engines": {
+    "node": ">=18.0.0"
   },
-  "author": "",
-  "license": "ISC",
+  "scripts": {
+    "watch": "sass --watch scss:. --style=compressed --no-source-map",
+    "build": "sass scss:. --style=compressed --no-source-map"
+  },
+  "author": "Leigh Morresi / Web Technologies s.r.o.",
+  "license": "Apache",
   "dependencies": {
-    "node-sass": "^7.0.0",
-    "tar": "^6.1.9",
-    "trim-newlines": "^3.0.1"
+    "sass": "^1.77.8"
   }
 }

changedetectionio/static/styles/scss/diff.scss

@@ -1,4 +1,4 @@
-@import "parts/_variables.scss";
+@use "parts/variables";
 
 #diff-ui {
 

changedetectionio/static/styles/scss/parts/_extra_proxies.scss

@@ -64,17 +64,17 @@ body.proxy-check-active {
 #recommended-proxy {
   display: grid;
   gap: 2rem;
-    @media  (min-width: 991px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
+  padding-bottom: 1em;
+  
+  @media  (min-width: 991px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
   > div {
     border: 1px #aaa solid;
     border-radius: 4px;
     padding: 1em;
   }
-
-  padding-bottom: 1em;
 }
 
 #extra-proxies-setting {

changedetectionio/static/styles/scss/parts/_preview_text_filter.scss

@@ -1,4 +1,4 @@
-@import "minitabs";
+@use "minitabs";
 
 body.preview-text-enabled {
 

changedetectionio/static/styles/scss/styles.scss

@@ -2,23 +2,24 @@
  * -- BASE STYLES --
  */
 
-@import "parts/_arrows";
-@import "parts/_browser-steps";
-@import "parts/_extra_proxies";
-@import "parts/_extra_browsers";
-@import "parts/_pagination";
-@import "parts/_spinners";
-@import "parts/_variables";
-@import "parts/_darkmode";
-@import "parts/_menu";
-@import "parts/_love";
-@import "parts/preview_text_filter";
-@import "parts/_watch_table";
-@import "parts/_watch_table-mobile";
-@import "parts/_edit";
-@import "parts/_conditions_table";
-@import "parts/_lister_extra";
-@import "parts/_socket";
+@use "parts/variables";
+@use "parts/arrows";
+@use "parts/browser-steps";
+@use "parts/extra_proxies";
+@use "parts/extra_browsers";
+@use "parts/pagination";
+@use "parts/spinners";
+@use "parts/darkmode";
+@use "parts/menu";
+@use "parts/love";
+@use "parts/preview_text_filter";
+@use "parts/watch_table";
+@use "parts/watch_table-mobile";
+@use "parts/edit";
+@use "parts/conditions_table";
+@use "parts/lister_extra";
+@use "parts/socket";
+@use "parts/visualselector";
 
 
 body {
@@ -951,8 +952,6 @@ ul {
   }
 }
 
-@import "parts/_visualselector";
-
 #webdriver_delay {
     width: 5em;
 }