Switch to SCSS, fix CSS custom properties.

2020-08-13 16:19:43 +02:00 · 2020-08-13 16:19:43 +02:00 · ae50137a45
parent 71227e0a44
commit ae50137a45
16 changed files with 255 additions and 214 deletions
--- 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": {
--- a/source/css/libraries.css
+++ b/source/css/libraries.css
@ -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);
-}
--- a/source/css/userscripts.css
+++ b/source/css/userscripts.css
@ -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;
-}
--- a/source/css/userstyles.css
+++ b/source/css/userstyles.css
@ -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;
-}
--- 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>
--- a/source/index.js
+++ b/source/index.js
@ -12,7 +12,8 @@ async function main() {
      '!userscripts.js',
      '!userstyles.js',
      '!userscripts/*',
-      '!userstyles/*'
+      '!userstyles/*',
+      '!scss/*'
    ],
    '../public/',
    {
--- 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>
--- a/source/scss/_variables.scss
+++ b/source/scss/_variables.scss
--- a/source/scss/common.scss
+++ 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;
 }
--- a/source/scss/index.scss
+++ 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);
+}
--- a/source/scss/libraries.scss
+++ 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);
+}
--- a/source/scss/userscripts.scss
+++ 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;
+}
--- a/source/scss/userstyles.scss
+++ 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;
+}
--- 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>
--- 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>
--- 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"