chore(config): migrate for css nesting support; enhanced support

.eslintrc.js

@@ -1,63 +1,48 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true,
-        "node": true
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react-hooks/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint", "simple-import-sort"],
+  rules: {
+    indent: ["error", 4],
+    "linebreak-style": ["error", "unix"],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    "eol-last": 1,
+    "no-multiple-empty-lines": ["error", { max: 1, maxEOF: 0 }],
+    "space-unary-ops": [
+      2,
+      {
+        words: true,
+        nonwords: true,
+      },
     ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint",
-        "simple-import-sort",
-    ],
-    "rules": {
-        "indent": [
-            "error",
-            4
-        ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "quotes": [
-            "error",
-            "double"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ],
-        "eol-last": 1,
-        "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
-        "space-unary-ops": [
-            2, {
-                "words": true,
-                "nonwords": true,
-            }
-        ],
-        "no-trailing-spaces": "error",
-        "keyword-spacing": "off",
-        "@typescript-eslint/keyword-spacing": ["error"],
-        "object-curly-spacing": ["error", "always"],
-        "simple-import-sort/imports": "error",
-        "simple-import-sort/exports": "error",
-        "no-unused-vars": "off",
-        "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "warn",
-        "react/no-unescaped-entities": "off",
-    }
+    "no-trailing-spaces": "error",
+    "keyword-spacing": "off",
+    "@typescript-eslint/keyword-spacing": ["error"],
+    "object-curly-spacing": ["error", "always"],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "no-unused-vars": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/no-unescaped-entities": "off",
+  },
 };

.stylelintrc.js

@@ -1,17 +1,14 @@
 module.exports = {
-    extends: [
-        "stylelint-config-standard",
-        "stylelint-config-sass-guidelines"
-    ],
-    defaultSeverity: "warning",
-    rules: {
-        "at-rule-no-unknown": null,
-        "indentation": 4,
-        "max-nesting-depth": 5,
-        "scss/at-rule-no-unknown": null,
-        "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$",
-        "selector-max-compound-selectors": 5,
-        "no-invalid-position-at-import-rule": null,
-        "color-function-notation": "legacy"
-    }
-}
+  extends: ["stylelint-config-sass-guidelines"],
+  defaultSeverity: "warning",
+  rules: {
+    "at-rule-no-unknown": null,
+    "max-nesting-depth": 6,
+    "scss/at-rule-no-unknown": null,
+    "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$",
+    "selector-max-compound-selectors": 5,
+    "no-invalid-position-at-import-rule": null,
+    "function-no-unknown": true,
+    "color-function-notation": "legacy",
+  },
+};

src/components/Arrow/Arrow.scss

@@ -2,31 +2,30 @@
 @use '../../styles/colors';
 
 .arrow {
-    cursor: pointer;
-    fill: colors.$teal;
-    height: 30px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    transform: translateY(-50%);
-    width: 30px;
-    z-index: 2;
+  cursor: pointer;
+  fill: colors.$teal;
+  height: 30px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 30px;
+  z-index: 2;
 
-    @media screen and (max-width: breakpoints.$md) {
-        top: calc(100% + 1.7rem);
-    }
+  @media screen and (max-width: breakpoints.$md) {
+    top: calc(100% + 1.7rem);
+  }
 
-    &--left {
-        left: 5px;
-    }
+  &--left {
+    left: 5px;
+  }
 
-    &--right {
-        left: auto;
-        right: 5px;
-    }
+  &--right {
+    left: auto;
+    right: 5px;
+  }
 
-    &--disabled {
-        cursor: not-allowed;
-        fill: rgba(colors.$teal, 30%);
-    }
+  &--disabled {
+    cursor: not-allowed;
+    fill: rgba(colors.$teal, 30%);
+  }
 }

src/components/Header/Header.scss

@@ -1,19 +1,19 @@
 @use '../../styles/colors';
 
 .header {
-    &-title {
-        font-size: 4rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-        max-width: 40rem;
+  &-title {
+    font-size: 4rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    max-width: 40rem;
 
-        span {
-            color: colors.$secondary;
-        }
+    span {
+      color: colors.$secondary;
     }
+  }
 
-    &-detail {
-        font-size: 1.8rem;
-        margin-top: 0;
-    }
+  &-detail {
+    font-size: 1.8rem;
+    margin-top: 0;
+  }
 }

src/components/Information/Information.scss

@@ -1,7 +1,7 @@
 .information {
-    display: inline-block;
-    height: 1.6rem;
-    margin: 0 1rem;
-    vertical-align: sub;
-    width: 1.6rem;
+  display: inline-block;
+  height: 1.6rem;
+  margin: 0 1rem;
+  vertical-align: sub;
+  width: 1.6rem;
 }