Add Standard linting and fix problems

gulpfile.js

@@ -15,22 +15,22 @@ const postcssImport = require('postcss-import')
 const postcssInlineSvg = require('postcss-inline-svg')
 const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
   /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
-  stringifier: color => color.toRGBLegacy(),
+  stringifier: color => color.toRGBLegacy()
 })
 
 const paths = {
   srcDir: 'src/*',
   docsDir: '*',
-  styles: { src: 'src/builds/*.css', dest: 'dist' },
+  styles: { src: 'src/builds/*.css', dest: 'dist' }
 }
 
 // https://stackoverflow.com/a/20732091
-function humanFileSize(size) {
+function humanFileSize (size) {
   var i = Math.floor(Math.log(size) / Math.log(1024))
   return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
 }
 
-function formatByteMessage(source, data) {
+function formatByteMessage (source, data) {
   const prettyStartSize = humanFileSize(data.startSize)
   let message = ''
 
@@ -48,7 +48,7 @@ function formatByteMessage(source, data) {
   return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
 }
 
-function style() {
+function style () {
   const isLegacy = path => /legacy/.test(path)
 
   const excludeModern = filter(file => isLegacy(file.path), { restore: true })
@@ -70,7 +70,7 @@ function style() {
       .pipe(bytediff.start())
       // autoprefix
       .pipe(postcss([autoprefixer({
-        env: "legacy"
+        env: 'legacy'
       })]))
       // Write the amount gained by autoprefixing
       .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
@@ -82,7 +82,7 @@ function style() {
       .pipe(bytediff.start())
       // autoprefix modern builds
       .pipe(postcss([autoprefixer({
-        env: "modern"
+        env: 'modern'
       })]))
       // Write the amount gained by autoprefixing
       .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
@@ -114,14 +114,14 @@ function style() {
   )
 }
 
-function watch() {
+function watch () {
   style()
 
   browserSync.init({
     server: {
-      baseDir: './',
+      baseDir: './'
     },
-    startPath: 'index.html',
+    startPath: 'index.html'
   })
 
   gulp.watch(paths.srcDir, style)

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "gulp style",
     "dev": "gulp watch",
+    "lint": "standard --fix",
     "prepublishOnly": "yarn build"
   },
   "repository": {

script.js

@@ -1,4 +1,6 @@
-!(function() {
+/* global matchMedia, faviconModeSwitcher */
+
+(function () {
   const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
   if (!iconModeSwitcher) return
   iconModeSwitcher([
@@ -16,99 +18,100 @@
     }
   ])
 })()
+
 ;(function (ThemeSwitcher) {
-  const themeSwitcher = new ThemeSwitcher('stylesheet');
-  const themeSwitchBtn = document.getElementById('switch');
+  const themeSwitcher = new ThemeSwitcher('stylesheet')
+  const themeSwitchBtn = document.getElementById('switch')
   const themes = {
     dark: 'dark',
     darkStandalone: 'dark.standalone',
     light: 'light',
     lightStandalone: 'light.standalone'
-  };
+  }
   const getSwitchThemeName = function () {
     // Case: switch to "light.standalone.css"
     if (
-      (themeSwitcher.current === themes.dark) && themeSwitcher.isDark ||
-      (themeSwitcher.current === themes.light) && themeSwitcher.isDark ||
+      ((themeSwitcher.current === themes.dark) && themeSwitcher.isDark) ||
+      ((themeSwitcher.current === themes.light) && themeSwitcher.isDark) ||
       themeSwitcher.current === themes.darkStandalone
     ) {
       return themes.lightStandalone
 
     // Case: switch to "dark.standalone.css"
     } else if (
-      (themeSwitcher.current === themes.dark) && themeSwitcher.isLight ||
-      (themeSwitcher.current === themes.light) && themeSwitcher.isLight ||
+      ((themeSwitcher.current === themes.dark) && themeSwitcher.isLight) ||
+      ((themeSwitcher.current === themes.light) && themeSwitcher.isLight) ||
       themeSwitcher.current === themes.lightStandalone
     ) {
-      return themes.darkStandalone;
+      return themes.darkStandalone
 
     // Case: switch to "light.css"
     } else if (themeSwitcher.current === themes.dark) {
-      return themes.light;
+      return themes.light
 
     // Case: switch to "dark.css"
     } else if (themeSwitcher.current === themes.light) {
-      return themes.dark;
+      return themes.dark
 
     // Case: switch destination is unknown
     } else {
-      return themeSwitcher.current;
+      return themeSwitcher.current
     }
-  };
+  }
   const getGeneralThemeName = function () {
-    return themeSwitcher.current.replace(/\.standalone/g, '');
-  };
+    return themeSwitcher.current.replace(/\.standalone/g, '')
+  }
 
-  themeSwitchBtn.addEventListener('click', function() {
-    themeSwitcher.switch(getSwitchThemeName());
-  });
+  themeSwitchBtn.addEventListener('click', function () {
+    themeSwitcher.switch(getSwitchThemeName())
+  })
 
   themeSwitcher.onChangeDark = function () {
-    themeSwitcher.switch(getGeneralThemeName());
-  };
+    themeSwitcher.switch(getGeneralThemeName())
+  }
 
   themeSwitcher.onChangeLight = function () {
-    themeSwitcher.switch(getGeneralThemeName());
-  };
+    themeSwitcher.switch(getGeneralThemeName())
+  }
 })(
   (function () {
-    const ThemeSwitcher = function(stylesheet) {
-      const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)');
-      const lightSchemeMql = matchMedia('(prefers-color-scheme: light)');
-      const that = this;
+    const ThemeSwitcher = function (stylesheet) {
+      const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)')
+      const lightSchemeMql = matchMedia('(prefers-color-scheme: light)')
+      const that = this
 
-      this.themeDir = 'dist/';
-      this.stylesheet = document.getElementById(stylesheet);
-      this.current = this.getThemeName(this.stylesheet.href);
-      this.isDark = darkSchemeMql.matches;
-      this.isLight = lightSchemeMql.matches;
+      this.themeDir = 'dist/'
+      this.stylesheet = document.getElementById(stylesheet)
+      this.current = this.getThemeName(this.stylesheet.href)
+      this.isDark = darkSchemeMql.matches
+      this.isLight = lightSchemeMql.matches
 
       darkSchemeMql.addListener(function (mql) {
         if (mql.matches && typeof that.onChangeDark === 'function') {
           that.onChangeDark()
         }
-      });
+      })
 
       lightSchemeMql.addListener(function (mql) {
         if (mql.matches && typeof that.onChangeLight === 'function') {
           that.onChangeLight()
         }
-      });
-    };
+      })
+    }
 
     ThemeSwitcher.prototype = {
       switch: function (themeName) {
-        this.stylesheet.href = this.themeDir + themeName + '.css';
-        this.current = themeName;
+        this.stylesheet.href = this.themeDir + themeName + '.css'
+        this.current = themeName
       },
       getThemeName: function () {
-        const reg = new RegExp(this.themeDir + '(|.+?).css');
-        return stylesheet.getAttribute('href').replace(reg, '$1');
+        const reg = new RegExp(this.themeDir + '(|.+?).css')
+        return this.stylesheet.getAttribute('href').replace(reg, '$1')
       },
       onChangeDark: null,
       onChangeLight: null
-    };
+    }
 
-    return ThemeSwitcher;
+    return ThemeSwitcher
   })()
-);
+)