diff --git a/.treefmt.toml b/.treefmt.toml
index 2b219780..6aceea5e 100644
--- a/.treefmt.toml
+++ b/.treefmt.toml
@@ -19,3 +19,8 @@ includes = [ "*.nix" ]
 command  = "shfmt"
 options  = [ "-s", "-w" ]
 includes = [ "*.sh" ]
+
+[formatter.prettier]
+command  = "prettier"
+options  = [ "-w" ]
+includes = [ "*.css" ]
diff --git a/flake.nix b/flake.nix
index a2dea592..7ddb8ea7 100644
--- a/flake.nix
+++ b/flake.nix
@@ -156,6 +156,8 @@
             nativeBuildInputs = with pkgs; [
               nixd
               nixfmt-rfc-style
+              nodePackages.prettier
+              nodePackages.prettier-plugin-toml
               shfmt
               treefmt
             ];
diff --git a/home/file/waybar/default.nix b/home/file/waybar/default.nix
index d314fbe7..50252c06 100644
--- a/home/file/waybar/default.nix
+++ b/home/file/waybar/default.nix
@@ -1,5 +1,43 @@
-{ util, pkgs, ... }@args:
+# ISSUE: https://github.com/Alexays/Waybar/issues/3303
+# This way I am forced to apply the padding to children of each group
+# instead of the whole group.
 {
+  util,
+  pkgs,
+  config,
+  ...
+}@args:
+let
+  accent = "#${config.module.style.color.accent}";
+  fontSerif = config.module.style.font.serif.name;
+  fontPropo = "Terminess Nerd Font Propo";
+  fontSize = "${toString config.module.style.font.size.desktop}px";
+  foreground = "#${config.module.style.color.fg.light}";
+  paddingH = "12px";
+  paddingV = "0";
+  backgroundColor = "rgba(${config.module.style.color.bgR},${config.module.style.color.bgG},${config.module.style.color.bgB},${toString config.module.style.opacity.desktop})";
+  borderColor = "rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop})";
+  border = "${toString config.module.style.window.border}px solid ${borderColor}";
+  borderSize = "${toString config.module.style.window.border}px";
+
+  styleRaw = pkgs.writeText "waybar-style-raw" (util.readFiles (util.ls ./style));
+  style = pkgs.replaceVars styleRaw {
+    inherit
+      accent
+      fontSerif
+      fontPropo
+      fontSize
+      foreground
+      paddingH
+      paddingV
+      backgroundColor
+      borderColor
+      border
+      borderSize
+      ;
+  };
+in
+{
+  inherit style;
   config = (import ./config args).file;
-  style = pkgs.writeText "WaybarStyle" (util.catText (util.ls ./style) args);
 }
diff --git a/home/file/waybar/style/Common.css b/home/file/waybar/style/Common.css
new file mode 100644
index 00000000..f4ed8e86
--- /dev/null
+++ b/home/file/waybar/style/Common.css
@@ -0,0 +1,7 @@
+* {
+	font-family: "@fontSerif@", "@fontPropo@";
+	/* prettier-ignore */
+	font-size: @fontSize@;
+	/* prettier-ignore */
+	color: @foreground@;
+}
diff --git a/home/file/waybar/style/Common.nix b/home/file/waybar/style/Common.nix
deleted file mode 100644
index d9d09cd6..00000000
--- a/home/file/waybar/style/Common.nix
+++ /dev/null
@@ -1,10 +0,0 @@
-{ config, ... }:
-{
-  text = ''
-    * {
-      font-family: "${config.module.style.font.serif.name}", "Terminess Nerd Font Propo";
-      font-size: ${toString config.module.style.font.size.desktop}px;
-      color: #${config.module.style.color.fg.light};
-    }
-  '';
-}
diff --git a/home/file/waybar/style/Plugin.css b/home/file/waybar/style/Plugin.css
new file mode 100644
index 00000000..d0a3bef6
--- /dev/null
+++ b/home/file/waybar/style/Plugin.css
@@ -0,0 +1,94 @@
+/* See the ISSUE. */
+#custom-taghw1,
+#custom-tagbt1 {
+	/* prettier-ignore */
+	padding-left: @paddingH@;
+}
+
+#custom-taghw2,
+#custom-tagbt2 {
+	/* prettier-ignore */
+	padding-right: @paddingH@;
+}
+
+/* Padding for global widgets. */
+#clock,
+#custom-display,
+#custom-network,
+#mpris,
+#pulseaudio,
+#scratchpad {
+	/* prettier-ignore */
+	padding: @paddingV@ @paddingH@;
+}
+
+/* Padding for combined widgets. */
+#cpu.load,
+#custom-powerlimit,
+#custom-powersave,
+#memory,
+#temperature {
+	padding-left: 4px;
+}
+
+/* Hover style. */
+#batteryinfo:hover,
+#clock:hover,
+#custom-display:hover,
+#custom-network:hover,
+#hardware:hover,
+#mpris:hover,
+#pulseaudio:hover,
+#scratchpad:hover,
+#workspaces button:hover {
+	/* prettier-ignore */
+	background-color: @borderColor@;
+}
+
+/* Critical state. */
+#battery,
+#cpu.usage,
+#custom-display,
+#custom-network,
+#memory,
+#pulseaudio,
+#temperature {
+	/* prettier-ignore */
+	border-top: @borderSize@ solid transparent;
+	/* prettier-ignore */
+	border-bottom: @borderSize@ solid transparent;
+}
+
+#battery.critical,
+#cpu.usage.critical,
+#custom-display.modified,
+#custom-network.issue,
+#custom-network.vpn,
+#custom-network.btlow,
+#memory.critical,
+#pulseaudio.muted,
+#pulseaudio.source-muted,
+#temperature.critical {
+	/* prettier-ignore */
+	border-top: @borderSize@ solid @accent@;
+}
+
+/* Widget-specific styling. */
+#workspaces button {
+	/* prettier-ignore */
+	padding: @paddingV@ 4px;
+	/* prettier-ignore */
+	border-top: @borderSize@ solid transparent;
+	/* prettier-ignore */
+	border-bottom: @borderSize@ solid transparent;
+	border-radius: 0;
+}
+
+#workspaces button.focused {
+	/* prettier-ignore */
+	border-top: @borderSize@ solid @accent@;
+}
+
+#clock {
+	font-weight: bold;
+}
diff --git a/home/file/waybar/style/Plugin.nix b/home/file/waybar/style/Plugin.nix
deleted file mode 100644
index 21470066..00000000
--- a/home/file/waybar/style/Plugin.nix
+++ /dev/null
@@ -1,95 +0,0 @@
-{ config, ... }:
-let
-  paddingH = "12px";
-  paddingV = "0";
-in
-{
-  # ISSUE: https://github.com/Alexays/Waybar/issues/3303
-  # This way I am forced to apply the padding to children of each group
-  # instead of the whole group.
-  text = ''
-    /* See the ISSUE above. */
-    #custom-taghw1,
-    #custom-tagbt1 {
-      padding-left: ${paddingH};
-    }
-
-    #custom-taghw2,
-    #custom-tagbt2 {
-      padding-right: ${paddingH};
-    }
-
-    /* Padding for global widgets. */
-    #clock,
-    #custom-display,
-    #custom-network,
-    #mpris,
-    #pulseaudio,
-    #scratchpad {
-      padding: ${paddingV} ${paddingH};
-    }
-
-    /* Padding for combined widgets. */
-    #cpu.load,
-    #custom-powerlimit,
-    #custom-powersave,
-    #memory,
-    #temperature {
-      padding-left: 4px;
-    }
-
-    /* Hover style. */
-    #batteryinfo:hover,
-    #clock:hover,
-    #custom-display:hover,
-    #custom-network:hover,
-    #hardware:hover,
-    #mpris:hover,
-    #pulseaudio:hover,
-    #scratchpad:hover,
-    #workspaces button:hover {
-      background-color: rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop});
-    }
-
-    /* Critical state. */
-    #battery,
-    #cpu.usage,
-    #custom-display,
-    #custom-network,
-    #memory,
-    #pulseaudio,
-    #temperature {
-      border-top: ${toString config.module.style.window.border}px solid transparent;
-      border-bottom: ${toString config.module.style.window.border}px solid transparent;
-    }
-
-    #battery.critical,
-    #cpu.usage.critical,
-    #custom-display.modified,
-    #custom-network.issue,
-    #custom-network.vpn,
-    #custom-network.btlow,
-    #memory.critical,
-    #pulseaudio.muted,
-    #pulseaudio.source-muted,
-    #temperature.critical {
-      border-top: ${toString config.module.style.window.border}px solid #${config.module.style.color.accent};
-    }
-
-    /* Widget-specific styling. */
-    #workspaces button {
-      padding: ${paddingV} 4px;
-      border-top: ${toString config.module.style.window.border}px solid transparent;
-      border-bottom: ${toString config.module.style.window.border}px solid transparent;
-      border-radius: 0;
-    }
-
-    #workspaces button.focused {
-      border-top: ${toString config.module.style.window.border}px solid #${config.module.style.color.accent};
-    }
-
-    #clock {
-      font-weight: bold;
-    }
-  '';
-}
diff --git a/home/file/waybar/style/Window.css b/home/file/waybar/style/Window.css
new file mode 100644
index 00000000..c5c3a41c
--- /dev/null
+++ b/home/file/waybar/style/Window.css
@@ -0,0 +1,16 @@
+window#waybar {
+	/* prettier-ignore */
+	background-color: @backgroundColor@;
+	/* prettier-ignore */
+	border: @border@;
+}
+
+.modules-left > widget:first-child > #workspaces {
+	/* prettier-ignore */
+	margin-left: @borderSize@;
+}
+
+.modules-right > widget:last-child > #workspaces {
+	/* prettier-ignore */
+	margin-right: @borderSize@;
+}
diff --git a/home/file/waybar/style/Window.nix b/home/file/waybar/style/Window.nix
deleted file mode 100644
index fef9880b..00000000
--- a/home/file/waybar/style/Window.nix
+++ /dev/null
@@ -1,17 +0,0 @@
-{ config, ... }:
-{
-  text = ''
-    window#waybar {
-      background-color: rgba(${config.module.style.color.bgR},${config.module.style.color.bgG},${config.module.style.color.bgB},${toString config.module.style.opacity.desktop});
-      border: ${toString config.module.style.window.border}px solid rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop});
-    }
-
-    .modules-left > widget:first-child > #workspaces {
-      margin-left: ${toString config.module.style.window.border}px;
-    }
-
-    .modules-right > widget:last-child > #workspaces {
-      margin-right: ${toString config.module.style.window.border}px;
-    }
-  '';
-}