From ae50137a45645259315a27f5d409a062e9069a04 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Thu, 13 Aug 2020 16:19:43 +0200
Subject: [PATCH] Switch to SCSS, fix CSS custom properties.

---
 package.json                                  |   9 +-
 source/css/libraries.css                      |  43 -------
 source/css/userscripts.css                    |  28 -----
 source/css/userstyles.css                     |  28 -----
 source/index.html                             |  18 +--
 source/index.js                               |   3 +-
 source/libraries/index.html                   | 113 +++++++++---------
 .../variables.css => scss/_variables.scss}    |   0
 source/{css/index.css => scss/common.scss}    |  66 +++++-----
 source/scss/index.scss                        |   5 +
 source/scss/libraries.scss                    |  44 +++++++
 source/scss/userscripts.scss                  |  19 +++
 source/scss/userstyles.scss                   |  19 +++
 source/userscripts/index.html                 |  17 ++-
 source/userstyles/index.html                  |  17 ++-
 yarn.lock                                     |  40 ++++++-
 16 files changed, 255 insertions(+), 214 deletions(-)
 delete mode 100644 source/css/libraries.css
 delete mode 100644 source/css/userscripts.css
 delete mode 100644 source/css/userstyles.css
 rename source/{css/variables.css => scss/_variables.scss} (100%)
 rename source/{css/index.css => scss/common.scss} (57%)
 create mode 100644 source/scss/index.scss
 create mode 100644 source/scss/libraries.scss
 create mode 100644 source/scss/userscripts.scss
 create mode 100644 source/scss/userstyles.scss

diff --git a/package.json b/package.json
index 75256a3..88b77a2 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,9 @@
   "repository": "https://git.holllo.cc/Bauke/bauke.xyz",
   "license": "MIT",
   "scripts": {
-    "start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html css'",
-    "build": "node 'source/index.js'",
-    "test": "xo && stylelint 'source/css/*.css'",
+    "start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html scss'",
+    "build": "node 'source/index.js' && sass 'source/scss/':'public/css/'",
+    "test": "xo && stylelint 'source/scss/*.scss'",
     "deploy": "rm -rf 'public/' && yarn build && yarn deploy:netlify",
     "deploy:netlify": "netlify deploy --prod --dir 'public/' -s 37bb1f7c-2abb-419f-9a31-a4b72209c1c8"
   },
@@ -24,12 +24,15 @@
     "netlify-cli": "^2.58.0",
     "nodemon": "^2.0.4",
     "nunjucks": "^3.2.2",
+    "sass": "^1.26.10",
     "stylelint": "^13.6.1",
+    "stylelint-config-xo-scss": "^0.13.0",
     "stylelint-config-xo-space": "^0.14.0",
     "xo": "^0.32.1"
   },
   "stylelint": {
     "extends": [
+      "stylelint-config-xo-scss",
       "stylelint-config-xo-space"
     ],
     "rules": {
diff --git a/source/css/libraries.css b/source/css/libraries.css
deleted file mode 100644
index 8ca54a3..0000000
--- a/source/css/libraries.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.libraries {
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
-
-.libraries li {
-  background-color: var(--background-2);
-  padding: 16px;
-}
-
-.libraries a {
-  margin-bottom: 8px;
-}
-
-.libraries a:hover {
-  background-color: var(--primary-accent-2);
-}
-
-.libraries .badges {
-  display: flex;
-  gap: 8px;
-}
-
-#npm,
-.libraries li.npm {
-  border: 1px solid var(--primary-accent-1);
-}
-
-.npm a {
-  background-color: var(--primary-accent-1);
-  color: var(--background-1);
-}
-
-#crates,
-.libraries li.crates {
-  border: 1px solid var(--primary-accent-4);
-}
-
-.crates a {
-  background-color: var(--primary-accent-4);
-  color: var(--background-1);
-}
diff --git a/source/css/userscripts.css b/source/css/userscripts.css
deleted file mode 100644
index 3e0bc0e..0000000
--- a/source/css/userscripts.css
+++ /dev/null
@@ -1,28 +0,0 @@
-header {
-  align-items: center;
-  background-color: var(--background-2);
-  border: 1px solid var(--primary-accent-4);
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-  width: 100%;
-}
-
-h2 {
-  margin-right: auto;
-  padding: 0;
-}
-
-a.install {
-  background-color: var(--primary-accent-4);
-  color: var(--background-1);
-}
-
-a.install:hover {
-  background-color: var(--primary-accent-3);
-}
-
-.remove-padding,
-.remove-a-padding a {
-  padding: 0;
-}
diff --git a/source/css/userstyles.css b/source/css/userstyles.css
deleted file mode 100644
index f3dba9e..0000000
--- a/source/css/userstyles.css
+++ /dev/null
@@ -1,28 +0,0 @@
-header {
-  align-items: center;
-  background-color: var(--background-2);
-  border: 1px solid var(--primary-accent-1);
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-  width: 100%;
-}
-
-h2 {
-  margin-right: auto;
-  padding: 0;
-}
-
-a.install {
-  background-color: var(--primary-accent-1);
-  color: var(--background-1);
-}
-
-a.install:hover {
-  background-color: #96c839;
-}
-
-.remove-padding,
-.remove-a-padding a {
-  padding: 0;
-}
diff --git a/source/index.html b/source/index.html
index 32c20c4..a7480b0 100644
--- a/source/index.html
+++ b/source/index.html
@@ -6,14 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bauke</title>
   <link rel="stylesheet" href="css/modern-normalize.css">
-  <link rel="stylesheet" href="css/variables.css">
+  <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/index.css">
 </head>
 
 <body>
-  <main>
-    <h1>Bauke</h1>
-    <ul>
+  <main class="bordered">
+    <h1 class="bordered">Bauke</h1>
+    <ul class="bordered">
       <li>
         <a href="https://git.holllo.cc/Bauke" target="_blank">Gitea</a>
       </li>
@@ -24,7 +24,7 @@
         <a href="https://gitlab.com/Bauke" target="_blank">GitLab</a>
       </li>
     </ul>
-    <ul>
+    <ul class="bordered">
       <li>
         <a href="https://holllo.cc" target="_blank">Holllo</a>
       </li>
@@ -32,12 +32,12 @@
         <a href="https://driftingnebula.com" target="_blank">driftingnebula</a>
       </li>
     </ul>
-    <ul>
+    <ul class="bordered">
       <li>
         <a href="https://tildes.net/user/Bauke" target="_blank">Tildes</a>
       </li>
     </ul>
-    <ul>
+    <ul class="bordered">
       <li>
         <a href="https://matrix.org" target="_blank">Matrix: @baukexyz:matrix.org</a>
       </li>
@@ -46,7 +46,7 @@
       </li>
     </ul>
     <div class="divider"></div>
-    <ul>
+    <ul class="bordered">
       <li>
         <a href="https://git.holllo.cc/Bauke?q=open-source" target="_blank">♡ Open Source</a>
       </li>
@@ -58,7 +58,7 @@
       </li>
     </ul>
   </main>
-  <footer>
+  <footer class="bordered">
     <p>
       &copy; Bauke
       <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
diff --git a/source/index.js b/source/index.js
index 9226354..6a2616e 100644
--- a/source/index.js
+++ b/source/index.js
@@ -12,7 +12,8 @@ async function main() {
       '!userscripts.js',
       '!userstyles.js',
       '!userscripts/*',
-      '!userstyles/*'
+      '!userstyles/*',
+      '!scss/*'
     ],
     '../public/',
     {
diff --git a/source/libraries/index.html b/source/libraries/index.html
index 07b367d..cc6a216 100644
--- a/source/libraries/index.html
+++ b/source/libraries/index.html
@@ -6,71 +6,74 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Libraries</title>
   <link rel="stylesheet" href="../css/modern-normalize.css">
-  <link rel="stylesheet" href="../css/variables.css">
-  <link rel="stylesheet" href="../css/index.css">
+  <link rel="stylesheet" href="../css/common.css">
   <link rel="stylesheet" href="../css/libraries.css">
 </head>
 
 <body>
-  <main>
-    <h1>Libraries</h1>
+  <main class="bordered">
+    <h1 class="bordered">Libraries</h1>
 
-    <h2 id="crates">Crates.io</h2>
-    <ul class="libraries">
-      <li class="crates" id="opml">
-        <a href="https://crates.io/crates/opml" target="_blank">opml</a>
-        <p class="badges">
-          <img src="https://img.shields.io/crates/v/opml?color=yellowgreen&amp;style=flat-square"
-            alt="Crates.io version">
-          <img src="https://img.shields.io/crates/dr/opml?color=yellowgreen&amp;style=flat-square"
-            alt="Crates.io recent downloads">
-          <img src="https://img.shields.io/crates/l/opml?color=yellowgreen&amp;style=flat-square"
-            alt="Crates.io license">
-        </p>
-      </li>
-    </ul>
+    <div id="crates">
+      <h2 class="bordered">Crates.io</h2>
+      <ul class="bordered libraries">
+        <li class="bordered crates" id="opml">
+          <a class="button" href="https://crates.io/crates/opml" target="_blank">opml</a>
+          <p class="badges">
+            <img src="https://img.shields.io/crates/v/opml?color=yellowgreen&amp;style=flat-square"
+              alt="Crates.io version">
+            <img src="https://img.shields.io/crates/dr/opml?color=yellowgreen&amp;style=flat-square"
+              alt="Crates.io recent downloads">
+            <img src="https://img.shields.io/crates/l/opml?color=yellowgreen&amp;style=flat-square"
+              alt="Crates.io license">
+          </p>
+        </li>
+      </ul>
+    </div>
 
     <div class="divider"></div>
 
-    <h2 id="npm">npm</h2>
-    <ul class="libraries">
-      <li class="npm" id="fancify">
-        <a href="https://npmjs.com/package/fancify" target="_blank">fancify</a>
-        <p class="badges">
-          <img src="https://img.shields.io/npm/v/fancify?color=red&amp;style=flat-square"
-            alt="npm version">
-          <img src="https://img.shields.io/npm/dm/fancify?color=red&amp;style=flat-square"
-            alt="npm downloads per month">
-          <img src="https://img.shields.io/npm/l/fancify?color=red&amp;style=flat-square"
-            alt="npm license">
-        </p>
-      </li>
-      <li class="npm" id="node-ddg">
-        <a href="https://npmjs.com/package/node-ddg" target="_blank">node-ddg</a>
-        <p class="badges">
-          <img src="https://img.shields.io/npm/v/node-ddg?color=red&amp;style=flat-square"
-            alt="npm version">
-          <img src="https://img.shields.io/npm/dm/node-ddg?color=red&amp;style=flat-square"
-            alt="npm downloads per month">
-          <img src="https://img.shields.io/npm/l/node-ddg?color=red&amp;style=flat-square"
-            alt="npm license">
-        </p>
-      </li>
-      <li class="npm" id="owofy">
-        <a href="https://npmjs.com/package/owofy" target="_blank">owofy</a>
-        <p class="badges">
-          <img src="https://img.shields.io/npm/v/owofy?color=red&amp;style=flat-square"
-            alt="npm version">
-          <img src="https://img.shields.io/npm/dm/owofy?color=red&amp;style=flat-square"
-            alt="npm downloads per month">
-          <img src="https://img.shields.io/npm/l/owofy?color=red&amp;style=flat-square"
-            alt="npm license">
-        </p>
-      </li>
-    </ul>
+    <div id="npm">
+      <h2 class="bordered">npm</h2>
+      <ul class="bordered libraries">
+        <li class="bordered npm" id="fancify">
+          <a class="button" href="https://npmjs.com/package/fancify" target="_blank">fancify</a>
+          <p class="badges">
+            <img src="https://img.shields.io/npm/v/fancify?color=red&amp;style=flat-square"
+              alt="npm version">
+            <img src="https://img.shields.io/npm/dm/fancify?color=red&amp;style=flat-square"
+              alt="npm downloads per month">
+            <img src="https://img.shields.io/npm/l/fancify?color=red&amp;style=flat-square"
+              alt="npm license">
+          </p>
+        </li>
+        <li class="bordered npm" id="node-ddg">
+          <a class="button" href="https://npmjs.com/package/node-ddg" target="_blank">node-ddg</a>
+          <p class="badges">
+            <img src="https://img.shields.io/npm/v/node-ddg?color=red&amp;style=flat-square"
+              alt="npm version">
+            <img src="https://img.shields.io/npm/dm/node-ddg?color=red&amp;style=flat-square"
+              alt="npm downloads per month">
+            <img src="https://img.shields.io/npm/l/node-ddg?color=red&amp;style=flat-square"
+              alt="npm license">
+          </p>
+        </li>
+        <li class="bordered npm" id="owofy">
+          <a class="button" href="https://npmjs.com/package/owofy" target="_blank">owofy</a>
+          <p class="badges">
+            <img src="https://img.shields.io/npm/v/owofy?color=red&amp;style=flat-square"
+              alt="npm version">
+            <img src="https://img.shields.io/npm/dm/owofy?color=red&amp;style=flat-square"
+              alt="npm downloads per month">
+            <img src="https://img.shields.io/npm/l/owofy?color=red&amp;style=flat-square"
+              alt="npm license">
+          </p>
+        </li>
+      </ul>
+    </div>
   </main>
 
-  <footer>
+  <footer class="bordered">
     <p>
       &copy; Bauke
       <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
diff --git a/source/css/variables.css b/source/scss/_variables.scss
similarity index 100%
rename from source/css/variables.css
rename to source/scss/_variables.scss
diff --git a/source/css/index.css b/source/scss/common.scss
similarity index 57%
rename from source/css/index.css
rename to source/scss/common.scss
index 4d99e0e..fd0d36a 100644
--- a/source/css/index.css
+++ b/source/scss/common.scss
@@ -1,3 +1,5 @@
+@import 'variables';
+
 html {
   font-size: 62.5%;
 }
@@ -10,7 +12,6 @@ body {
 }
 
 main {
-  align-items: center;
   display: flex;
   gap: 16px;
   flex-direction: column;
@@ -35,35 +36,28 @@ p {
 
 a {
   border: 1px dashed transparent;
-  color: var(--primary-accent-7);
+  color: var(--page-accent-1, --primary-accent-7);
   display: inline-block;
   font-weight: bold;
   padding: 4px 8px;
   text-decoration: none;
-}
 
-a:hover {
-  background-color: var(--primary-accent-3);
-  color: var(--background-1);
-}
+  &:hover {
+    background-color: var(--page-accent-2, var(--primary-accent-3));
+    color: var(--background-1);
+  }
 
-a:active,
-a:focus {
-  border: 1px dashed var(--foreground-1);
-  outline: none;
+  &:active,
+  &:focus {
+    border: 1px dashed var(--foreground-1);
+    outline: none;
+  }
 }
 
 img {
   display: inline-block;
 }
 
-main,
-footer,
-h1,
-ul {
-  border: 1px solid var(--primary-accent-5);
-}
-
 ul {
   align-items: center;
   background-color: var(--background-2);
@@ -76,15 +70,10 @@ ul {
 
 li {
   margin-bottom: 8px;
-}
 
-li:last-child {
-  margin-bottom: 0;
-}
-
-.divider {
-  border-top: 1px solid var(--primary-accent-5);
-  width: 100%;
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 footer {
@@ -92,8 +81,31 @@ footer {
   margin: 0 auto;
   max-width: 500px;
   padding: 16px;
+
+  a {
+    padding: 0;
+  }
 }
 
-footer a {
+.bordered {
+  border: var(--border-size, 1px) solid var(--border-accent, var(--primary-accent-5));
+}
+
+.button {
+  background-color: var(--page-accent-1);
+  color: var(--background-1);
+
+  &:hover {
+    background-color: var(--page-accent-2);
+  }
+}
+
+.divider {
+  border-top: var(--border-size, 1px) solid var(--border-accent, var(--primary-accent-5));
+  width: 100%;
+}
+
+.remove-padding,
+.remove-a-padding a {
   padding: 0;
 }
diff --git a/source/scss/index.scss b/source/scss/index.scss
new file mode 100644
index 0000000..de5177c
--- /dev/null
+++ b/source/scss/index.scss
@@ -0,0 +1,5 @@
+body {
+  --border-accent: var(--primary-accent-5);
+  --page-accent-1: var(--primary-accent-7);
+  --page-accent-2: var(--primary-accent-3);
+}
diff --git a/source/scss/libraries.scss b/source/scss/libraries.scss
new file mode 100644
index 0000000..c98c851
--- /dev/null
+++ b/source/scss/libraries.scss
@@ -0,0 +1,44 @@
+body {
+  --border-accent: var(--primary-accent-5);
+  --page-accent-1: var(--primary-accent-7);
+  --page-accent-2: var(--primary-accent-3);
+}
+
+.libraries {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.libraries li {
+  background-color: var(--background-2);
+  padding: 16px;
+}
+
+.libraries a {
+  margin-bottom: 8px;
+}
+
+.libraries .badges {
+  display: flex;
+  gap: 8px;
+}
+
+#crates,
+#npm {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+#crates {
+  --border-accent: var(--primary-accent-4);
+  --page-accent-1: var(--primary-accent-4);
+  --page-accent-2: var(--primary-accent-7);
+}
+
+#npm {
+  --border-accent: var(--primary-accent-1);
+  --page-accent-1: var(--primary-accent-1);
+  --page-accent-2: var(--primary-accent-7);
+}
diff --git a/source/scss/userscripts.scss b/source/scss/userscripts.scss
new file mode 100644
index 0000000..28083df
--- /dev/null
+++ b/source/scss/userscripts.scss
@@ -0,0 +1,19 @@
+body {
+  --border-accent: var(--primary-accent-10);
+  --page-accent-1: var(--primary-accent-7);
+  --page-accent-2: var(--primary-accent-3);
+}
+
+header {
+  align-items: center;
+  background-color: var(--background-2);
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  width: 100%;
+}
+
+h2 {
+  margin-right: auto;
+  padding: 0;
+}
diff --git a/source/scss/userstyles.scss b/source/scss/userstyles.scss
new file mode 100644
index 0000000..279d81e
--- /dev/null
+++ b/source/scss/userstyles.scss
@@ -0,0 +1,19 @@
+body {
+  --border-accent: var(--primary-accent-1);
+  --page-accent-1: var(--primary-accent-7);
+  --page-accent-2: var(--primary-accent-3);
+}
+
+header {
+  align-items: center;
+  background-color: var(--background-2);
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  width: 100%;
+}
+
+h2 {
+  margin-right: auto;
+  padding: 0;
+}
diff --git a/source/userscripts/index.html b/source/userscripts/index.html
index a7d5ac8..ad2410d 100644
--- a/source/userscripts/index.html
+++ b/source/userscripts/index.html
@@ -6,16 +6,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Userscripts</title>
   <link rel="stylesheet" href="../css/modern-normalize.css">
-  <link rel="stylesheet" href="../css/variables.css">
-  <link rel="stylesheet" href="../css/index.css">
+  <link rel="stylesheet" href="../css/common.css">
   <link rel="stylesheet" href="../css/userscripts.css">
 </head>
 
 <body>
-  <main>
-    <h1>Userscripts</h1>
+  <main class="bordered">
+    <h1 class="bordered">Userscripts</h1>
 
-    <ul class="remove-a-padding">
+    <ul class="bordered remove-a-padding">
       <li>A collection of all my userscripts for various websites.</li>
 
       <li>
@@ -42,14 +41,14 @@
     <div class="divider"></div>
 
     {% for script in scripts %}
-    <header>
+    <header class="bordered">
       <h2 id="{{ script.name | lower | replace(" ", "-") }}">
         {{ script.name }}
       </h2>
-      <a class="install" href="{{ script.downloadURL }}" target="_blank">Install</a>
+      <a class="button" href="{{ script.downloadURL }}" target="_blank">Install</a>
     </header>
 
-    <ul>
+    <ul class="bordered">
       <li>{{ script.description }}</li>
       <li>Version {{ script.version }}</li>
       <li>
@@ -64,7 +63,7 @@
     {% endfor %}
   </main>
 
-  <footer>
+  <footer class="bordered">
     <p>
       &copy; Bauke
       <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
diff --git a/source/userstyles/index.html b/source/userstyles/index.html
index 71eb023..68925fb 100644
--- a/source/userstyles/index.html
+++ b/source/userstyles/index.html
@@ -6,16 +6,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Userstyles</title>
   <link rel="stylesheet" href="../css/modern-normalize.css">
-  <link rel="stylesheet" href="../css/variables.css">
-  <link rel="stylesheet" href="../css/index.css">
+  <link rel="stylesheet" href="../css/common.css">
   <link rel="stylesheet" href="../css/userstyles.css">
 </head>
 
 <body>
-  <main>
-    <h1>Userstyles</h1>
+  <main class="bordered">
+    <h1 class="bordered">Userstyles</h1>
 
-    <ul class="remove-a-padding">
+    <ul class="bordered remove-a-padding">
       <li>A collection of all my userstyles for various websites.</li>
 
       <li>
@@ -41,14 +40,14 @@
     <div class="divider"></div>
 
     {% for style in styles %}
-    <header>
+    <header class="bordered">
       <h2 id="{{ style.name | lower | replace(" ", "-") }}">
         {{ style.name }}
       </h2>
-      <a class="install" href="{{ style.updateURL }}" target="_blank">Install</a>
+      <a class="button" href="{{ style.updateURL }}" target="_blank">Install</a>
     </header>
 
-    <ul>
+    <ul class="bordered">
       <li>{{ style.description }}</li>
       <li>Version {{ style.version }}</li>
       <li>Licensed under {{ style.license }}.</li>
@@ -64,7 +63,7 @@
     {% endfor %}
   </main>
 
-  <footer>
+  <footer class="bordered">
     <p>
       &copy; Bauke
       <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
diff --git a/yarn.lock b/yarn.lock
index 315655b..31a7397 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6964,7 +6964,7 @@ postcss-values-parser@^1.5.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.6, postcss@^7.0.7:
+postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.6, postcss@^7.0.7:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -8169,6 +8169,14 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
+stylelint-config-xo-scss@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-xo-scss/-/stylelint-config-xo-scss-0.13.0.tgz#d714b760717892825e0788a1a3dd2a331592f750"
+  integrity sha512-bTicB369hfDjaMQJ42tV38lil2+WwR98AcL6e2Rqgs3hbHP5EPyEtjCw8bg+XP4o6GiOqERDE2DQLCT1lGD6Fg==
+  dependencies:
+    stylelint-config-xo "^0.19.0"
+    stylelint-scss "^3.13.0"
+
 stylelint-config-xo-space@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-xo-space/-/stylelint-config-xo-space-0.14.0.tgz#9e01a3640a85f3b2067f3b0d58567bf5b53837e0"
@@ -8184,7 +8192,15 @@ stylelint-config-xo@^0.16.0:
     stylelint-declaration-block-no-ignored-properties "^2.2.0"
     stylelint-order "^3.1.1"
 
-stylelint-declaration-block-no-ignored-properties@^2.2.0:
+stylelint-config-xo@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-xo/-/stylelint-config-xo-0.19.0.tgz#2a4292c3c3fbb9e530664e1165500dd786929a16"
+  integrity sha512-X/dWOM1lytr2FPv9D1gOnZnUKEcuqbw3CqloM6A5plXo8gXJXHKk1mmjOLrW3jTQNr6YGn3xwP61IjdOTSmEiA==
+  dependencies:
+    stylelint-declaration-block-no-ignored-properties "^2.3.0"
+    stylelint-order "^4.1.0"
+
+stylelint-declaration-block-no-ignored-properties@^2.2.0, stylelint-declaration-block-no-ignored-properties@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/stylelint-declaration-block-no-ignored-properties/-/stylelint-declaration-block-no-ignored-properties-2.3.0.tgz#98a641a137bf057c97ef3d3c4a848cd339e736da"
   integrity sha512-0Ly/mKc3prAhxBSY5TbmMMDAkUHYMOxdmUu/mNcFvB6A53C24x5Rsu1Vtrik9bKPKwgd75sZUhV9ZsWerPbuJQ==
@@ -8200,6 +8216,26 @@ stylelint-order@^3.1.1:
     postcss "^7.0.17"
     postcss-sorting "^5.0.1"
 
+stylelint-order@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-4.1.0.tgz#692d05b7d0c235ac66fcf5ea1d9e5f08a76747f6"
+  integrity sha512-sVTikaDvMqg2aJjh4r48jsdfmqLT+nqB1MOsaBnvM3OwLx4S+WXcsxsgk5w18h/OZoxZCxuyXMh61iBHcj9Qiw==
+  dependencies:
+    lodash "^4.17.15"
+    postcss "^7.0.31"
+    postcss-sorting "^5.0.1"
+
+stylelint-scss@^3.13.0:
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.18.0.tgz#8f06371c223909bf3f62e839548af1badeed31e9"
+  integrity sha512-LD7+hv/6/ApNGt7+nR/50ft7cezKP2HM5rI8avIdGaUWre3xlHfV4jKO/DRZhscfuN+Ewy9FMhcTq0CcS0C/SA==
+  dependencies:
+    lodash "^4.17.15"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
 stylelint@^13.6.1:
   version "13.6.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.6.1.tgz#cc1d76338116d55e8ff2be94c4a4386c1239b878"