chore: fix lint for stylelint 14

.vscode/extensions.json

@@ -8,7 +8,8 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "lokalise.i18n-ally",
-    "ryanluker.vscode-coverage-gutters"
+    "ryanluker.vscode-coverage-gutters",
+    "stylelint.vscode-stylelint"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

.vscode/settings.json

@@ -5,5 +5,6 @@
   "vetur.format.defaultFormatter.html": "prettier",
   "i18n-ally.sourceLanguage": "en-US",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "i18n-ally.localesPaths": ["src/locales"]
+  "i18n-ally.localesPaths": ["src/locales"],
+  "stylelint.validate": ["vue"]
 }

package.json

@@ -78,10 +78,8 @@
     "@nuxtjs/eslint-config": "8.0.0",
     "@nuxtjs/eslint-config-typescript": "8.0.0",
     "@nuxtjs/eslint-module": "3.0.2",
-    "@nuxtjs/stylelint-module": "4.1.0",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/vue": "5.8.2",
-    "@types/body-scroll-lock": "3.1.0",
     "@types/cookie": "0.4.1",
     "@types/dompurify": "2.3.2",
     "@types/he": "1.1.2",
@@ -120,9 +118,11 @@
     "jest": "27.4.5",
     "jest-canvas-mock": "2.3.1",
     "lint-staged": "12.1.4",
+    "postcss-html": "1.3.0",
     "prettier": "2.5.1",
     "stylelint": "14.2.0",
     "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-recommended-vue": "1.1.0",
     "stylelint-config-standard": "24.0.0",
     "ts-jest": "27.1.2",
     "vue-axe": "2.4.4"

src/components/Forms/LoginForm.vue

@@ -119,10 +119,3 @@ export default Vue.extend({
   }
 });
 </script>
-
-<style scoped>
-/* HACK: Snackbar positioning -- See: https://github.com/vuetifyjs/vuetify/issues/11781#issuecomment-655689025 */
-div.v-snack:not(.v-snack--absolute) {
-  height: 100%;
-}
-</style>

src/components/Players/HlsPlayer.vue

@@ -427,7 +427,7 @@ export default Vue.extend({
 /* stylelint-disable-next-line */
 ::cue {
   background-color: transparent;
-  text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
+  text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 100%);
   font-family: inherit;
   line-height: normal; /* Restore value. See -webkit-media-text-track-container 'line-height' */
   -webkit-font-smoothing: antialiased;

src/components/System/Snackbar.vue

@@ -37,9 +37,3 @@ export default Vue.extend({
   }
 });
 </script>
-
-<style scoped>
-div.v-snack:not(.v-snack--absolute) {
-  height: 100%;
-}
-</style>

src/nuxt.config.ts

@@ -107,8 +107,6 @@ const config: NuxtConfig = {
    */
   buildModules: [
     '@nuxt/typescript-build',
-    // Doc: https://github.com/nuxt-community/stylelint-module
-    '@nuxtjs/stylelint-module',
     '@nuxtjs/vuetify',
     '@nuxtjs/date-fns'
   ],

stylelint.config.js

@@ -1,9 +1,17 @@
 module.exports = {
   syntax: 'scss',
-  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-prettier',
+    'stylelint-config-recommended-vue'
+  ],
+  customSyntax: 'postcss-html',
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
   rules: {
-    'at-rule-no-unknown': null
+    'at-rule-no-unknown': null,
+    'selector-class-pattern': null,
+    // Firefox does not support the modern syntax. TODO: Revisit at some point
+    'color-function-notation': 'legacy'
   }
 };