Merge pull request #115 from kognise/add/style-guidelines

Add style guidelines/linter

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

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 && stylelint \"src/*.css\" --fix",
     "prepublishOnly": "yarn build"
   },
   "repository": {
@@ -40,24 +41,29 @@
     "postcss-color-mod-function": "^3.0.3",
     "postcss-css-variables": "^0.12.0",
     "postcss-import": "^12.0.1",
-    "postcss-inline-svg": "^3.1.1"
+    "postcss-inline-svg": "^3.1.1",
+    "standard": "^14.3.1",
+    "stylelint": "^11.0.0",
+    "stylelint-config-standard": "^19.0.0"
   },
   "browserslist": {
-     "legacy": ["defaults AND not android 4.4.3"],
-     "modern": [
-       "Edge > 16",
-       "Firefox > 31",
-       "Chrome > 49",
-       "Safari > 9.1",
-       "Opera > 36",
-       "ios_saf > 9.3",
-       "Android > 76",
-       "OperaMobile > 46",
-       "ChromeAndroid > 76",
-       "FirefoxAndroid > 68",
-       "UCAndroid > 12.12",
-       "Samsung > 5"
-     ]
+    "legacy": [
+      "defaults AND not android 4.4.3"
+    ],
+    "modern": [
+      "Edge > 16",
+      "Firefox > 31",
+      "Chrome > 49",
+      "Safari > 9.1",
+      "Opera > 36",
+      "ios_saf > 9.3",
+      "Android > 76",
+      "OperaMobile > 46",
+      "ChromeAndroid > 76",
+      "FirefoxAndroid > 68",
+      "UCAndroid > 12.12",
+      "Samsung > 5"
+    ]
   },
   "files": [
     "dist"

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
   })()
-);
+)

src/variables-dark.css

@@ -2,29 +2,21 @@
   --background-body: #202b38;
   --background: #161f27;
   --background-alt: #1a242f;
-
   --selection: #161f27;
-
   --text-main: #dbdbdb;
-  --text-bright: #ffffff;
+  --text-bright: #fff;
   --text-muted: #717880;
-
   --links: #41adff;
   --focus: #0096bfab;
   --border: #dbdbdb;
   --code: #ffbe85;
-
   --animation-duration: 0.1s;
   --button-hover: #324759;
-
   --scrollbar-thumb: var(--button-hover);
   --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
-
   --form-placeholder: #a9a9a9;
-  --form-text: #ffffff;
-
+  --form-text: #fff;
   --variable: #d941e2;
   --highlight: #efdb43;
-
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
 }

src/variables-light.css

@@ -1,30 +1,22 @@
 :root {
-  --background-body: #ffffff;
+  --background-body: #fff;
   --background: #efefef;
   --background-alt: #f7f7f7;
-
   --selection: #9e9e9e;
-
   --text-main: #363636;
-  --text-bright: #000000;
-  --text-muted: #999999;
-
+  --text-bright: #000;
+  --text-muted: #999;
   --links: #0076d1;
   --focus: #0096bfab;
   --border: #dbdbdb;
-  --code: #000000;
-
+  --code: #000;
   --animation-duration: 0.1s;
-  --button-hover: #dddddd;
-
+  --button-hover: #ddd;
   --scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%));
   --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
-
   --form-placeholder: #949494;
-  --form-text: #000000;
-
+  --form-text: #000;
   --variable: #39a33c;
-  --highlight: #ffff00;
-
+  --highlight: #ff0;
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
 }