feat(style): add sass

2021-08-07 10:33:58 +00:00 · 2021-08-07 10:33:58 +00:00 · 4c7daf9349
parent f6d4e2cbee
commit 4c7daf9349
12 changed files with 268 additions and 156 deletions
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -18,6 +18,7 @@ module.exports = {
        icon: "src/images/icon.png", // This path is relative to the root of the site.
      }
    },
-    "gatsby-plugin-transition-link"
+    "gatsby-plugin-transition-link",
+    "gatsby-plugin-sass"
  ]
 }
--- a/package.json
+++ b/package.json
@ -19,12 +19,14 @@
    "gatsby": "3.11.0",
    "gatsby-plugin-manifest": "3.11.0",
    "gatsby-plugin-react-helmet": "4.11.0",
+    "gatsby-plugin-sass": "^4.11.0",
    "gatsby-plugin-transition-link": "1.20.5",
    "gsap": "3.7.1",
    "prop-types": "15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-helmet": "6.1.0",
-    "react-notifications": "1.7.2"
+    "react-notifications": "1.7.2",
+    "sass": "^1.37.5"
  }
 }
--- a/src/components/seo.js
+++ b/src/components/seo.js
@ -52,7 +52,7 @@ function Seo(props) {
 Seo.defaultProps = {
  lang: "en",
  meta: [],
-  embedColor: "#282c34"
+  embedColor: "#9517cf"
 }

 Seo.propTypes = {
--- a/src/css/base.css
+++ b/src/css/base.css
@ -1,51 +0,0 @@
-body {
-  color: #fff;
-  background-color: #111;
-
-  margin: 0;
-  padding: 96px;
-  text-align: center;
-
-  font-family: "-apple-system, Roboto, sans-serif, serif";
-}
-
-a, .link {
-  color: #61dafb;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.url-link {
-  display: inline-block;
-  padding: 10px;
-}
-
-.url-link a {
-  color: rgba(255, 255, 255, 0.712);
-}
-
-button {
-  margin-top: 2rem;
-  padding: 10px 30px;
-  font-weight: bold;
-  border: 2px solid white;
-  color: white;
-  border-radius: 100px;
-  background: transparent;
-  transition: all 1000ms;
-}
-
-.red-button {
-  border: 2px solid red;
-  color: red;
-}
-
-.yellow-button {
-  border: 2px solid greenyellow;
-  color: greenyellow;
-}
-
-.blue-buton {
-  border: 2px solid blue;
-  color: blue;
-}
--- a/src/css/base.sass
+++ b/src/css/base.sass
@ -0,0 +1,45 @@
+$fonts: "-apple-system, Roboto, sans-serif, serif"
+
+body
+  color: #fff
+  background-color: #111
+
+  margin: 0
+  padding: 96px
+  text-align: center
+
+  font-family: $fonts
+
+a, .link
+  color: #61dafb
+  cursor: pointer
+  text-decoration: none
+
+  .url-link
+    color: rgba(255, 255, 255, 0.712)
+
+.url-link
+  display: inline-block
+  padding: 10px
+
+button
+  margin-top: 2rem
+  padding: 10px 30px
+  font-weight: bold
+  border: 2px solid white
+  color: white
+  border-radius: 100px
+  background: transparent
+  transition: all 1000ms
+
+.red-button
+  border: 2px solid red
+  color: red
+
+.yellow-button
+  border: 2px solid greenyellow
+  color: greenyellow
+
+.blue-buton
+  border: 2px solid blue
+  color: blue
--- a/src/css/url.css
+++ b/src/css/url.css
@ -1,73 +0,0 @@
-form {
-  --text-color: #afafaf;
-}
-
-.input {
-  outline: none;
-  border: none;
-  overflow: hidden;
-  margin: 0;
-  width: 100%;
-  padding: 0.25rem 0;
-  background: none;
-  color: white;
-  font-size: 1.2em;
-  font-weight: bold;
-  transition: border 500ms;
-}
-
-.input:valid {
-  color: yellowgreen;
-}
-
-.input:invalid {
-  color: orangered;
-}
-
-/* Border animation */
-.field::after {
-  content: "";
-  position: relative;
-  display: block;
-  height: 4px;
-  width: 100%;
-  background: #d16dff;
-  transform: scaleX(0);
-  transform-origin: 0%;
-  opacity: 0;
-  transition: all 500ms ease;
-  top: 2px;
-}
-
-.field:focus-within {
-  border-color: transparent;
-}
-
-.field:focus-within::after {
-  transform: scaleX(1);
-  opacity: 1;
-}
-
-/* Label animation */
-.label {
-  z-index: -1;
-  position: absolute;
-  transform: translateY(-2rem);
-  transform-origin: 0%;
-  transition: transform 400ms;
-}
-
-.field:focus-within .label,
-.input:not(:placeholder-shown) + .label {
-  transform: scale(0.8) translateY(-5rem);
-  opacity: 1;
-}
-
-button:disabled {
-  border-color: var(--text-color);
-  color: var(--text-color);
-}
-
-button:hover {
-  cursor: pointer;
-}
--- a/src/css/url.sass
+++ b/src/css/url.sass
@ -0,0 +1,62 @@
+form
+  --text-color: #afafaf
+
+.input
+  outline: none
+  border: none
+  overflow: hidden
+  margin: 0
+  width: 100%
+  padding: 0.25rem 0
+  background: none
+  color: white
+  font-size: 1.2em
+  font-weight: bold
+  transition: border 500ms
+
+.input:valid
+  color: yellowgreenf
+
+.input:invalid
+  color: orangered
+
+/* Border animation */
+.field::after
+  content: ""
+  position: relative
+  display: block
+  height: 4px
+  width: 100%
+  background: #d16dff
+  transform: scaleX(0)
+  transform-origin: 0%
+  opacity: 0
+  transition: all 500ms ease
+  top: 2px
+
+.field:focus-within
+  border-color: transparent
+
+.field:focus-within::after
+  transform: scaleX(1)
+  opacity: 1
+
+/* Label animation */
+.label
+  z-index: -1
+  position: absolute
+  transform: translateY(-2rem)
+  transform-origin: 0%
+  transition: transform 400ms
+
+.field:focus-within .label,
+.input:not(:placeholder-shown) + .label
+  transform: scale(0.8) translateY(-5rem)
+  opacity: 1
+
+button:disabled
+  border-color: var(--text-color)
+  color: var(--text-color)
+
+button:hover
+  cursor: pointer
--- a/src/pages/404.js
+++ b/src/pages/404.js
@ -3,7 +3,7 @@ import AniLink from "gatsby-plugin-transition-link/AniLink"

 import Seo from "../components/seo"

-import "../css/base.css"
+import "../css/base.sass"

 const NotFoundPage = () => {
  return (
--- a/src/pages/add.js
+++ b/src/pages/add.js
@ -6,8 +6,8 @@ import 'react-notifications/lib/notifications.css'
 import Seo from "../components/seo"
 import axios from "../axios"

-import "../css/base.css"
-import "../css/url.css"
+import "../css/base.sass"
+import "../css/url.sass"

 const AddURLPage = () => {
  const [url, setURL] = React.useState('')
--- a/src/pages/delete.js
+++ b/src/pages/delete.js
@ -6,8 +6,8 @@ import 'react-notifications/lib/notifications.css'
 import Seo from "../components/seo"
 import axios from "../axios"

-import "../css/base.css"
-import "../css/url.css"
+import "../css/base.sass"
+import "../css/url.sass"

 const DeleteURLPage = () => {
  const [url, setURL] = React.useState('')
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -4,7 +4,7 @@ import { NotificationContainer } from "react-notifications"

 import Seo from "../components/seo"

-import "../css/base.css"
+import "../css/base.sass"

 const LoginPage = () => {
  return (
--- a/yarn.lock
+++ b/yarn.lock
@ -1927,6 +1927,14 @@ address@1.1.2, address@^1.0.1:
  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==

+adjust-sourcemap-loader@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz#5ae12fb5b7b1c585e80bbb5a63ec163a1a45e61e"
+  integrity sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==
+  dependencies:
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
 aggregate-error@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@ -2107,6 +2115,11 @@ aria-query@^4.2.2:
    "@babel/runtime" "^7.10.2"
    "@babel/runtime-corejs3" "^7.10.2"

+arity-n@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
+  integrity sha1-2edrEXM+CFacCEeuezmyhgswt0U=
+
 arr-diff@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@ -2719,7 +2732,7 @@ camel-case@4.1.2:
    pascal-case "^3.1.2"
    tslib "^2.0.3"

-camelcase@^5.0.0, camelcase@^5.3.1:
+camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@ -2799,6 +2812,21 @@ chardet@^0.7.0:
  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==

+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.1.8:
  version "2.1.8"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@ -2818,21 +2846,6 @@ chokidar@^2.1.8:
  optionalDependencies:
    fsevents "^1.2.7"

-chokidar@^3.4.2, chokidar@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
 chownr@^1.1.1:
  version "1.1.4"
  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@ -3042,6 +3055,13 @@ component-emitter@^1.2.1, component-emitter@~1.3.0:
  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==

+compose-function@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
+  integrity sha1-ntZ18TzFRQHTCVCkhv9qe6OrGF8=
+  dependencies:
+    arity-n "^1.0.4"
+
 compressible@~2.0.16:
  version "2.0.18"
  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@ -3141,6 +3161,18 @@ convert-hrtime@^3.0.0:
  resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-3.0.0.tgz#62c7593f5809ca10be8da858a6d2f702bcda00aa"
  integrity sha512-7V+KqSvMiHp8yWDuwfww06XleMWVVB9b9tURBx+G7UTADuo5hYPuowKloz4OzOqbPezxgo+fdQ1522WzPG4OeA==

+convert-source-map@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^0.3.3:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
+  integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
+
 convert-source-map@^1.7.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@ -3366,6 +3398,16 @@ css.escape@^1.5.1:
  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=

+css@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssesc@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@ -3837,6 +3879,11 @@ emoji-regex@^9.0.0:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
 emojis-list@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@ -3987,7 +4034,7 @@ es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@
    es6-symbol "~3.1.3"
    next-tick "~1.0.0"

-es6-iterator@^2.0.3, es6-iterator@~2.0.3:
+es6-iterator@2.0.3, es6-iterator@^2.0.3, es6-iterator@~2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
@ -4909,6 +4956,15 @@ gatsby-plugin-react-helmet@4.11.0:
  dependencies:
    "@babel/runtime" "^7.14.6"

+gatsby-plugin-sass@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sass/-/gatsby-plugin-sass-4.11.0.tgz#a17b952d29364727250e7ea7e97c03249c547121"
+  integrity sha512-MTO+f+rf31P3HssQcdYPiVkGx6MssV1uTq9GzMtbmlpGDiLie0skzAkP98P5EvvJ9lO7pdGMFHOLUrtUs8YIDg==
+  dependencies:
+    "@babel/runtime" "^7.14.6"
+    resolve-url-loader "^3.1.2"
+    sass-loader "^10.1.1"
+
 gatsby-plugin-transition-link@1.20.5:
  version "1.20.5"
  resolved "https://registry.yarnpkg.com/gatsby-plugin-transition-link/-/gatsby-plugin-transition-link-1.20.5.tgz#c4e8ca7b69dee029436b67964f8915f2a46090ee"
@ -6733,6 +6789,15 @@ loader-runner@^4.2.0:
  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==

+loader-utils@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 loader-utils@2.0.0, loader-utils@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
@ -8417,6 +8482,15 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==

+postcss@7.0.36:
+  version "7.0.36"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
+  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 postcss@^8.2.15, postcss@^8.2.9, postcss@^8.3.5:
  version "8.3.6"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
@ -8935,6 +9009,11 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

+regex-parser@^2.2.11:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
+  integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
+
 regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
@ -9134,6 +9213,22 @@ resolve-from@^4.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==

+resolve-url-loader@^3.1.2:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
+  integrity sha512-D3sQ04o0eeQEySLrcz4DsX3saHfsr8/N6tfhblxgZKXxMT2Louargg12oGNfoTRLV09GXhVUe5/qgA5vdgNigg==
+  dependencies:
+    adjust-sourcemap-loader "3.0.0"
+    camelcase "5.3.1"
+    compose-function "3.0.3"
+    convert-source-map "1.7.0"
+    es6-iterator "2.0.3"
+    loader-utils "1.2.3"
+    postcss "7.0.36"
+    rework "1.0.1"
+    rework-visit "1.0.0"
+    source-map "0.6.1"
+
 resolve-url@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@ -9185,6 +9280,19 @@ reusify@^1.0.4:
  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==

+rework-visit@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
+  integrity sha1-mUWygD8hni96ygCtuLyfZA+ELJo=
+
+rework@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
+  integrity sha1-MIBqhBNCtUUQqkEQhQzUhTQUSqc=
+  dependencies:
+    convert-source-map "^0.3.3"
+    css "^2.0.0"
+
 rgb-regex@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
@ -9250,6 +9358,24 @@ safe-regex@^1.1.0:
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

+sass-loader@^10.1.1:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
+  integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
+sass@^1.37.5:
+  version "1.37.5"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c"
+  integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 scheduler@^0.20.2:
  version "0.20.2"
  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@ -9643,7 +9769,7 @@ source-map-js@^0.6.2:
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==

-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
  version "0.5.3"
  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
@ -9667,6 +9793,11 @@ source-map-url@^0.4.0:
  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==

+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@0.7.3, source-map@^0.7.3, source-map@~0.7.2:
  version "0.7.3"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@ -9677,11 +9808,6 @@ source-map@^0.5.0, source-map@^0.5.6:
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=

-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 spdx-correct@^3.0.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"