update linters & add stylelint

.eslintrc.js

@@ -11,26 +11,38 @@ module.exports = {
   // https://eslint.org/docs/user-guide/configuring#specifying-parser
   parser: 'vue-eslint-parser',
 
-  // https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq
+  // https://eslint.vuejs.org/user-guide/#faq
   parserOptions: {
-    parser: 'babel-eslint',
-    ecmaVersion: 2018,
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 2022,
     sourceType: 'module'
   },
 
+  overrides: [
+    {
+      files: ['*.json'],
+      parser: 'jsonc-eslint-parser',
+      rules: {
+        'no-tabs': 'off',
+        'comma-spacing': 'off'
+      }
+    }
+  ],
+
   // https://eslint.org/docs/user-guide/configuring#extending-configuration-files
   // order matters: from least important to most important in terms of overriding
   // Prettier + Vue: https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c
   extends: [
     'prettier',
     'eslint:recommended',
     'plugin:vue/recommended',
-    'standard'
+    'standard',
+    'plugin:jsonc/recommended-with-json',
     // 'plugin:vuejs-accessibility/recommended' // uncomment once issues are fixed
   ],
 
   // https://eslint.org/docs/user-guide/configuring#configuring-plugins
-  plugins: ['vue', 'vuejs-accessibility'],
+  plugins: ['vue', 'vuejs-accessibility', 'n', 'unicorn'],
 
   rules: {
     'space-before-function-paren': 'off',
@@ -39,6 +51,7 @@ module.exports = {
     'no-console': ['error', { allow: ['warn', 'error'] }],
     'no-unused-vars': 'warn',
     'no-undef': 'warn',
+    'object-shorthand': 'off',
     'vue/no-template-key': 'warn',
     'vue/no-useless-template-attributes': 'off',
     'vue/multi-word-component-names': 'off',
@@ -47,6 +60,13 @@ module.exports = {
       required: {
         some: ['nesting', 'id']
       }
-    }]
+    }],
+    'n/no-callback-literal': 'warn',
+    'n/no-path-concat': 'warn',
+    'unicorn/better-regex': 'error',
+    'unicorn/no-array-push-push': 'error',
+    'unicorn/prefer-keyboard-event-key': 'error',
+    'unicorn/prefer-regexp-test': 'error',
+    'unicorn/prefer-string-replace-all': 'error'
   }
 }

.stylelintignore

@@ -0,0 +1,7 @@
+src/data/
+src/datastores/
+src/main/
+src/renderer/videoJS.css
+dist/
+static/
+node_modules/

.stylelintrc.json

@@ -0,0 +1,24 @@
+{
+  "plugins": ["stylelint-high-performance-animation", "@double-great/stylelint-a11y"],
+  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    },
+    {
+      "files": ["**/*.css"],
+      "rules": {
+        "a11y/media-prefers-reduced-motion": true,
+        "a11y/no-outline-none": true,
+        "a11y/selector-pseudo-class-focus": true,
+        "a11y/font-size-is-readable": true
+      }
+    }
+  ],
+  "rules": {
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "plugin/no-low-performance-animation-properties": true
+  }
+}

_scripts/webpack.renderer.config.js

@@ -48,7 +48,7 @@ const config = {
         loader: 'vue-loader',
       },
       {
-        test: /\.s(c|a)ss$/,
+        test: /\.scss$/,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -62,11 +62,7 @@ const config = {
           {
             loader: 'sass-loader',
             options: {
-              // eslint-disable-next-line
-              implementation: require('sass'),
-              sassOptions: {
-                indentedSyntax: true
-              }
+              implementation: require('sass')
             }
           },
         ],

_scripts/webpack.web.config.js

@@ -39,7 +39,7 @@ const config = {
         loader: 'vue-loader'
       },
       {
-        test: /\.s(c|a)ss$/,
+        test: /\.scss$/,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -53,11 +53,7 @@ const config = {
           {
             loader: 'sass-loader',
             options: {
-              // eslint-disable-next-line
-              implementation: require('sass'),
-              sassOptions: {
-                indentedSyntax: true
-              }
+              implementation: require('sass')
             }
           },
         ],

lefthook.yml

@@ -1,4 +1,3 @@
-
 # Refer for explanation to following link:
 # https://github.com/evilmartians/lefthook/blob/master/docs/full_guide.md
 pre-commit:
@@ -12,8 +11,6 @@ pre-commit:
       skip:
         - rebase
 
-
-
 # EXAMPLE USAGE
 #
 # pre-push:

package.json

@@ -31,8 +31,15 @@
     "dev": "run-s rebuild:electron dev-runner",
     "dev:web": "node _scripts/dev-runner.js --web",
     "dev-runner": "node _scripts/dev-runner.js",
+    "lint-all": "npm run lint & npm run lint-json & npm run lint-style",
     "lint-fix": "eslint --fix --ext .js,.vue ./",
     "lint": "eslint --ext .js,.vue ./",
+    "lint-json": "eslint --ext .json ./",
+    "lint-style": "stylelint \"**/*.scss\" & stylelint \"**/*.css\"",
+    "lint-style:scss": "stylelint \"**/*.scss\"",
+    "lint-style:css": "stylelint \"**/*.css\"",
+    "lint-style-fix:scss": "stylelint --fix \"**/*.scss\"",
+    "lint-style-fix:css": "stylelint --fix \"**/*.css\"",
     "pack": "run-p pack:main pack:renderer",
     "pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
     "pack:renderer": "webpack --mode=production --node-env=production --config _scripts/webpack.renderer.config.js",
@@ -81,23 +88,25 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.20.2",
-    "babel-eslint": "^10.1.0",
+    "@double-great/stylelint-a11y": "^2.0.2",
     "babel-loader": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "electron": "^22.0.0",
     "electron-builder": "^23.6.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-node": "^11.1.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsonc": "^2.5.0",
+    "eslint-plugin-n": "^15.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-unicorn": "^45.0.2",
     "eslint-plugin-vue": "^9.8.0",
     "eslint-plugin-vuejs-accessibility": "^2.0.0",
     "html-webpack-plugin": "^5.3.2",
@@ -106,10 +115,16 @@
     "lefthook": "^1.2.4",
     "mini-css-extract-plugin": "^2.7.2",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.20",
+    "postcss-scss": "^4.0.6",
     "prettier": "^2.8.1",
     "rimraf": "^3.0.2",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
+    "stylelint": "^14.16.1",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-high-performance-animation": "^1.7.0",
     "tree-kill": "1.2.2",
     "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^9.1.0",

src/main/ImageCache.js

@@ -51,7 +51,7 @@ export class ImageCache {
  * @returns a timestamp in seconds
  */
 export function extractExpiryTimestamp(headers) {
-  const maxAgeRegex = /max-age=([0-9]+)/
+  const maxAgeRegex = /max-age=(\d+)/
 
   const cacheControl = headers['cache-control']
   if (cacheControl && maxAgeRegex.test(cacheControl)) {

src/main/index.js

@@ -283,7 +283,7 @@ function runApp() {
 
     session.defaultSession.webRequest.onBeforeSendHeaders(innertubeRequestFilter, ({ requestHeaders }, callback) => {
       requestHeaders.referer = 'https://www.youtube.com'
-      // eslint-disable-next-line node/no-callback-literal
+      // eslint-disable-next-line n/no-callback-literal
       callback({ requestHeaders })
     })
 
@@ -298,7 +298,7 @@ function runApp() {
         if (imageCache.has(url)) {
           const cached = imageCache.get(url)
 
-          // eslint-disable-next-line node/no-callback-literal
+          // eslint-disable-next-line n/no-callback-literal
           callback({
             mimeType: cached.mimeType,
             data: cached.data
@@ -336,7 +336,7 @@ function runApp() {
 
             imageCache.add(url, mimeType, data, expiryTimestamp)
 
-            // eslint-disable-next-line node/no-callback-literal
+            // eslint-disable-next-line n/no-callback-literal
             callback({
               mimeType,
               data: data
@@ -364,7 +364,7 @@ function runApp() {
               return value
             })
 
-            // eslint-disable-next-line node/no-callback-literal
+            // eslint-disable-next-line n/no-callback-literal
             callback({
               statusCode: response.statusCode ?? 400,
               mimeType: 'application/json',
@@ -385,12 +385,12 @@ function runApp() {
         // the requests made by the imagecache:// handler to fetch the image,
         // are allowed through, as their resourceType is 'other'
         if (details.resourceType === 'image') {
-          // eslint-disable-next-line node/no-callback-literal
+          // eslint-disable-next-line n/no-callback-literal
           callback({
             redirectURL: `imagecache://${encodeURIComponent(details.url)}`
           })
         } else {
-          // eslint-disable-next-line node/no-callback-literal
+          // eslint-disable-next-line n/no-callback-literal
           callback({})
         }
       })

src/renderer/components/data-settings/data-settings.js

@@ -228,7 +228,7 @@ export default Vue.extend({
       let count = 0
 
       const ytsubs = youtubeSubscriptions.slice(1).map(yt => {
-        const splitCSVRegex = /(?:,|\n|^)("(?:(?:"")*[^"]*)*"|[^",\n]*|(?:\n|$))/g
+        const splitCSVRegex = /(?:,|\n|^)("(?:(?:"")*[^"]*)*"|[^\n",]*|(?:\n|$))/g
         return [...yt.matchAll(splitCSVRegex)].map(s => {
           let newVal = s[1]
           if (newVal.startsWith('"')) {
@@ -623,11 +623,11 @@ export default Vue.extend({
 
       this.profileList[0].subscriptions.forEach((channel) => {
         const escapedName = channel.name
-          .replace(/&/g, '&')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&apos;')
+          .replaceAll('&', '&amp;')
+          .replaceAll('<', '&lt;')
+          .replaceAll('>', '&gt;')
+          .replaceAll('"', '&quot;')
+          .replaceAll('\'', '&apos;')
 
         const channelOpmlString = `<outline text="${escapedName}" title="${escapedName}" type="rss" xmlUrl="https://www.youtube.com/feeds/videos.xml?channel_id=${channel.id}"/>`
         opmlData += channelOpmlString

src/renderer/components/download-settings/download-settings.scss

@@ -0,0 +1,3 @@
+.folderDisplay {
+  width: 50vh;
+}

src/renderer/components/download-settings/download-settings.vue

@@ -44,4 +44,4 @@
 </template>
 
 <script src="./download-settings.js" />
-<style scoped lang="sass" src="./download-settings.sass" />
+<style scoped lang="scss" src="./download-settings.scss" />

src/renderer/components/ft-age-restricted/ft-age-restricted.scss

@@ -0,0 +1,17 @@
+.ft-age-restricted {
+  color: var(primary-text-color);
+  h2 {
+    width: 100%;
+    text-align: center;
+    background-color: var(card-bg-color);
+    padding: 10px 0;
+  }
+  .frown {
+    width: 100%;
+    text-align: center;
+    background-color: var(card-bg-color);
+    font-size: 10em;
+    padding: 20px 0;
+    height: 100%;
+  }
+}

src/renderer/components/ft-age-restricted/ft-age-restricted.vue

@@ -12,4 +12,4 @@
 </template>
 
 <script src="./ft-age-restricted.js" />
-<style scoped lang="sass" src="./ft-age-restricted.sass" />
+<style scoped lang="scss" src="./ft-age-restricted.scss" />

src/renderer/components/ft-auto-grid/ft-auto-grid.scss

@@ -0,0 +1,12 @@
+.ft-auto-grid {
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr) );
+    justify-content: space-evenly;
+    grid-gap: 8px;
+  }
+  &.list {
+    display: grid;
+    grid-gap: 4px;
+  }
+}

src/renderer/components/ft-auto-grid/ft-auto-grid.vue

@@ -11,4 +11,4 @@
 </template>
 
 <script src="./ft-auto-grid.js" />
-<style scoped lang="sass" src="./ft-auto-grid.sass" />
+<style scoped lang="scss" src="./ft-auto-grid.scss" />