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

apps/update/src/app.ts

@@ -5,7 +5,7 @@ import { parseArgs } from './lib.ts';
 import { updateFirefoxAddons } from '././firefox.ts';
 
 import {
-    updateCustomSidebarDeps,
+    updateCustomPackage,
     updateDocker,
     updateFlakeInputs,
     updateVuetorrent,
@@ -39,7 +39,11 @@ if (args['v'] || args['vuetorrent']) {
 }
 
 if (args['c'] || args['custom-sidebar']) {
-    console.log(updateCustomSidebarDeps());
+    console.log(updateCustomPackage('lovelace-components.custom-sidebar'));
+}
+
+if (args['s'] || args['some-sass-language-server']) {
+    console.log(updateCustomPackage('some-sass-language-server'));
 }
 
 if (args['a'] || args['all']) {
@@ -64,7 +68,8 @@ if (args['a'] || args['all']) {
     console.log(vuetorrentOutput);
 
     // This doesn't need to be added to commit msgs
-    console.log(updateCustomSidebarDeps());
+    console.log(updateCustomPackage('lovelace-components.custom-sidebar'));
+    console.log(updateCustomPackage('some-sass-language-server'));
 
 
     spawnSync('nix-fast-build', ['-f', `${FLAKE}#nixFastChecks`], {

apps/update/src/misc.ts

@@ -96,8 +96,8 @@ export const updateVuetorrent = () => {
     return OLD_VERSION !== VERSION ? `Vuetorrent: ${OLD_VERSION} -> ${VERSION}` : '';
 };
 
-export const updateCustomSidebarDeps = () => spawnSync(
+export const updateCustomPackage = (pkg: string) => spawnSync(
-    `nix run ${FLAKE}#lovelace-components.custom-sidebar.update`,
+    `nix run ${FLAKE}#${pkg}.update`,
     [],
     { shell: true },
 ).stderr.toString();

common/home/neovim/langs/web.nix

@@ -28,6 +28,11 @@ in
             npm
             neovim
             ;
+
+          inherit
+            (self.packages.${pkgs.system})
+            some-sass-language-server
+            ;
         };
 
         extraLuaConfig =
@@ -130,6 +135,19 @@ in
                 },
             });
 
+            lsp.somesass_ls.setup({
+                capabilities = default_capabilities,
+            });
+            lsp.somesass_ls.manager.config.settings = {
+                somesass = {
+                    scss = {
+                        completion = {
+                            suggestFromUseOnly = true,
+                        },
+                    },
+                },
+            };
+
             local html_caps = default_capabilities;
             html_caps.textDocument.completion.completionItem.snippetSupport = true;
 

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;
+                border: 2px solid colors.$window_bg_color;
-                background: $accent_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}
             '';
           })
         ]

packages/default.nix

@@ -38,6 +38,8 @@
 
   repl = pkgs.callPackage ./repl {};
 
+  some-sass-language-server = pkgs.callPackage ./some-sass-language-server {};
+
   trash-d = pkgs.callPackage ./trash-d {
     inherit (inputs) trash-d-src;
   };

packages/some-sass-language-server/default.nix

@@ -0,0 +1,38 @@
+{
+  writeShellApplication,
+  nodejs_latest,
+  prefetch-npm-deps,
+  jq,
+  buildNpmPackage,
+  makeWrapper,
+  ...
+}: let
+  package = builtins.fromJSON (builtins.readFile ./package.json);
+in
+  buildNpmPackage {
+    pname = "some-sass-language-server";
+    version = package.dependencies.some-sass-language-server;
+
+    src = ./.;
+    dontNpmBuild = true;
+
+    nativeBuildInputs = [makeWrapper];
+
+    installPhase = ''
+      mkdir -p $out/bin
+      cp -r node_modules $out
+      makeWrapper $out/node_modules/.bin/some-sass-language-server $out/bin/some-sass-language-server
+    '';
+
+    npmDepsHash = "sha256-4VYm0UDbdOh2jo8/YkVG4mt0nvkHWTllJWxaZvRuxCc=";
+
+    passthru.update = writeShellApplication {
+      name = "update";
+      runtimeInputs = [
+        nodejs_latest
+        prefetch-npm-deps
+        jq
+      ];
+      text = import ./update.nix;
+    };
+  }

packages/some-sass-language-server/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "some-sass-language-server": "2.0.2"
+  }
+}

packages/some-sass-language-server/update.nix

@@ -0,0 +1,16 @@
+#bash
+''
+  cd "$FLAKE/packages/some-sass-language-server" || return
+
+  latest=$(npm outdated --json | jq -r '.["some-sass-language-server"]["latest"]' || true)
+
+  echo "$latest"
+
+  sed -i "s#\"some-sass-language-server\": \"[^\"]*\"#\"some-sass-language-server\": \"$latest\"#" ./package.json
+
+  npm update
+
+  npm_hash="$(prefetch-npm-deps ./package-lock.json)"
+
+  sed -i "s#npmDepsHash = .*#npmDepsHash = \"$npm_hash\";#" ./default.nix
+''