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