⚙️ 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/abstracts/_mixins.scss

@@ -16,4 +16,4 @@
 
 @mixin icon__embed() {
   margin-right: 0.35rem;
-}
+}

assets/css/abstracts/_variables.scss

@@ -2,7 +2,7 @@ $primary-color: hsl(0, 100%, 50%);
 $secondary-color: hsl(120, 100%, 25%);
 
 $dark-red: hsl(0, 100%, 32.2%);
-$pink: hsl(349.5, 100%, 87.6%); 
+$pink: hsl(349.5, 100%, 87.6%);
 $black: hsl(0, 0%, 13%);
 $white: hsl(0, 0%, 100%);
 

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;
   }
 }
 
@@ -69,4 +69,4 @@ th {
 
 pre[class*='language-'] {
   font-size: 1rem;
-}
+}

assets/css/base/_custom-properties.scss

@@ -1,4 +1,4 @@
 :root {
   --auto-grid-min-size: 17rem;
   --l-gap: 1rem;
-}
+}

assets/css/base/_fonts.scss

@@ -9,4 +9,4 @@ $thin: 200;
 $light: 300;
 $regular: 400;
 $medium: 500;
-$bold: 700;
+$bold: 700;

assets/css/base/_helpers.scss

@@ -15,4 +15,4 @@
   li {
     margin: 0.75rem 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,14 +1,14 @@
 .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 {
     @include icon__avoid();
     @include icon__embed();
   }
-}
+}

assets/css/components/_lists.scss

@@ -1,6 +1,6 @@
   ol {
-    padding: 0 0 0 1em;
     margin: 0;
+    padding: 0 0 0 1em;
   }
 
   li {
@@ -20,11 +20,11 @@
       padding-right: pxToRem(5);
     }
   }
-  
+
 .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/_footer.scss

@@ -1,3 +1,3 @@
 .site-footer {
   margin-top: 3rem;
-}
+}

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,11 +62,11 @@
 .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,10 +35,10 @@
 }
 
 .sub-headline {
-  font-weight: bold;
   font-size: 1.25rem;
+  font-weight: bold;
 }
 
 .summary {
   grid-column: span 2;
-}
+}

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"
   }
 }