⚙️ Add stylelint and base configuration (see #74) (#92)

* tooling: add stylelint and base configuration (see #74)

* Autofix with stylelint on commit

.stylelintrc

@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true
+  }
+}

assets/css/base/_base.scss

@@ -2,8 +2,8 @@ body {
   border-top: 1rem solid $primary-color;
   font-family: $sans-serif;
   font-size: pxToRem(20);
-  padding: 2rem;
   margin: 0;
+  padding: 2rem;
 }
 
 h1 {
@@ -15,22 +15,22 @@ h1,
 h2,
 h3,
 h4 {
-  margin-top: 1em;
   margin-bottom: 0.5em;
+  margin-top: 1em;
 }
 
 p {
-  margin: 0.75rem 0;
   font-size: 1.25rem;
   line-height: 1.25;
+  margin: 0.75rem 0;
 }
 
 a {
-  text-decoration: none;
-  color: $black;
   border-bottom: $dark-grey solid 0.1em;
+  color: $black;
   font-family: $ext-sans;
   margin: 1rem 0;
+  text-decoration: none;
 
   &:hover {
     border-bottom: $primary-color solid 0.1rem;
@@ -44,16 +44,16 @@ a {
 code {
   background-color: $dark-grey;
   border: 1px solid $black;
-  color: $white;
-  padding: 0.15em;
   border-radius: 0.25em;
+  color: $white;
   font-size: 95%;
+  padding: 0.15em;
 
   pre & {
     border: none;
-    padding: 0;
     border-radius: 0;
     font-size: inherit;
+    padding: 0;
   }
 }
 

assets/css/base/_typography.scss

@@ -1,6 +1,6 @@
 .subtitle {
   font-family: $ext-sans;
   font-weight: $regular;
-  letter-spacing: 0.1;
   grid-column: span 2;
+  letter-spacing: 0.1;
 }

assets/css/components/_definitions.scss

@@ -1,21 +1,20 @@
 .word__type {
-    text-align: right;
-    padding-right: 1rem;
     font-family: $con-sans;
     font-size: 0.85rem;
+    padding-right: 1rem;
+    text-align: right;
     text-transform: uppercase;
   }
 
 .word__link {
-    text-decoration: none;
-    color: black;
     border-bottom: darkgrey solid 0.1em;
+    color: black;
     font-family: $ext-sans;
+    text-decoration: none;
   }
 
 .word__breakdown {
-    font-family: $sans-serif;
     border-left: 0.1rem solid lightgrey;
+    font-family: $sans-serif;
     padding-left: 1rem;
 }
-  

assets/css/components/_flag.scss

@@ -1,10 +1,10 @@
 .flag__red {
   background-color: rgb(255, 192, 203);
+  border-radius: 1rem;
   font-size: 0.9rem;
   font-weight: bold;
-  border-radius: 1rem;
-  padding: 0.45rem 0.65rem;
   margin: 0.25rem 0.75rem;
+  padding: 0.45rem 0.65rem;
   text-transform: lowercase;
 
   &:before {

assets/css/components/_lists.scss

@@ -1,6 +1,6 @@
   ol {
-    padding: 0 0 0 1em;
     margin: 0;
+    padding: 0 0 0 1em;
   }
 
   li {
@@ -22,9 +22,9 @@
   }
 
 .list-semicolon {
+  list-style: none;
   margin: 0;
   padding: 0;
-  list-style: none;
 
   & > li {
     display: inline;

assets/css/components/_word.scss

@@ -3,8 +3,8 @@
 
   &__title {
     font-family: $serif;
-    font-weight: 900;
     font-size: 2.5rem;
+    font-weight: 900;
     line-height: 1.25;
     margin-bottom: 1rem;
     margin-top: 0;
@@ -16,8 +16,8 @@
     @supports (display: grid) {
       // align-items: flex-start;
       display: grid;
-      grid-template-columns: 1fr 4fr;
       grid-gap: 1rem;
+      grid-template-columns: 1fr 4fr;
 
       & > * {
         margin: 0;
@@ -25,17 +25,17 @@
     }
 
     & > p {
-      grid-column: 1 / -1;
       font-family: $sans-serif;
       font-size: 1.5rem;
+      grid-column: 1 / -1;
     }
 
     & h4 {
-      grid-column: 1;
+      flex: 0 1 auto;
       font-family: $con-sans;
       font-size: 0.85rem;
       font-weight: normal;
-      flex: 0 1 auto;
+      grid-column: 1;
       text-transform: uppercase;
       transform: translateY(0.4em);
 
@@ -51,16 +51,16 @@
 
     & h4 ~ p,
     & h4 ~ ul {
+      font-size: inherit;
       // border-left: 0.1rem solid lightgrey;
       // padding-left: 1rem;
       grid-column: 2;
-      font-size: inherit;
     }
   }
 
   &__speech {
-    font-size: 0.5em;
     font-family: $sans-serif;
+    font-size: 0.5em;
   }
 
   &__signal {
@@ -68,10 +68,10 @@
     color: var(--word-signal-color);
     display: inline-block;
     font-family: $ext-sans;
-    text-transform: uppercase;
     font-size: 0.75rem;
     letter-spacing: 0.15rem;
     padding: 0.5rem 0.75rem;
+    text-transform: uppercase;
 
     &--avoid {
       --word-signal-color: #a40000;

assets/css/structures/_grid.scss

@@ -5,19 +5,19 @@
 
 .grid {
   display: grid;
+  grid-column-gap: 4rem;
+  grid-row-gap: 10rem;
   grid-template-columns: repeat(4, [col] 1fr [col]);
   grid-template-rows: fit-content, fit-content, auto;
-  grid-row-gap: 10rem;
-  grid-column-gap: 4rem;
 }
 
 .auto-grid {
   display: grid;
+  grid-gap: var(--l-gap);
   grid-template-columns: repeat(
     auto-fill,
     minmax(var(--auto-grid-min-size), 1fr)
   );
-  grid-gap: var(--l-gap);
 }
 
 .small-left-grid {
@@ -30,23 +30,23 @@
 }
 
 .block__dictionary {
-  max-width: 50rem;
   margin-left: auto;
   margin-right: auto;
+  max-width: 50rem;
   padding: 0 1rem;
 }
 
 .block__word {
-  grid-column: span 2;
   display: flex;
   flex-direction: column;
+  grid-column: span 2;
   margin: 1rem;
 }
 
 .block__type {
+  align-items: flex-start;
   display: grid;
   grid-template-columns: 1fr 4fr;
-  align-items: flex-start;
 }
 
 .page {
@@ -62,9 +62,9 @@
 .box {
   background: black;
   color: white;
-  padding: 1rem;
-  margin: 1rem 0.5rem;
   height: auto;
+  margin: 1rem 0.5rem;
+  padding: 1rem;
 
   a {
     color: white;

assets/css/structures/_header.scss

@@ -2,8 +2,8 @@
   // a sensible base font size
   font-size: 3rem;
   line-height: 0.75;
-  padding: 0;
   margin: 0.5rem 0rem;
+  padding: 0;
   // transform: rotateZ(90deg);
   // margin: 13rem -7rem;
 }
@@ -35,8 +35,8 @@
 }
 
 .sub-headline {
-  font-weight: bold;
   font-size: 1.25rem;
+  font-weight: bold;
 }
 
 .summary {

assets/css/themes/default.scss

@@ -0,0 +1 @@
+// TODO: Add themes.

package.json

@@ -9,7 +9,8 @@
     "build:site": "eleventy",
     "build": "npm run build:css && npm run build:site",
     "create-definitions": "bin/create-definitions",
-    "lint": "npm run lint:js",
+    "lint": "npm run lint:css && npm run lint:js",
+    "lint:css": "stylelint \"assets/css/**/*.scss\"",
     "lint:js": "eslint \"11ty/**/*.js\"",
     "serve": "concurrently \"npm run serve:site\" \"npm run watch:css\"",
     "serve:site": "eleventy --serve",
@@ -42,6 +43,9 @@
     "11ty/**/*.js": [
       "npm run lint:js -- --fix",
       "npm run test"
+    ],
+    "assets/css/**/*.scss": [
+      "npm run lint:css -- --fix"
     ]
   },
   "dependencies": {
@@ -62,6 +66,10 @@
     "parcel-bundler": "^1.12.4",
     "prettier": "^1.19.1",
     "sass": "^1.23.7",
-    "slugify": "^1.3.6"
+    "slugify": "^1.3.6",
+    "stylelint": "^13.2.0",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-order": "^4.0.0",
+    "stylelint-scss": "^3.14.2"
   }
 }