feat: check formatting for js, ts, css and scss files

.pre-commit-config.yaml

@@ -12,9 +12,17 @@ repos:
   - repo: local
     hooks:
       - id: nixpkgs-fmt
-        name: Check formatting
+        name: Check nix formatting
         entry: nixfmt
         language: system
         files: .*\.nix$
         args: [-c]
         stages: [commit]
+
+      - id: prettier
+        name: Check css, scss, js and ts formatting
+        entry: prettier
+        language: system
+        files: .*\.(css|scss|js|ts)$
+        args: [-c]
+        stages: [commit]

flake.nix

@@ -44,6 +44,7 @@
         buildInputs = with pkgs; [
           pre-commit
           nixfmt-rfc-style
+          nodePackages.prettier
         ];
         shellHook = ''
           ${pkgs.pre-commit}/bin/pre-commit install -f

home/sway/swaync/themes/catppuccin.css

@@ -21,7 +21,9 @@ slider {
 }
 
 .floating-notifications.background .notification-row .notification-background {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #414559;
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px #414559;
   border-radius: 12.6px;
   margin: 18px;
   background-color: #303446;
@@ -29,36 +31,72 @@ slider {
   padding: 0;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification {
   padding: 7px;
   border-radius: 12.6px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification.critical {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification.critical {
   box-shadow: inset 0 0 7px 0 #e78284;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content {
   margin: 7px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .summary {
   color: #c6d0f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .time {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
   color: #a5adce;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .body {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
   color: #c6d0f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
   min-height: 3.4em;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
   border-radius: 7px;
   color: #c6d0f5;
   background-color: #414559;
@@ -66,19 +104,34 @@ slider {
   margin: 7px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
   box-shadow: inset 0 0 0 1px #51576d;
   background-color: #414559;
   color: #c6d0f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
   box-shadow: inset 0 0 0 1px #51576d;
   background-color: #85c1dc;
   color: #c6d0f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button {
   margin: 7px;
   padding: 2px;
   border-radius: 6.3px;
@@ -86,18 +139,26 @@ slider {
   background-color: #e78284;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:hover {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:hover {
   background-color: #ea999c;
   color: #303446;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:active {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:active {
   background-color: #e78284;
   color: #303446;
 }
 
 .control-center {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #414559;
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px #414559;
   border-radius: 12.6px;
   margin: 18px;
   background-color: #303446;
@@ -143,31 +204,64 @@ slider {
   border-radius: 7px;
 }
 
-.control-center .notification-row .notification-background .notification.critical {
+.control-center
+  .notification-row
+  .notification-background
+  .notification.critical {
   box-shadow: inset 0 0 7px 0 #e78284;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content {
   margin: 7px;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content .summary {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .summary {
   color: #c6d0f5;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content .time {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
   color: #a5adce;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content .body {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
   color: #c6d0f5;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
   min-height: 3.4em;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
   border-radius: 7px;
   color: #c6d0f5;
   background-color: #232634;
@@ -175,13 +269,25 @@ slider {
   margin: 7px;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
   box-shadow: inset 0 0 0 1px #51576d;
   background-color: #414559;
   color: #c6d0f5;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
   box-shadow: inset 0 0 0 1px #51576d;
   background-color: #85c1dc;
   color: #c6d0f5;
@@ -204,7 +310,10 @@ slider {
   color: #303446;
 }
 
-.control-center .notification-row .notification-background .close-button:active {
+.control-center
+  .notification-row
+  .notification-background
+  .close-button:active {
   background-color: #e78284;
   color: #303446;
 }

home/sway/swaync/themes/gruvbox.css

@@ -68,19 +68,19 @@
   font-weight: bold;
 }
 
-.widget-dnd>switch {
+.widget-dnd > switch {
   border-radius: 5px;
   background: #665c54;
   border: 3px solid black;
 }
 
-.widget-dnd>switch:checked {
+.widget-dnd > switch:checked {
   background: @neutral_red;
 }
 
-.widget-dnd>switch slider {
+.widget-dnd > switch slider {
   background: black;
-  border-radius: 3px
+  border-radius: 3px;
 }
 
 .widget-mpris-player {
@@ -91,7 +91,7 @@
   box-shadow: none;
 }
 
-.widget-mpris>.horizontal>.image-button {
+.widget-mpris > .horizontal > .image-button {
   margin-top: 60px;
   margin-bottom: 60px;
   border-radius: 15px;
@@ -103,7 +103,7 @@
   box-shadow: 0px 5px black;
 }
 
-.widget-mpris>.horizontal>.image-button:nth-child(3) {
+.widget-mpris > .horizontal > .image-button:nth-child(3) {
   border-radius: 15px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -118,7 +118,7 @@
 }
 
 /* move buttons grid 20px up if there's the mpris player above it */
-.widget-mpris+.widget-buttons-grid {
+.widget-mpris + .widget-buttons-grid {
   margin-top: -20px;
 }
 
@@ -188,7 +188,6 @@
   background-color: @bright_yellow;
 }
 
-
 .control-center .notification-action:hover {
   background-color: @neutral_orange;
 }

home/sway/waybar/style.scss

@@ -1,64 +1,64 @@
-  @mixin border {
+@mixin border {
   margin-left: 4px;
   margin-right: 4px;
   border-radius: 10px;
 
   padding-left: 10px;
   padding-right: 10px;
-  }
+}
 
-  @mixin border-left {
+@mixin border-left {
   padding-left: 10px;
   margin-right: 4px;
   padding-right: 10px;
   border-radius: 10px;
-  }
+}
 
-  @mixin border-right {
+@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 {
+window#waybar {
   background: transparent;
-  }
+}
 
-  window#waybar.hidden {
+window#waybar.hidden {
   opacity: 0.2;
-  }
+}
 
-  #window {
+#window {
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
   transition: none;
   color: transparent;
   background: transparent;
-  }
+}
 
-  .modules-center {
+.modules-center {
   margin: 3px 0 0 0;
-  }
+}
 
-  .modules-right {
+.modules-right {
   margin: 3px 8px 0 0;
-  }
+}
 
-  .modules-left {
+.modules-left {
   margin: 3px 0 0 8px;
-  }
+}
 
-  #workspaces {
+#workspaces {
   background-color: rgba(13, 214, 250, 0.4);
 
   button {
@@ -72,93 +72,93 @@
   button.focused {
     background-color: rgba(50, 194, 219, 0.7);
   }
-  }
+}
 
-  #network {
+#network {
   @include border();
   color: #161320;
   background: #bd93f9;
-  }
+}
 
-  #pulseaudio {
+#pulseaudio {
   @include border();
   min-width: 23px;
   color: #1a1826;
   background: #fae3b0;
-  }
+}
 
-  #backlight {
+#backlight {
   @include border();
   color: #161320;
   background: #f8bd96;
-  }
+}
 
-  #clock {
+#clock {
   @include border();
   color: #161320;
   background: #abe9b3;
-  }
+}
 
-  #memory {
+#memory {
   @include border();
   color: #161320;
   background: #ddb6f2;
-  }
+}
 
-  #privacy {
+#privacy {
   @include border();
   color: #161320;
   background: #ddb6f2;
-  }
+}
 
-  #cpu {
+#cpu {
   @include border();
   color: #161320;
   background: #96cdfb;
-  }
+}
 
-  #tray {
+#tray {
   @include border-left();
   color: #b5e8e0;
   background: #161320;
-  }
+}
 
-  #idle_inhibitor {
+#idle_inhibitor {
   @include border();
   font-size: 20px;
   color: #161320;
   background: #f28fad;
-  }
+}
 
-  #group-power {
+#group-power {
   @include border();
   font-size: 20px;
   transition: none;
   color: #161320;
   background: #f28fad;
-  }
+}
 
-  #custom-notification {
+#custom-notification {
   @include border-right();
   color: #161320;
   background: #f2cdcd;
   font-family: "NotoSansMono Nerd Font";
-  }
+}
 
-  #mode {
+#mode {
   @include border();
   color: #161320;
   background: #ddb6f2;
-  }
+}
 
-  @keyframes blink {
+@keyframes blink {
   to {
     background-color: #bf616a;
     color: #b5e8e0;
   }
-  }
+}
 
-  #battery {
+#battery {
   @include border();
   color: #161320;
   background: #b5e8e0;
@@ -170,4 +170,4 @@
     animation-iteration-count: infinite;
     animation-direction: alternate;
   }
-  }
+}