Add prettier

.github/workflows/lint.yml

@@ -51,6 +51,8 @@ jobs:
 
       - run: 'yarn lint --max-warnings 89 > /dev/null'
 
+      - run: yarn pretty
+
       - run: ./bin/update_licence.sh -nf
 
       - name: Run PHPCS

.prettierignore

@@ -0,0 +1,4 @@
+/*
+!/resources
+/resources/*
+!/resources/css

.prettierrc

@@ -0,0 +1 @@
+{}

package.json

@@ -4,6 +4,7 @@
     "dev": "yarn run development",
     "development": "cross-env NODE_ENV=development webpack",
     "lint": "eslint --cache 'resources/js/**/*.{js,ts,tsx}' 'tests/karma/**/*.{ts,tsx}' '*.js'",
+    "pretty": "prettier --check resources/css/**/*.less",
     "prod": "yarn run production",
     "production": "cross-env NODE_ENV=production webpack",
     "watch": "yarn run development --watch",
@@ -71,6 +72,7 @@
     "photoswipe": "^4.1.1",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
+    "prettier": "^3.3.3",
     "qtip2": "https://github.com/notbakaneko/qTip2.git#cd5f038667d2b23a44f4274c46de01834d704ce6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

resources/css/app.less

@@ -8,7 +8,7 @@
 @import "~inter-ui/inter.css";
 
 @import "~bootstrap/less/bootstrap";
-@import 'bootstrap-overrides';
+@import "bootstrap-overrides";
 
 @import "~qtip2/dist/jquery.qtip.css";
 @import "~photoswipe/dist/photoswipe.css";

resources/css/base.less

@@ -20,17 +20,29 @@ h2 {
   margin: 10px 0 0 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: @osu-colour-c1;
 }
 
 a {
   .link-default();
   outline-style: none;
-  &:link, &:visited, &:hover, &:active { outline-style: none; }
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    outline-style: none;
+  }
 
   text-decoration: none;
-  &:hover { text-decoration: underline; }
+  &:hover {
+    text-decoration: underline;
+  }
 
   transition: color 80ms linear;
 }
@@ -44,13 +56,14 @@ code {
 }
 
 @font-face {
-  font-family: 'FontAwesomeExtra';
-  src: url('~@fonts/extra/extra.eot?1280178');
-  src: url('~@fonts/extra/extra.eot?1280178#iefix') format('embedded-opentype'),
-       url('~@fonts/extra/extra.woff2?1280178') format('woff2'),
-       url('~@fonts/extra/extra.woff?1280178') format('woff'),
-       url('~@fonts/extra/extra.ttf?1280178') format('truetype'),
-       url('~@fonts/extra/extra.svg?1280178#extra') format('svg');
+  font-family: "FontAwesomeExtra";
+  src: url("~@fonts/extra/extra.eot?1280178");
+  src:
+    url("~@fonts/extra/extra.eot?1280178#iefix") format("embedded-opentype"),
+    url("~@fonts/extra/extra.woff2?1280178") format("woff2"),
+    url("~@fonts/extra/extra.woff?1280178") format("woff"),
+    url("~@fonts/extra/extra.ttf?1280178") format("truetype"),
+    url("~@fonts/extra/extra.svg?1280178#extra") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -98,13 +111,18 @@ label {
   font-weight: 600;
 }
 
-input[type="checkbox"], input[type="radio"] {
+input[type="checkbox"],
+input[type="radio"] {
   margin: 2px 0 0;
 }
 
-a[disabled] { &:extend(.btn[disabled]); }
+a[disabled] {
+  &:extend(.btn[disabled]);
+}
 
-.clickable-row { cursor: pointer; }
+.clickable-row {
+  cursor: pointer;
+}
 
 [data-visibility] {
   will-change: opacity;

resources/css/bbcode.less

@@ -35,7 +35,7 @@
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       top: 0;
@@ -77,7 +77,8 @@
     max-width: 100%;
   }
 
-  ol, ul {
+  ol,
+  ul {
     padding-left: 20px;
   }
 

resources/css/bem/account-edit-entry.less

@@ -37,7 +37,7 @@
     // placeholder to prevent triggering dragleave when entring child element
     &::after {
       .full-size();
-      content: '';
+      content: "";
     }
   }
 
@@ -166,7 +166,7 @@
       padding-left: (@label-width + 10px);
     }
 
-    .@{top}[data-form-error-state=error] & {
+    .@{top}[data-form-error-state="error"] & {
       display: block;
     }
   }
@@ -206,7 +206,7 @@
       border-color: @osu-colour-l1;
     }
 
-    .@{top}[data-form-error-state=error] & {
+    .@{top}[data-form-error-state="error"] & {
       border-color: @red;
     }
 

resources/css/bem/account-edit-status.less

@@ -14,7 +14,7 @@
     &--saved {
       color: @green;
 
-      [data-account-edit-state=saved] & {
+      [data-account-edit-state="saved"] & {
         opacity: 1;
       }
     }
@@ -28,7 +28,7 @@
         }
       }
 
-      [data-account-edit-state=saving] & {
+      [data-account-edit-state="saving"] & {
         opacity: 1;
       }
     }

resources/css/bem/account-edit.less

@@ -26,7 +26,7 @@
     &::after {
       .inner-shadow-top();
       .full-size();
-      content: '';
+      content: "";
       pointer-events: none;
     }
   }

resources/css/bem/admin-contest-entry.less

@@ -35,7 +35,8 @@
   }
 
   &__column {
-    && { // bootstrap override
+    && {
+      // bootstrap override
       vertical-align: middle;
     }
 

resources/css/bem/admin-menu.less

@@ -24,7 +24,8 @@
     width: @admin-menu-icon-width;
     background-color: #333;
 
-    &:hover, &.js-menu--active {
+    &:hover,
+    &.js-menu--active {
       background-color: @blue-darker;
     }
   }

resources/css/bem/artist-album.less

@@ -42,8 +42,12 @@
     &--new {
       &::after {
         .full-size();
-        content: '';
-        background: linear-gradient(to left, @osu-colour-orange-1 0%, transparent 30%)
+        content: "";
+        background: linear-gradient(
+          to left,
+          @osu-colour-orange-1 0%,
+          transparent 30%
+        );
       }
     }
   }

resources/css/bem/artist-link-button.less

@@ -41,7 +41,8 @@
 
   transition: 0.1s ease-out;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     color: white;
     text-decoration: none;
   }

resources/css/bem/artist-sidebar-album.less

@@ -10,7 +10,8 @@
   flex-direction: column;
   align-items: center;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     color: white;
     text-decoration: none;
   }

resources/css/bem/artist-track-search-form-switches.less

@@ -18,7 +18,8 @@
     text-align: center;
     white-space: nowrap;
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
       color: hsl(var(--hsl-c1));
     }
 

resources/css/bem/artist-track-search-form.less

@@ -53,7 +53,8 @@
     text-align: center;
     white-space: nowrap;
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
       color: hsl(var(--hsl-c1));
     }
 

resources/css/bem/artist-track.less

@@ -39,7 +39,11 @@
   }
 
   &--original {
-    background-image: linear-gradient(to right, hsla(var(--hsl-pink-1), 0.2), hsla(var(--hsl-pink-1), 0) 50%);
+    background-image: linear-gradient(
+      to right,
+      hsla(var(--hsl-pink-1), 0.2),
+      hsla(var(--hsl-pink-1), 0) 50%
+    );
   }
 
   &__button {

resources/css/bem/artist.less

@@ -49,7 +49,12 @@
       margin-bottom: 10px;
     }
 
-    > h1, h2, h3, h4, h5, h6 {
+    > h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       color: white;
     }
 

resources/css/bem/audio-player.less

@@ -6,8 +6,8 @@
 
   @_height: 40px;
 
-  --current-time: '0:00';
-  --duration: '0:00';
+  --current-time: "0:00";
+  --duration: "0:00";
   --progress: 0;
 
   height: @_height;
@@ -104,22 +104,25 @@
     border-radius: 10000px;
     --current-head-opacity: 0;
     --bar: 0;
-    transition: height 100ms, opacity 100ms;
+    transition:
+      height 100ms,
+      opacity 100ms;
     user-select: none;
     position: relative;
 
     // extended hover area
     &::before {
       position: absolute;
-      content: '';
+      content: "";
       display: block;
       left: -5px;
       right: $left;
       top: -10px;
       bottom: $top;
     }
 
-    &:hover, &[data-audio-dragging="1"] {
+    &:hover,
+    &[data-audio-dragging="1"] {
       height: 6px;
       --current-head-opacity: 1;
     }
@@ -156,7 +159,7 @@
       background-color: @osu-colour-h1;
       right: (-$width / 2);
       top: calc(50% - ($width / 2));
-      content: '';
+      content: "";
       display: block;
       opacity: var(--current-head-opacity);
       transition: inherit;
@@ -177,7 +180,7 @@
     min-width: (@_colon + @_number * 3);
 
     &::before {
-      content: var(--timestamp, '');
+      content: var(--timestamp, "");
     }
 
     .@{_top}[data-audio-time-format="minute"] & {
@@ -203,7 +206,7 @@
 
     &--total {
       color: @osu-colour-c2;
-      --timestamp: '--:--';
+      --timestamp: "--:--";
 
       .@{_top}[data-audio-has-duration="1"] & {
         --timestamp: var(--duration);

resources/css/bem/avatar.less

@@ -99,15 +99,18 @@
     box-shadow: none;
     border-radius: 50%;
     overflow: hidden;
-    transition: width var(--header-pinned-animation-duration), height var(--header-pinned-animation-duration);
+    transition:
+      width var(--header-pinned-animation-duration),
+      height var(--header-pinned-animation-duration);
     position: relative;
 
     .@{header-pinned} & {
       width: @nav2-avatar-height--pinned;
       height: @nav2-avatar-height--pinned;
     }
 
-    &.js-click-menu--active, &:hover {
+    &.js-click-menu--active,
+    &:hover {
       box-shadow: inset 0 0 0 3px hsl(var(--hsl-c1));
     }
   }
@@ -126,8 +129,8 @@
   &--restricted {
     &::before {
       .full-size();
-      content: '';
-      background-image: url('~@images/layout/exclamation-icon.svg');
+      content: "";
+      background-image: url("~@images/layout/exclamation-icon.svg");
       background-size: 60%;
       background-position: center;
       background-repeat: no-repeat;