From e39c52216a49be7635f717ef9f31d975897f7954 Mon Sep 17 00:00:00 2001
From: Nydragon <contact@ccnlc.eu>
Date: Mon, 27 May 2024 21:58:34 +0900
Subject: [PATCH] feat: check formatting for js, ts, css and scss files
---
.pre-commit-config.yaml | 10 +-
flake.nix | 1 +
home/sway/swaync/themes/catppuccin.css | 159 ++++++++++---
home/sway/swaync/themes/gruvbox.css | 15 +-
home/sway/waybar/style.scss | 300 ++++++++++++-------------
5 files changed, 301 insertions(+), 184 deletions(-)
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index de6e0e3..d644695 100644
--- a/.pre-commit-config.yaml
+++ b/.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]
diff --git a/flake.nix b/flake.nix
index a56642a..7048435 100644
--- a/flake.nix
+++ b/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
diff --git a/home/sway/swaync/themes/catppuccin.css b/home/sway/swaync/themes/catppuccin.css
index aa5d373..e5ff05d 100644
--- a/home/sway/swaync/themes/catppuccin.css
+++ b/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;
}
diff --git a/home/sway/swaync/themes/gruvbox.css b/home/sway/swaync/themes/gruvbox.css
index c5336c4..c6f57e2 100644
--- a/home/sway/swaync/themes/gruvbox.css
+++ b/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;
}
diff --git a/home/sway/waybar/style.scss b/home/sway/waybar/style.scss
index 95b8b37..0e75374 100644
--- a/home/sway/waybar/style.scss
+++ b/home/sway/waybar/style.scss
@@ -1,173 +1,173 @@
- @mixin border {
- margin-left: 4px;
- margin-right: 4px;
- border-radius: 10px;
+@mixin border {
+ margin-left: 4px;
+ margin-right: 4px;
+ border-radius: 10px;
- padding-left: 10px;
- padding-right: 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;
}
- @mixin border-left {
- padding-left: 10px;
- margin-right: 4px;
- padding-right: 10px;
- border-radius: 10px;
+ button:hover {
+ background-color: rgba(159, 255, 255, 0.9);
}
- @mixin border-right {
- margin-left: 4px;
- padding-left: 10px;
- padding-right: 10px;
- border-radius: 10px;
+ button.focused {
+ background-color: rgba(50, 194, 219, 0.7);
}
+}
- * {
- font-family: "DejaVuSansMNerdFont-Regular";
- border: none;
- opacity: 50;
- border-radius: 10px;
- font-size: 13px;
- }
+#network {
+ @include border();
+ color: #161320;
+ background: #bd93f9;
+}
- window#waybar {
- background: transparent;
- }
+#pulseaudio {
+ @include border();
+ min-width: 23px;
+ color: #1a1826;
+ background: #fae3b0;
+}
- window#waybar.hidden {
- opacity: 0.2;
- }
+#backlight {
+ @include border();
+ color: #161320;
+ background: #f8bd96;
+}
- #window {
- padding-left: 10px;
- padding-right: 10px;
- border-radius: 10px;
- transition: none;
- color: transparent;
- background: transparent;
- }
+#clock {
+ @include border();
+ color: #161320;
+ background: #abe9b3;
+}
- .modules-center {
- margin: 3px 0 0 0;
- }
+#memory {
+ @include border();
+ color: #161320;
+ background: #ddb6f2;
+}
- .modules-right {
- margin: 3px 8px 0 0;
- }
+#privacy {
+ @include border();
+ color: #161320;
+ background: #ddb6f2;
+}
- .modules-left {
- margin: 3px 0 0 8px;
- }
+#cpu {
+ @include border();
+ color: #161320;
+ background: #96cdfb;
+}
- #workspaces {
- background-color: rgba(13, 214, 250, 0.4);
+#tray {
+ @include border-left();
+ color: #b5e8e0;
+ background: #161320;
+}
- button {
- padding: 1px 5px;
- }
+#idle_inhibitor {
+ @include border();
+ font-size: 20px;
+ color: #161320;
+ background: #f28fad;
+}
- button:hover {
- background-color: rgba(159, 255, 255, 0.9);
- }
+#group-power {
+ @include border();
+ font-size: 20px;
+ transition: none;
+ color: #161320;
+ background: #f28fad;
+}
- button.focused {
- background-color: rgba(50, 194, 219, 0.7);
- }
- }
+#custom-notification {
+ @include border-right();
+ color: #161320;
+ background: #f2cdcd;
+ font-family: "NotoSansMono Nerd Font";
+}
- #network {
- @include border();
- color: #161320;
- background: #bd93f9;
- }
+#mode {
+ @include border();
+ color: #161320;
+ background: #ddb6f2;
+}
- #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();
+@keyframes blink {
+ to {
+ background-color: #bf616a;
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;
- }
+#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;
}
+}