Port to TypeScript

gatsby-config.js

@@ -116,6 +116,13 @@ module.exports = {
         sameAs: extConfig.sameAs,
     },
     plugins: [
+        {
+            resolve: `gatsby-plugin-typescript`,
+            options: {
+                isTSX: true,
+                allExtensions: true,
+            },
+        },
         `gatsby-plugin-remove-serviceworker`,
         `gatsby-plugin-eslint`,
         `gatsby-plugin-image`,
@@ -133,7 +140,7 @@ module.exports = {
         {
             resolve: `gatsby-plugin-remote-images`,
             options: {
-                nodeType: "SocialsJson",
+                nodeg: "SocialsJson",
                 imagePath: "image",
             },
         },

gatsby-node.js

@@ -12,7 +12,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     activity.start();
     activity.setStatus("Sourcing data for pages...");
 
-    const projectTemplate = path.resolve(`src/templates/project.js`);
+    const projectTemplate = path.resolve(`src/templates/project.tsx`);
 
     const result = await graphql(`
         query AllPagesQuery {
@@ -78,9 +78,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         activity.setStatus("Generating blog pages...");
 
         const blogListingTemplate = path.resolve(
-            `src/templates/blogListing.js`
+            `src/templates/blogListing.tsx`
         );
-        const blogTemplate = path.resolve(`src/templates/blogPost.js`);
+        const blogTemplate = path.resolve(`src/templates/blogPost.tsx`);
 
         reporter.info("Creating blog listings...");
 

package.json

@@ -14,7 +14,8 @@
         "prettier": "npx prettier --write .",
         "serve": "gatsby serve",
         "clean": "gatsby clean",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "tscss": "typed-scss-modules src --watch"
     },
     "license": "Apache-2.0",
     "dependencies": {
@@ -24,6 +25,7 @@
         "@icons-pack/react-simple-icons": "4.6.1",
         "@mdx-js/mdx": "1.6.22",
         "@mdx-js/react": "1.6.22",
+        "@types/react-dom": "^17.0.11",
         "animejs": "3.2.1",
         "babel-plugin-i18next-extract": "0.8.3",
         "gatsby": "4.6.1",
@@ -45,6 +47,7 @@
         "gatsby-plugin-sass": "5.6.0",
         "gatsby-plugin-sharp": "4.6.0",
         "gatsby-plugin-sitemap": "5.6.0",
+        "gatsby-plugin-typescript": "^4.6.0",
         "gatsby-remark-copy-linked-files": "5.6.0",
         "gatsby-remark-images": "6.6.0",
         "gatsby-source-filesystem": "4.6.0",
@@ -62,6 +65,7 @@
         "react-i18next": "11.15.3",
         "sass": "1.49.7",
         "tsparticles": "1.39.3",
+        "typed-scss-modules": "^5.0.0",
         "utterances-react": "0.1.3"
     },
     "devDependencies": {

src/components/languageSwitcher.module.scss.d.ts

@@ -0,0 +1,3 @@
+export const languageModal: string;
+export const languageModalInner: string;
+export const modalCloseLink: string;

src/components/languageSwitcher.tsx

@@ -3,7 +3,7 @@ import { Link, Trans, useI18next } from "gatsby-plugin-react-i18next";
 
 import * as styles from "./languageSwitcher.module.scss";
 
-export default function LanguageSwitcher() {
+const LanguageSwitcher = () => {
     const { languages, originalPath } = useI18next();
 
     return (
@@ -33,3 +33,5 @@ export default function LanguageSwitcher() {
         </div>
     );
 }
+
+export default LanguageSwitcher

src/components/navigation.module.scss.d.ts

@@ -0,0 +1,11 @@
+export const active: string;
+export const close: string;
+export const flexSpacer: string;
+export const hamburger: string;
+export const homeBar: string;
+export const homeBarTransparent: string;
+export const inner: string;
+export const logo: string;
+export const offscreenNav: string;
+export const topBar: string;
+export const topBarInner: string;

src/components/navigation.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-undef */
 import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
 import { graphql, StaticQuery } from "gatsby";
 
@@ -9,7 +8,11 @@ import { Fade as Hamburger } from "hamburger-react";
 import OffScreenNav from "./offscreenNav";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
-const Navigation = ({ isHome }) => {
+type NavigationProps = {
+    isHome?: boolean
+}
+
+const Navigation = ({ isHome }: NavigationProps) => {
     let [atTop, setAtTop] = useState(false);
     const [offscreenNavActive, setOffscreenNavActive] = useState(false);
     const { t } = useTranslation();
@@ -117,8 +120,4 @@ const Navigation = ({ isHome }) => {
     );
 };
 
-Navigation.propTypes = {
-    isHome: PropTypes.bool.isRequired,
-};
-
 export default Navigation;

src/components/offscreenNav.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-undef */
 import React from "react";
-import PropTypes from "prop-types";
 import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
 import { createPortal } from "react-dom";
 
@@ -8,7 +7,12 @@ import * as styles from "./navigation.module.scss";
 import { X } from "lucide-react";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
-const OffScreenNav = ({ active, close }) => {
+type OffScreenNavProps = {
+    active: boolean,
+    close: () => void
+}
+
+const OffScreenNav = ({ active, close }: OffScreenNavProps) => {
     const { t } = useTranslation();
     const { modules } = useSiteMetadata();
 
@@ -56,9 +60,4 @@ const OffScreenNav = ({ active, close }) => {
     );
 };
 
-OffScreenNav.propTypes = {
-    close: PropTypes.func.isRequired,
-    active: PropTypes.bool.isRequired,
-};
-
 export default OffScreenNav;

src/components/seo.tsx

@@ -1,12 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Helmet } from "gatsby-plugin-react-i18next";
 import { useStaticQuery, graphql } from "gatsby";
 import { useLocation } from "@reach/router";
 import { useTranslation } from "gatsby-plugin-react-i18next";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
-function SEO({ description, meta, title, speakable, image, children }) {
+type SEOProps = {
+    description?: string,
+    meta?: any[],
+    title: string,
+    speakable?: any,
+    image?: string
+}
+
+function SEO({ description, meta, title, speakable, image, children }: React.PropsWithChildren<SEOProps>) {
     const { t } = useTranslation();
     const { site } = useStaticQuery(
         graphql`
@@ -140,13 +147,4 @@ SEO.defaultProps = {
     description: ``,
 };
 
-SEO.propTypes = {
-    description: PropTypes.string,
-    meta: PropTypes.arrayOf(PropTypes.object),
-    title: PropTypes.string.isRequired,
-    speakable: PropTypes.any,
-    image: PropTypes.string,
-    children: PropTypes.any,
-};
-
 export default SEO;

src/layouts/default.js

@@ -1,69 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Navigation from "../components/navigation";
-import SEO from "../components/seo";
-
-import "./default.scss";
-import { Link, Trans } from "gatsby-plugin-react-i18next";
-import LanguageSwitcher from "../components/languageSwitcher";
-
-class Layout extends React.Component {
-    render() {
-        return (
-            <>
-                <SEO
-                    description={this.props.description}
-                    lang={this.props.lang}
-                    meta={this.props.meta}
-                    title={this.props.title}
-                    image={this.props.image}
-                    speakable={this.props.speakable}
-                >
-                    {this.props.seoAdditional ?? null}
-                </SEO>
-                <Navigation isHome={this.props.transparentTopbar} />
-                <div id="content" role="main">
-                    {this.props.children}
-                </div>
-                <footer role="contentinfo">
-                    CC-BY 4.0 Kevin Kandlbinder,{" "}
-                    <Link to="/legal/about" className="spf-link">
-                        <Trans i18nKey="layout.imprint">Imprint</Trans>
-                    </Link>{" "}
-                    |{" "}
-                    <Link to="/legal/datasec" className="spf-link">
-                        <Trans i18nKey="layout.datasec">Data Protection</Trans>
-                    </Link>{" "}
-                    |{" "}
-                    <Link to="/legal/disclaimer" className="spf-link">
-                        <Trans i18nKey="layout.disclaimer">Disclaimer</Trans>
-                    </Link>{" "}
-                    | <a href="#languageChooser">Language</a>
-                </footer>
-
-                <LanguageSwitcher />
-            </>
-        );
-    }
-}
-
-Layout.defaultProps = {
-    module: `none`,
-    meta: [],
-    description: ``,
-    transparentTopbar: false,
-};
-
-Layout.propTypes = {
-    description: PropTypes.string,
-    lang: PropTypes.string,
-    meta: PropTypes.arrayOf(PropTypes.object),
-    title: PropTypes.string.isRequired,
-    transparentTopbar: PropTypes.bool,
-    children: PropTypes.any.isRequired,
-    seoAdditional: PropTypes.any,
-    image: PropTypes.string,
-    speakable: PropTypes.any,
-};
-
-export default Layout;

src/layouts/default.scss.d.ts

@@ -0,0 +1,6 @@
+export const content: string;
+export const flexSpacer: string;
+export const gatsby: string;
+export const gatsbyFocusWrapper: string;
+export const profile: string;
+export const section: string;

src/layouts/default.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Navigation from "../components/navigation";
+import SEO from "../components/seo";
+import "./default.scss";
+import { Link, Trans } from "gatsby-plugin-react-i18next";
+import LanguageSwitcher from "../components/languageSwitcher";
+
+type LayoutProps = {
+    description?: string,
+    meta?: any[],
+    title: string,
+    transparentTopbar?: boolean,
+    seoAdditional?: any,
+    image?: string,
+    speakable?: any
+}
+
+const Layout = ({description, meta, title, image, speakable, seoAdditional, transparentTopbar, children}: React.PropsWithChildren<LayoutProps>) => {
+    return (
+        <>
+            <SEO
+                description={description}
+                meta={meta}
+                title={title}
+                image={image}
+                speakable={speakable}
+            >
+                {seoAdditional ?? null}
+            </SEO>
+            <Navigation isHome={transparentTopbar} />
+            <div id="content" role="main">
+                {children}
+            </div>
+            <footer role="contentinfo">
+                CC-BY 4.0 Kevin Kandlbinder,{" "}
+                <Link to="/legal/about" className="spf-link">
+                    <Trans i18nKey="layout.imprint">Imprint</Trans>
+                </Link>{" "}
+                |{" "}
+                <Link to="/legal/datasec" className="spf-link">
+                    <Trans i18nKey="layout.datasec">Data Protection</Trans>
+                </Link>{" "}
+                |{" "}
+                <Link to="/legal/disclaimer" className="spf-link">
+                    <Trans i18nKey="layout.disclaimer">Disclaimer</Trans>
+                </Link>{" "}
+                | <a href="#languageChooser">Language</a>
+            </footer>
+
+            <LanguageSwitcher />
+        </>
+    );
+}
+
+Layout.defaultProps = {
+    module: `none`,
+    meta: [],
+    description: ``,
+    transparentTopbar: false,
+};
+
+export default Layout;

src/pages/about.tsx

@@ -187,6 +187,7 @@ const AboutPage = (props) => {
                                                 }
                                                 objectFit="cover"
                                                 style={{ height: "100%" }}
+                                                alt={project.name}
                                             ></GatsbyImage>
                                         </div>
                                         <div

src/pages/donate.module.scss.d.ts

@@ -0,0 +1,3 @@
+export const donateButton: string;
+export const priceAmount: string;
+export const sronly: string;

src/pages/donate.tsx

@@ -93,7 +93,7 @@ const DonatePage = (props) => {
                             step="1"
                             value={amount}
                             onChange={(ev) => {
-                                setAmount(ev.target.value);
+                                setAmount(parseInt(ev.target.value));
                             }}
                             name="priceInput"
                             id="priceInput"

src/pages/friends.module.scss.d.ts

@@ -0,0 +1,9 @@
+export const contactLink: string;
+export const contactLinks: string;
+export const friendBg: string;
+export const friendBio: string;
+export const friendImage: string;
+export const friendName: string;
+export const friendProfile: string;
+export const friendsList: string;
+export const friendTitle: string;

src/pages/friends.tsx

@@ -77,6 +77,7 @@ const FriendsPage = ({ data }) => {
                                                 image={getImage(
                                                     friend.localImage
                                                 )}
+                                                alt={friend.name}
                                             ></GatsbyImage>
                                         </div>
                                         <span

src/pages/index.module.scss.d.ts

@@ -0,0 +1,38 @@
+export const aboutSection: string;
+export const aboutText: string;
+export const amazonAlexaSection: string;
+export const birth: string;
+export const careerContainer: string;
+export const contactLink: string;
+export const contactLinks: string;
+export const creditSection: string;
+export const ctaAccent: string;
+export const date: string;
+export const description: string;
+export const donationSection: string;
+export const entry: string;
+export const entryContent: string;
+export const entryTypeeducation: string;
+export const hello: string;
+export const heroSection: string;
+export const heroSectionBg: string;
+export const heroSectionBgOver: string;
+export const hireMeSection: string;
+export const landingCta: string;
+export const mainline: string;
+export const name: string;
+export const profile: string;
+export const profileCard: string;
+export const profileImage: string;
+export const profileImageDummy: string;
+export const seeMoreButton: string;
+export const skill: string;
+export const skillFramework: string;
+export const skillLanguage: string;
+export const skillList: string;
+export const skillOs: string;
+export const skillPlatform: string;
+export const skillProgram: string;
+export const skills: string;
+export const spacer: string;
+export const title: string;

src/pages/index.tsx

@@ -124,6 +124,7 @@ const IndexPage = (props) => {
                             width={250}
                             height={350}
                             placeholder="blurred"
+                            alt="Kevin Kandlbinder"
                         ></StaticImage>
                     </div>
                     <div className={styles.profileImageDummy}></div>

src/pages/projects.module.scss.d.ts

@@ -0,0 +1,8 @@
+export const projectCard: string;
+export const projectCardBg: string;
+export const projectCardCta: string;
+export const projectCardCtaContainer: string;
+export const projectCardImage: string;
+export const projectCardMeta: string;
+export const projectCardTitle: string;
+export const projectList: string;

src/pages/projects.tsx

@@ -102,6 +102,7 @@ const ProjectsPage = ({ data }) => {
                                                 }
                                                 objectFit="cover"
                                                 style={{ height: "100%" }}
+                                                alt={project.name}
                                             ></GatsbyImage>
                                         </div>
                                         <div className={styles.projectCardMeta}>

src/pages/social.module.scss.d.ts

@@ -0,0 +1,6 @@
+export const socialBg: string;
+export const socialCard: string;
+export const socialImage: string;
+export const socialList: string;
+export const socialName: string;
+export const socialUsername: string;

src/pages/social.tsx

@@ -65,6 +65,7 @@ const SocialPage = ({ data }) => {
                                                 image={getImage(
                                                     social.localImage
                                                 )}
+                                                alt={social.platformName}
                                             ></GatsbyImage>
                                         </div>
                                         <span className={styles.socialName}>

src/templates/blogListing.module.scss.d.ts

@@ -0,0 +1,13 @@
+export const excerpt: string;
+export const list: string;
+export const meta: string;
+export const moreSoon: string;
+export const pageSwitcher: string;
+export const post: string;
+export const sectionBacklink: string;
+export const sectionBg: string;
+export const sectionCard: string;
+export const sectionImage: string;
+export const sectionList: string;
+export const sectionName: string;
+export const title: string;

src/templates/blogListing.tsx

@@ -43,7 +43,7 @@ const BlogListing = ({ data, pageContext }) => {
                                 >
                                     <div className={styles.sectionImage}>
                                         <div className={styles.sectionBg}>
-                                            <StaticImage src="https://source.unsplash.com/gf8e6XvG_3E/300x150"></StaticImage>
+                                            <StaticImage src="https://source.unsplash.com/gf8e6XvG_3E/300x150" alt={t("blog.section.scambox.name")}></StaticImage>
                                         </div>
                                         <span className={styles.sectionName}>
                                             {t("blog.section.scambox.name")}

src/templates/blogPost.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const chatBox: string;
+export const meta: string;
+export const noticeBox: string;
+export const postSection: string;

src/templates/project.module.scss.d.ts

@@ -0,0 +1,12 @@
+export const fa: string;
+export const fab: string;
+export const fal: string;
+export const far: string;
+export const fas: string;
+export const headerBackground: string;
+export const headerInner: string;
+export const headerPlaceholder: string;
+export const linkList: string;
+export const projectAbout: string;
+export const projectHeader: string;
+export const projectLinks: string;

src/templates/project.tsx

@@ -79,6 +79,7 @@ const ProjectTemplate = ({ data }) => {
                             }
                             style={{ width: "100%", height: "100%" }}
                             objectFit="cover"
+                            alt={projectName}
                         ></GatsbyImage>
                     </div>
                     <header>

yarn.lock

@@ -2291,6 +2291,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^17.0.11":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
+  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.24"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.24.tgz#7e1b3f78d0fc53782543f9bce6d949959a5880bd"
@@ -2728,6 +2735,11 @@ ansi-regex@^6.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
   integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
 
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -3557,6 +3569,17 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
 chalk@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@@ -3683,6 +3706,21 @@ cheerio@^1.0.0-rc.10:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chokidar@^3.3.0:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  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"
@@ -4226,6 +4264,18 @@ css-minimizer-webpack-plugin@^2.0.0:
     serialize-javascript "^5.0.1"
     source-map "^0.6.1"
 
+css-modules-loader-core@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
+  integrity sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=
+  dependencies:
+    icss-replace-symbols "1.1.0"
+    postcss "6.0.1"
+    postcss-modules-extract-imports "1.1.0"
+    postcss-modules-local-by-default "1.2.0"
+    postcss-modules-scope "1.1.0"
+    postcss-modules-values "1.3.0"
+
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -4267,6 +4317,14 @@ css-selector-parser@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
   integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
 
+css-selector-tokenizer@^0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
+  integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -4742,6 +4800,14 @@ dot-case@^2.1.0:
   dependencies:
     no-case "^2.2.0"
 
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5558,6 +5624,11 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
   integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.11.1, fastq@^1.13.0, fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
@@ -6679,7 +6750,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.2.0:
+glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
@@ -6934,6 +7005,13 @@ hard-rejection@^2.1.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -6944,6 +7022,11 @@ has-cors@1.1.0:
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
   integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
 
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -7245,6 +7328,11 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -9562,6 +9650,14 @@ param-case@^2.1.0:
   dependencies:
     no-case "^2.2.0"
 
+param-case@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -9778,6 +9874,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 peek-readable@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-4.0.1.tgz#9a045f291db254111c3412c1ce4fec27ddd4d202"
@@ -9965,11 +10069,26 @@ postcss-minify-selectors@^5.1.0:
     alphanum-sort "^1.0.2"
     postcss-selector-parser "^6.0.5"
 
+postcss-modules-extract-imports@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
+  integrity sha1-thTJcgvmgW6u41+zpfqh26agXds=
+  dependencies:
+    postcss "^6.0.1"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
+postcss-modules-local-by-default@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
 postcss-modules-local-by-default@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
@@ -9979,6 +10098,14 @@ postcss-modules-local-by-default@^4.0.0:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
+postcss-modules-scope@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
 postcss-modules-scope@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
@@ -9986,6 +10113,14 @@ postcss-modules-scope@^3.0.0:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
+postcss-modules-values@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
 postcss-modules-values@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
@@ -10114,6 +10249,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@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
+  integrity sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 postcss@7.0.36:
   version "7.0.36"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
@@ -10123,6 +10267,15 @@ postcss@7.0.36:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^6.0.1:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 postcss@^8.2.15, postcss@^8.2.9:
   version "8.3.7"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.7.tgz#ec88563588c8da8e58e7226f7633b51ae221eeda"
@@ -10209,7 +10362,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -10884,6 +11037,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reserved-words@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
+  integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -11945,7 +12103,19 @@ sudo-prompt@^8.2.0:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
   integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
 
-supports-color@^5.3.0:
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -12378,6 +12548,22 @@ type@^2.5.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d"
   integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
 
+typed-scss-modules@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/typed-scss-modules/-/typed-scss-modules-5.0.0.tgz#23ecaf2c6e2ab49e65a08f68f58b3ce5b6b120f1"
+  integrity sha512-etRLDmalISFpUaLKAbwyVL3xP5riEesByBYF9BBg5zKbgE/7L15xxwYshiYsFvvKK0T5+1DXBBbByrbi+ppD7A==
+  dependencies:
+    camelcase "^5.0.0"
+    chalk "^3.0.0"
+    chokidar "^3.3.0"
+    css-modules-loader-core "^1.1.0"
+    glob "^7.1.6"
+    param-case "^3.0.2"
+    path "^0.12.7"
+    reserved-words "^0.1.2"
+    slash "^3.0.0"
+    yargs "^15.0.2"
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -12771,6 +12957,13 @@ util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
@@ -13369,7 +13562,7 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs@^15.4.1:
+yargs@^15.0.2, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
   integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==