Add csslint to CI

.github/.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "color-hex-length": "long",
+    "custom-property-pattern": "^_?[\\-a-z0-9]+$",
+    "declaration-empty-line-before": null
+  },
+  "reportInvalidScopeDisables": true,
+  "reportNeedlessDisables": true
+}

.github/workflows/checks.yml

@@ -79,3 +79,16 @@ jobs:
       - run: >-
           pip install yamllint==1.32.0 &&
           yamllint -c .github/yamllint.yml -s .
+
+  csslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - run: >-
+          npm install [email protected] [email protected] -g &&
+          stylelint "**/*.css" --config .github/.stylelintrc.json

app/stylesheet/application.css

@@ -1,12 +1,11 @@
-@import "base/vars";
-@import "base/links";
-@import "base/mixins";
-@import "base/helpers";
-@import "main_layout";
-@import "misc";
-@import "navbar";
-@import "table";
-
-@import "specific/artists";
-@import "specific/error";
-@import "specific/submission_files";
+@import url("base/vars");
+@import url("base/links");
+@import url("base/mixins");
+@import url("base/helpers");
+@import url("main_layout");
+@import url("misc");
+@import url("navbar");
+@import url("table");
+@import url("specific/artists");
+@import url("specific/error");
+@import url("specific/submission_files");

app/stylesheet/base/links.css

@@ -17,7 +17,7 @@ a.active {
   font-weight: bold;
 }
 
-.button_to {
+.button_to { /* stylelint-disable-line selector-class-pattern */
   display: inline;
 
   button {

app/stylesheet/base/mixins.css

@@ -5,6 +5,7 @@
 
   .site-icon {
     vertical-align: middle;
+
     &::before {
       content: "";
       width: var(--_icon-size);

app/stylesheet/base/vars.css

@@ -14,5 +14,6 @@
   --color-table-section-darken-5:   #262626;
   --color-table-section-lighten-10: #4d4d4d;
 
+  /* Other miscellaneous stuff */
   --border-radius-full: 6px;
 }

app/stylesheet/main_layout.css

@@ -13,7 +13,7 @@ body {
 }
 
 header {
-  margin: 0 0 0.8rem 0;
+  margin: 0 0 0.8rem;
   padding: 0;
 }
 
@@ -28,7 +28,6 @@ header {
 }
 
 footer {
-  margin-top: auto;
   text-align: center;
   border-radius: var(--border-radius-full) var(--border-radius-full) 0 0;
   margin-top: 1rem;

app/stylesheet/misc.css

@@ -1,4 +1,4 @@
-.simple_form {
+.simple_form { /* stylelint-disable-line selector-class-pattern */
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.25em 1em;

app/stylesheet/navbar.css

@@ -3,24 +3,6 @@
   grid-template-columns: 3.75rem 1fr;
   grid-template-areas: "logo primary" "logo secondary";
 
-  .logo {
-    grid-area: logo;
-
-    margin-top: 0.3rem;
-    background-image: url("../../public/logo.png");
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position-y: center;
-  }
-
-  .primary-navbar {
-    grid-area: primary;
-  }
-
-  .secondary-navbar {
-    grid-area: secondary;
-  }
-
   menu {
     margin: 0;
     background-color: var(--color-foreground);
@@ -36,7 +18,19 @@
     }
   }
 
+  .logo {
+    grid-area: logo;
+
+    margin-top: 0.3rem;
+    background-image: url("../../public/logo.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position-y: center;
+  }
+
   .primary-navbar {
+    grid-area: primary;
+
     margin-top: 0;
     background-color: var(--color-background);
 
@@ -46,7 +40,11 @@
     }
   }
 
-  .secondary-navbar.empty li {
-    visibility: hidden;
+  .secondary-navbar {
+    grid-area: secondary;
+
+    &.empty li {
+      visibility: hidden;
+    }
   }
 }