feat: use derivation to transpile scss to css

home/sway/waybar/default.nix

@@ -1,7 +1,14 @@
 { pkgs, ... }:
+let
+  toCSS = import ./tocss.nix;
+in
 {
   programs.waybar = {
     enable = true;
+    style = toCSS {
+      inherit pkgs;
+      file = ./style.scss;
+    };
     settings = {
       main = import ./config.nix;
     };

home/sway/waybar/style.nix

@@ -1,172 +0,0 @@
-''
-  * {
-    font-family: "DejaVuSansMNerdFont-Regular";
-    border: none;
-    opacity: 50;
-    border-radius: 10px;
-    font-size: 13px; }
-
-  window#waybar {
-    background: transparent; }
-
-  window#waybar.hidden {
-    opacity: 0.2; }
-
-  #window {
-    padding-left: 10px;
-    padding-right: 10px;
-    border-radius: 10px;
-    transition: none;
-    color: transparent;
-    background: transparent; }
-
-  .modules-center {
-    margin: 3px 0 0 0; }
-
-  .modules-right {
-    margin: 3px 8px 0 0; }
-
-  .modules-left {
-    margin: 3px 0 0 8px; }
-
-  #workspaces {
-    background-color: rgba(13, 214, 250, 0.4); }
-    #workspaces button {
-      padding: 1px 5px; }
-    #workspaces button:hover {
-      background-color: rgba(159, 255, 255, 0.9); }
-    #workspaces button.focused {
-      background-color: rgba(50, 194, 219, 0.7); }
-
-  #network {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #bd93f9; }
-
-  #pulseaudio {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    min-width: 23px;
-    color: #1a1826;
-    background: #fae3b0; }
-
-  #backlight {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #f8bd96; }
-
-  #clock {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #abe9b3; }
-
-  #memory {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #ddb6f2; }
-
-  #privacy {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #ddb6f2; }
-
-  #cpu {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #96cdfb; }
-
-  #tray {
-    padding-left: 10px;
-    margin-right: 4px;
-    padding-right: 10px;
-    border-radius: 10px;
-    color: #b5e8e0;
-    background: #161320; }
-
-  #idle_inhibitor {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-size: 20px;
-    color: #161320;
-    background: #f28fad; }
-
-  #group-power {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-size: 20px;
-    transition: none;
-    color: #161320;
-    background: #f28fad; }
-
-  #custom-notification {
-    margin-left: 4px;
-    padding-left: 10px;
-    padding-right: 10px;
-    border-radius: 10px;
-    color: #161320;
-    background: #f2cdcd;
-    font-family: "NotoSansMono Nerd Font"; }
-
-  #mode {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #ddb6f2; }
-
-  @keyframes blink {
-    to {
-      background-color: #bf616a;
-      color: #b5e8e0; } }
-
-  #battery {
-    margin-left: 4px;
-    margin-right: 4px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    color: #161320;
-    background: #b5e8e0; }
-    #battery .critical:not(.charging) {
-      animation-name: blink;
-      animation-duration: 0.5s;
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
-      animation-direction: alternate; }
-
-''

home/sway/waybar/style.scss

@@ -0,0 +1,173 @@
+  @mixin border {
+    margin-left: 4px;
+    margin-right: 4px;
+    border-radius: 10px;
+
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  @mixin border-left {
+    padding-left: 10px;
+    margin-right: 4px;
+    padding-right: 10px;
+    border-radius: 10px;
+  }
+
+  @mixin border-right {
+    margin-left: 4px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+  }
+
+  * {
+    font-family: "DejaVuSansMNerdFont-Regular";
+    border: none;
+    opacity: 50;
+    border-radius: 10px;
+    font-size: 13px;
+  }
+
+  window#waybar {
+    background: transparent;
+  }
+
+  window#waybar.hidden {
+    opacity: 0.2;
+  }
+
+  #window {
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    transition: none;
+    color: transparent;
+    background: transparent;
+  }
+
+  .modules-center {
+    margin: 3px 0 0 0;
+  }
+
+  .modules-right {
+    margin: 3px 8px 0 0;
+  }
+
+  .modules-left {
+    margin: 3px 0 0 8px;
+  }
+
+  #workspaces {
+     background-color: rgba(13, 214, 250, 0.4);
+
+    button {
+      padding: 1px 5px;
+    }
+
+    button:hover {
+      background-color: rgba(159, 255, 255, 0.9);
+    }
+
+    button.focused {
+      background-color: rgba(50, 194, 219, 0.7);
+    }
+  }
+
+  #network {
+    @include border();
+    color: #161320;
+    background: #bd93f9;
+  }
+
+  #pulseaudio {
+    @include border();
+    min-width: 23px;
+    color: #1a1826;
+    background: #fae3b0;
+  }
+
+  #backlight {
+    @include border();
+    color: #161320;
+    background: #f8bd96;
+  }
+
+  #clock {
+    @include border();
+    color: #161320;
+    background: #abe9b3;
+  }
+
+  #memory {
+    @include border();
+    color: #161320;
+    background: #ddb6f2;
+  }
+
+  #privacy {
+    @include border();
+    color: #161320;
+    background: #ddb6f2;
+  }
+
+  #cpu {
+    @include border();
+    color: #161320;
+    background: #96cdfb;
+  }
+
+  #tray {
+    @include border-left();
+    color: #b5e8e0;
+    background: #161320;
+  }
+
+  #idle_inhibitor {
+    @include border();
+    font-size: 20px;
+    color: #161320;
+    background: #f28fad;
+  }
+
+  #group-power {
+    @include border();
+    font-size: 20px;
+    transition: none;
+    color: #161320;
+    background: #f28fad;
+  }
+
+  #custom-notification {
+    @include border-right();
+    color: #161320;
+    background: #f2cdcd;
+    font-family: "NotoSansMono Nerd Font";
+  }
+
+  #mode {
+    @include border();
+    color: #161320;
+    background: #ddb6f2;
+  }
+
+  @keyframes blink {
+    to {
+      background-color: #bf616a;
+      color: #b5e8e0;
+    }
+  }
+
+  #battery {
+    @include border();
+    color: #161320;
+    background: #b5e8e0;
+
+    .critical:not(.charging) {
+      animation-name: blink;
+      animation-duration: 0.5s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
+    }
+  }

home/sway/waybar/tocss.nix

@@ -0,0 +1,7 @@
+{ pkgs, file, ... }:
+pkgs.stdenv.mkDerivation {
+  name = "toCSS";
+  buildCommand = ''
+    ${pkgs.sass}/bin/scss ${file} $out
+  '';
+}

hosts/xps9510/configuration.nix

@@ -218,7 +218,6 @@ in
     bat
     kdeconnect
     dotter
-    sassc
     glib
     pamixer
     wireguard-tools
@@ -231,8 +230,8 @@ in
   fonts = with pkgs; {
     packages = [
       (nerdfonts.override { fonts = [ "Noto" ]; })
-      jigmo
       d2coding
+      jigmo
       last-resort
     ];
   };