feat(firefox): write custom-css in scss

homeManagerModules/firefox/custom-css.nix

@@ -1,93 +0,0 @@
-rounding:
-# css
-''
-  :root * {
-      --tab-height-personal: 40px !important;
-      --uc-tab-corner-height: 41px !important;
-      --uc-vertical-toolbar-width: 46px !important;
-  }
-
-  /* Main Menu outline */
-  #appMenu-mainView .panel-subview-body {
-      outline: 2px solid var(--button-background-color-primary);
-  }
-
-  /* Hide unused menu rows */
-  #appMenu-mainView .browser-toolbar > * #alltabs-button,
-  #appMenu-fxa-status2,
-  #appMenu-fxa-separator {
-      display: none !important;
-  }
-
-  /* Makes main menu rows all the same height */
-  #appMenu-mainView .subviewbutton {
-      min-height: 40px !important;
-  }
-
-  /* Fix url font-size */
-  #urlbar-input {
-      font-size: large !important;
-  }
-
-  /* Extension padding on sidebar */
-  toolbar .toolbarbutton-1>.toolbarbutton-badge-stack {
-      padding: 10px !important;
-  }
-
-  /* Hamnburger button border */
-  :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open] {
-      border: 2px solid var(--button-background-color-primary) !important;
-      border-top-left-radius: ${toString rounding}px !important;
-  }
-  :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open] > .toolbarbutton-badge-stack {
-      border-top-left-radius: ${toString rounding}px !important;
-  }
-
-  /* Fix extension dialog going off screen */
-  #appMenu-addon-installed-notification,
-  #notification-popup {
-      margin-top: -1px !important;
-      margin-inline: -505px !important;
-  }
-  #customizationui-widget-panel {
-      margin-top: -1px !important;
-  }
-  #PersonalToolbar .toolbarbutton-1 {
-      margin-block: 0px !important;
-  }
-  #PersonalToolbar #PlacesToolbarItems > .bookmark-item {
-      margin-block: 6px !important;
-  }
-
-  /* -------------------------------------------------------------- */
-  /* https://github.com/Godiesc/firefox-gx/blob/main/Tricks/README.md */
-  /* Extensions button into the "left-sidebar" - Immovable */
-  :root:not([chromehidden~="toolbar"],
-  [sizemode="fullscreen"]) #PersonalToolbar {
-      --padding-top-left-sidebar: 110px !important; /* 182px to one-line config */
-  }
-  :root:not([chromehidden~="toolbar"],
-  [sizemode="fullscreen"]) #unified-extensions-button {
-      --toolbarbutton-hover-background: transparent !important;
-      --toolbarbutton-active-background: transparent !important;
-      position: fixed;
-      display: flex;
-      top: 42px !important;
-      left: 3px !important;
-      z-index: 2 !important;
-      fill: var(--general-color) !important;
-      width: calc(var(--uc-vertical-toolbar-width) - 4px) !important;
-  }
-  :root:not([chromehidden~="toolbar"],
-  :root:not([chromehidden~="toolbar"],
-  [sizemode="fullscreen"]) #unified-extensions-button:hover,
-  [sizemode="fullscreen"]) #unified-extensions-button[open] {
-      transform: scale(1.24) !important;
-      transition: ease-in-out !important;
-  }
-  :root:not([chromehidden~="toolbar"],
-  [sizemode="fullscreen"]) #unified-extensions-button:active {
-      transform: scale(1.12) !important;
-      transition-duration: 0ms !important;
-  }
-''

homeManagerModules/firefox/custom-css/default.nix

@@ -0,0 +1,26 @@
+{
+  stdenv,
+  dart-sass,
+  firefox-gx,
+  rounding,
+  ...
+}:
+stdenv.mkDerivation {
+  pname = "custom-css";
+  inherit (firefox-gx) version;
+
+  src = ./.;
+
+  nativeBuildInputs = [dart-sass];
+
+  buildPhase = ''
+    substituteInPlace ./style.scss --replace-fail \
+        '$rounding' '${toString rounding}px'
+
+    sass ./style.scss ./style.css
+  '';
+
+  installPhase = ''
+    cp -rf ./style.css $out
+  '';
+}

homeManagerModules/firefox/custom-css/style.scss

@@ -0,0 +1,98 @@
+:root * {
+    --tab-height-personal: 40px !important;
+    --uc-tab-corner-height: 41px !important;
+    --uc-vertical-toolbar-width: 46px !important;
+}
+
+/* Main Menu outline */
+#appMenu-mainView .panel-subview-body {
+    outline: 2px solid var(--button-background-color-primary);
+}
+
+/* Hide unused menu rows */
+#appMenu-mainView .browser-toolbar>* #alltabs-button,
+#appMenu-fxa-status2,
+#appMenu-fxa-separator {
+    display: none !important;
+}
+
+/* Makes main menu rows all the same height */
+#appMenu-mainView .subviewbutton {
+    min-height: 40px !important;
+}
+
+/* Fix url font-size */
+#urlbar-input {
+    font-size: large !important;
+}
+
+/* Extension padding on sidebar */
+toolbar .toolbarbutton-1>.toolbarbutton-badge-stack {
+    padding: 10px !important;
+}
+
+/* Hamnburger button border */
+:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open] {
+    border: 2px solid var(--button-background-color-primary) !important;
+
+    border-top-left-radius: $rounding !important;
+}
+
+:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open]>.toolbarbutton-badge-stack {
+    border-top-left-radius: $rounding !important;
+}
+
+/* Fix extension dialog going off screen */
+#appMenu-addon-installed-notification,
+#notification-popup {
+    margin-top: -1px !important;
+    margin-inline: -505px !important;
+}
+
+#customizationui-widget-panel {
+    margin-top: -1px !important;
+}
+
+#PersonalToolbar .toolbarbutton-1 {
+    margin-block: 0px !important;
+}
+
+#PersonalToolbar #PlacesToolbarItems>.bookmark-item {
+    margin-block: 6px !important;
+}
+
+/* -------------------------------------------------------------- */
+/* https://github.com/Godiesc/firefox-gx/blob/main/Tricks/README.md */
+/* Extensions button into the "left-sidebar" - Immovable */
+:root:not([chromehidden~="toolbar"],
+    [sizemode="fullscreen"]) #PersonalToolbar {
+    --padding-top-left-sidebar: 110px !important;
+    /* 182px to one-line config */
+}
+
+:root:not([chromehidden~="toolbar"],
+    [sizemode="fullscreen"]) #unified-extensions-button {
+    --toolbarbutton-hover-background: transparent !important;
+    --toolbarbutton-active-background: transparent !important;
+    position: fixed;
+    display: flex;
+    top: 42px !important;
+    left: 3px !important;
+    z-index: 2 !important;
+    fill: var(--general-color) !important;
+    width: calc(var(--uc-vertical-toolbar-width) - 4px) !important;
+}
+
+:root:not([chromehidden~="toolbar"],
+    :root:not([chromehidden~="toolbar"],
+        [sizemode="fullscreen"]) #unified-extensions-button:hover,
+    [sizemode="fullscreen"]) #unified-extensions-button[open] {
+    transform: scale(1.24) !important;
+    transition: ease-in-out !important;
+}
+
+:root:not([chromehidden~="toolbar"],
+    [sizemode="fullscreen"]) #unified-extensions-button:active {
+    transform: scale(1.12) !important;
+    transition-duration: 0ms !important;
+}

homeManagerModules/firefox/default.nix

@@ -7,9 +7,8 @@ self: {
 
   rounding = (config.wayland.windowManager.hyprland.settings.decoration.rounding or 2) - 2;
 
-  firefox-gx = pkgs.callPackage ./gx-theme.nix {
+  firefox-gx = pkgs.callPackage ./firefox-gx {inherit self;};
-    inherit self;
+  custom-css = pkgs.callPackage ./custom-css {inherit rounding firefox-gx;};
-  };
 in {
   config = {
     home.file = {
@@ -28,7 +27,7 @@ in {
 
         userChrome = ''
           @import url("file://${firefox-gx}/chrome/userChrome.css");
-          ${import ./custom-css.nix rounding}
+          @import url("file://${custom-css}");
         '';
 
         settings = {