feat(sass): switch to @use and setup lsp server

nixosModules/ags-v2/config/app.ts

@@ -3,7 +3,7 @@ import { App } from 'astal/gtk3';
 
 import GLib from 'gi://GLib';
 
-import style from './style.scss';
+import style from './style/main.scss';
 
 import AppLauncher from './widgets/applauncher/main';
 import Bar from './widgets/bar/wim';

nixosModules/ags-v2/config/style.scss

@@ -1,51 +0,0 @@
-@import 'colors.scss';
-
-window,
-viewport,
-stack {
-    all: unset;
-}
-
-progressbar {
-    border-radius: 999px;
-    background: transparent;
-    border: none;
-
-    trough {
-        background: #363847;
-        min-height: inherit;
-        border-radius: inherit;
-        border: none;
-    }
-
-    progress {
-        background: #79659f;
-        min-height: inherit;
-        border-radius: inherit;
-        border: none;
-    }
-
-    &:disabled {
-        opacity: 0.5;
-    }
-}
-
-.widget {
-    margin: 10px;
-    padding: 5px;
-    border-radius: 7px;
-    background-color: rgba($window_bg_color, 1);
-    box-shadow: 8px 8px rgba($accent_color, 1);
-}
-
-@import 'widgets/applauncher/style.scss';
-@import 'widgets/bar/style.scss';
-@import 'widgets/clipboard/style.scss';
-@import 'widgets/date/style.scss';
-@import 'widgets/icon-browser/style.scss';
-@import 'widgets/lockscreen/style.scss';
-@import 'widgets/misc/style.scss';
-@import 'widgets/notifs/style.scss';
-@import 'widgets/osd/style.scss';
-@import 'widgets/powermenu/style.scss';
-@import 'widgets/screenshot/style.scss';

nixosModules/ags-v2/config/style/colors.scss

@@ -78,6 +78,7 @@ $blue_3: #3584e4;
 $blue_4: #1c71d8;
 $blue_5: #1a5fb4;
 
+// Other colors
 $black: #151720;
 $dimblack: #1a1c25;
 $lightblack: #262831;

nixosModules/ags-v2/config/style/common.scss

@@ -0,0 +1,39 @@
+@use 'colors';
+
+window,
+viewport,
+stack {
+    all: unset;
+}
+
+progressbar {
+    border-radius: 999px;
+    background: transparent;
+    border: none;
+
+    trough {
+        background: #363847;
+        min-height: inherit;
+        border-radius: inherit;
+        border: none;
+    }
+
+    progress {
+        background: #79659f;
+        min-height: inherit;
+        border-radius: inherit;
+        border: none;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+    }
+}
+
+.widget {
+    margin: 10px;
+    padding: 5px;
+    border-radius: 7px;
+    background-color: colors.$window_bg_color;
+    box-shadow: 8px 8px colors.$accent_color;
+}

nixosModules/ags-v2/config/widgets/bar/_index.scss

@@ -1,3 +1,5 @@
+@use '../../style/colors' as colors;
+
 .bar {
     margin-left: 5px;
     margin-right: 15px;
@@ -6,14 +8,14 @@
     .bar-item {
         padding: 5px 10px 5px 10px;
         border-radius: 7px;
-        background-color: darken($window_bg_color, 3%);
+        background-color: darken(colors.$window_bg_color, 3%);
         font-size: 20px;
         min-height: 35px;
 
         transition: background-color 300ms;
 
         &:hover {
-            background-color: lighten($window_bg_color, 3%);
+            background-color: lighten(colors.$window_bg_color, 3%);
         }
 
         &.battery icon {
@@ -36,13 +38,13 @@
             }
 
             .occupied {
-                border: 2px solid $window_bg_color;
-                background: $accent_color;
+                border: 2px solid colors.$window_bg_color;
+                background: colors.$accent_color;
                 transition: background-color 0.3s ease-in-out;
             }
 
             .urgent {
-                border: 2px solid $window_bg_color;
+                border: 2px solid colors.$window_bg_color;
                 background: red;
                 transition: background-color 0.3s ease-in-out;
             }
@@ -62,7 +64,7 @@
                 transition: background-color 300ms;
 
                 &:hover {
-                    background: $window_bg_color;
+                    background: colors.$window_bg_color;
                 }
             }
         }

nixosModules/ags-v2/config/widgets/date/_index.scss

@@ -1,3 +1,5 @@
+@use '../../style/colors' as colors;
+
 .date {
     margin-top: 0;
 }
@@ -14,7 +16,7 @@
         .divider {
             margin: 8px 15px;
             padding: 0 1px;
-            background: linear-gradient($red, $magenta, $blue, $cyan);
+            background: linear-gradient(colors.$red, colors.$magenta, colors.$blue, colors.$cyan);
         }
     }
 
@@ -44,23 +46,23 @@
 }
 
 calendar:selected {
-    color: $cyan;
+    color: colors.$cyan;
 }
 
 calendar.header {
-    color: $cyan;
+    color: colors.$cyan;
     font-weight: bold;
 }
 
 calendar.button {
-    color: $cyan;
+    color: colors.$cyan;
 }
 
 calendar.highlight {
-    color: $green;
+    color: colors.$green;
     font-weight: bold;
 }
 
 calendar:indeterminate {
-    color: $lightblack;
+    color: colors.$lightblack;
 }

nixosModules/ags-v2/config/widgets/misc/_index.scss

@@ -1,3 +1,5 @@
+@use '../../style/colors' as colors;
+
 .sorted-list {
     .search {
         icon {
@@ -6,7 +8,7 @@
             min-height: 40px
         }
 
-        entry {}
+        // entry {}
     }
 
     .list {
@@ -15,7 +17,7 @@
 
             &:hover, &:selected {
                 icon {
-                    -gtk-icon-shadow: 2px 2px $accent_color;
+                    -gtk-icon-shadow: 2px 2px colors.$accent_color;
                 }
             }
         }

nixosModules/ags-v2/config/widgets/notifs/_index.scss

@@ -1,3 +1,5 @@
+@use '../../style/colors' as colors;
+
 .notification.widget {
     // urgencies
     // &.urgency ...
@@ -27,7 +29,7 @@
     .actions {
         margin: 3px;
 
-        .action-button {}
+        // .action-button {}
     }
 
     .smooth-progress {
@@ -35,12 +37,12 @@
         margin: 3px;
 
         .background {
-            background-color: darken($window_bg_color, 3%);
+            background-color: darken(colors.$window_bg_color, 3%);
             border-radius: 3px;
         }
 
         .progress {
-            background-color: $accent-color;
+            background-color: colors.$accent-color;
             border-radius: 3px;
         }
     }

nixosModules/ags-v2/config/widgets/powermenu/_index.scss

@@ -1,3 +1,5 @@
+@use '../../style/colors' as colors;
+
 .powermenu {
     font-size: 70px;
     padding: 10px;
@@ -13,17 +15,17 @@
 
         &:hover,
         &:active {
-            background-color: lighten($window_bg_color, 3%);
+            background-color: lighten(colors.$window_bg_color, 3%);
         }
     }
 
     .shutdown {
-        color: $red_1;
+        color: colors.$red_1;
     }
     .reboot {
-        color: $purple_1;
+        color: colors.$purple_1;
     }
     .logout {
-        color: $yellow_1;
+        color: colors.$yellow_1;
     }
 }

nixosModules/ags-v2/config/widgets/screenshot/_index.scss

@@ -1,3 +1,5 @@
+@use '../../style/colors' as colors;
+
 .screenshot {
     font-size: 30px;
 
@@ -7,7 +9,7 @@
             transition: background 400ms;
 
             &.active {
-                background: $window_bg_color;
+                background: colors.$window_bg_color;
             }
         }
     }

nixosModules/ags-v2/default.nix

@@ -1,7 +1,6 @@
 self: {
   config,
   lib,
-  pkgs,
   ...
 }: {
   config = let

nixosModules/ags-v2/packages.nix

@@ -22,6 +22,7 @@
     # Cfg info
     inherit (osConfig.networking) hostName;
     cfgDesktop = osConfig.roles.desktop;
+    fullConfPath = "/home/${cfgDesktop.user}/${agsConfigDir}";
 
     # Astal libraries
     gtkSessionLock = gtk-session-lock.packages.${pkgs.system}.default;
@@ -35,7 +36,7 @@
       name = "lock";
       text = ''
         export CONF="lock"
-        exec ${agsFull}/bin/ags --config ${agsConfigDir} "$@"
+        exec ${agsFull}/bin/ags --config ${fullConfPath} "$@"
       '';
     };
 
@@ -46,14 +47,14 @@
             name = "ags";
             text = ''
               export CONF="${hostName}"
-              exec ${agsFull}/bin/ags --config ${agsConfigDir} "$@"
+              exec ${agsFull}/bin/ags --config ${fullConfPath} "$@"
             '';
           })
           (pkgs.writeShellApplication {
             name = "agsConf";
             text = ''
               export CONF="$1"
-              exec ${agsFull}/bin/ags --config ${agsConfigDir}
+              exec ${agsFull}/bin/ags --config ${fullConfPath}
             '';
           })
         ]