Linting, so much linting

I installed and configured stylelint and eslint, and added an editorconfig as well as a vscode recommended extensions file.

The reason the diff is so large is I ran the linters and fixed all the linting issues.

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+quote_type = single
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[*.md]
+indent_size = 4

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "standard"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "html",
+    "markdown",
+    "prefer-arrow"
+  ],
+  "overrides": [
+    {
+      "files": [ "**/*.md" ],
+      "processor": "markdown/markdown"
+    }
+  ],
+  "rules": {
+    "prefer-arrow/prefer-arrow-functions": [
+      "error",
+      {
+        "disallowPrototype": true,
+        "singleReturnOnly": false,
+        "classPropertiesAllowed": false
+      }
+    ],
+    "func-style": ["error", "expression"]
+  }
+}

.gitattributes

@@ -1 +0,0 @@
-/dist/* -diff

.replit

@@ -1,2 +0,0 @@
-language = "nodejs"
-run = "yarn dev"

.stylelintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "stylelint-config-standard"
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "no-descending-specificity": null
+  }
 }

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint"
+  ]
+}

README.md

@@ -96,6 +96,7 @@ If you want to change a value for dark or light mode only, use a media query lik
   :root {
     --links: blue; /* Always applied */
   }
+
   @media (prefers-color-scheme: dark) {
     :root {
       --links: yellow; /* Only applied in dark mode (overrides previous declarations while applied) */
@@ -117,10 +118,6 @@ If you are targeting browsers without support for CSS Custom Properties such as
 When making your changes, we recommend you don't change the values set by Water.css directly, instead simply add your own variable declarations:
 
 ```css
-:root {
-  /* Water.css variable declarations... */
-}
-
 /* ⬇ Add this block! */
 :root {
   /* Your variable declarations, overriding previous ones */
@@ -145,9 +142,3 @@ $ yarn dev
 
 Before submitting your first pull request, make sure to check out our [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md)!  
 Thanks for taking the time to contribute :)
-
-## Todos
-
-- Add screenshots
-- Release Jekyll theme ([#18](https://github.com/kognise/water.css/issues/18))
-- Publish to npm ([#41](https://github.com/kognise/water.css/issues/41))

docs/index.html

@@ -22,15 +22,6 @@
     <meta name="msapplication-TileColor" content="#00aba9" />
     <meta name="msapplication-config" content="./icons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
-    <!-- Use bright favicons when the browser is in dark mode. -->
-    <script type="module">
-      import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
-      faviconSwitcher([
-        { element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
-        { element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
-        { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } },
-      ])
-    </script>
 
     <!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
     <link rel="preload" as="style" href="./water.css/dark-legacy.standalone.min.css" />
@@ -71,12 +62,20 @@
       }
     </script>
 
+    <!-- Use bright favicons when the browser is in dark mode. -->
+    <script type="module">
+      import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
+      faviconSwitcher([
+        { element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
+        { element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
+        { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
+      ])
+    </script>
+
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
     <script>
       window.dataLayer = window.dataLayer || []
-      function gtag() {
+      const gtag = (...args) => window.dataLayer.push(args)
-        dataLayer.push(arguments)
-      }
       gtag('js', new Date())
       gtag('config', 'UA-116663597-6')
     </script>

docs/script.js

@@ -40,7 +40,7 @@ const FILE_SIZES = {
   'light.min.css': 1.4,
   'light.standalone.min.css': 1.3,
   'light-legacy.min.css': 0.178 + 1.16 + 1.15,
-  'light-legacy.standalone.min.css': 1.15,
+  'light-legacy.standalone.min.css': 1.15
 }
 
 /** Takes in version options and returns the respective CSS file name. */
@@ -81,31 +81,30 @@ const getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStand
 const externalElements = {
   _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),
   _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),
-  _removeStartupStylesheet() {
+  _removeStartupStylesheet: () => {
     const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
     if (startupStylesheet) document.head.removeChild(startupStylesheet)
-    const that = externalElements
+    externalElements._stylesheet.removeEventListener('load', externalElements._removeStartupStylesheet)
-    that._stylesheet.removeEventListener('load', that._removeStartupStylesheet)
   },
-  _updateProductHunt(/** @type {Theme} */ theme) {
+  _updateProductHunt: (/** @type {Theme} */ theme) => {
-    this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
+    externalElements._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
   },
-  _updateStylesheet(/** @type {FileName} */ fileName) {
+  _updateStylesheet: (/** @type {FileName} */ fileName) => {
-    this._stylesheet.href = DEV_BASE + fileName
+    externalElements._stylesheet.href = DEV_BASE + fileName
   },
 
   /** Sets up listener to remove startup version of water.css when right one loads, then updates */
-  init(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
+  init: (/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) => {
-    this._stylesheet.addEventListener('load', this._removeStartupStylesheet)
+    externalElements._stylesheet.addEventListener('load', externalElements._removeStartupStylesheet)
-    this.update(options, preferedTheme)
+    externalElements.update(options, preferedTheme)
   },
   /** Takes current version + the user's prefered scheme and updates all external elements. */
-  update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
+  update: (/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) => {
     const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme
 
-    this._updateStylesheet(getFileName(options))
+    externalElements._updateStylesheet(getFileName(options))
-    this._updateProductHunt(displayedTheme)
+    externalElements._updateProductHunt(displayedTheme)
-  },
+  }
 }
 
 /**
@@ -124,65 +123,65 @@ const themeFromParams = queryParams.get('theme')
 const initialVersionOptions = {
   theme: themeFromParams === 'dark' || themeFromParams === 'light' ? themeFromParams : 'dark',
   isLegacy: queryParams.has('legacy') || !supportsCssVars,
-  isStandalone: queryParams.has('standalone'),
+  isStandalone: queryParams.has('standalone')
 }
 
-new w.Vue({
+new w.Vue({ // eslint-disable-line no-new
   el: '#installation',
   filters: {
-    capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1),
+    capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1)
   },
   /** @type {VueData} */
   data: {
     versionOptions: initialVersionOptions,
     preferedColorScheme: null,
-    copyStatus: null,
+    copyStatus: null
   },
   computed: {
     /** @returns {boolean} */
-    isOverwritten() {
+    isOverwritten () {
       const { isStandalone, theme } = this.versionOptions
       if (isStandalone || !this.preferedColorScheme) return false
       return theme !== this.preferedColorScheme
     },
     /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */
-    selectedVersion() {
+    selectedVersion () {
       return {
         fileName: getFileName(this.versionOptions),
         fileSize: getFileSize(this.versionOptions).toFixed(2),
-        fileSnippet: getFileSnippet(this.versionOptions),
+        fileSnippet: getFileSnippet(this.versionOptions)
       }
-    },
+    }
   },
-  created() {
+  created () {
     createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
     createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
 
     externalElements.init(this.versionOptions, this.preferedColorScheme)
   },
   methods: {
-    getTooltipMessage(/** @type {Theme} */ theme) {
+    getTooltipMessage (/** @type {Theme} */ theme) {
       if (this.versionOptions.theme === theme && this.isOverwritten) {
         return 'Your theme selection is currently overwritten by the theme setting on your device.'
       } else return "Selected theme can be overwritten by theme setting on user's device."
     },
-    copyToClipboard() {
+    copyToClipboard () {
       Promise.resolve()
         .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet))
         .then(() => (this.copyStatus = 'success'))
         .catch(() => (this.copyStatus = 'failed'))
       setTimeout(() => (this.copyStatus = null), 1000)
-    },
+    }
   },
   watch: {
-    preferedColorScheme(/** @type {Theme} */ nextScheme) {
+    preferedColorScheme (/** @type {Theme} */ nextScheme) {
       externalElements.update(this.versionOptions, nextScheme)
     },
     versionOptions: {
       deep: true,
-      handler(/** @type {VersionOptions} */ nextOptions) {
+      handler (/** @type {VersionOptions} */ nextOptions) {
         externalElements.update(nextOptions, this.preferedColorScheme)
-      },
+      }
-    },
+    }
-  },
+  }
 })

gulpfile.js

@@ -29,12 +29,12 @@ const paths = {
 }
 
 // https://stackoverflow.com/a/20732091
-function humanFileSize(size) {
+const humanFileSize = (size) => {
-  var i = Math.floor(Math.log(size) / Math.log(1024))
+  const 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) {
+const formatByteMessage = (source, data) => {
   const prettyStartSize = humanFileSize(data.startSize)
   let message = ''
 
@@ -52,14 +52,14 @@ function formatByteMessage(source, data) {
   return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
 }
 
-function style() {
+const style = () => {
-  const isLegacy = path => /legacy/.test(path)
+  const isLegacy = (path) => /legacy/.test(path)
 
   const excludeModern = filter(file => isLegacy(file.path), { restore: true })
   const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
 
   // Don't inline minified versions, so builds can lazily import them at runtime
-  const cssImportOptions = { filter: path => !/\.min/.test(path) }
+  const cssImportOptions = { filter: (path) => !/\.min/.test(path) }
 
   return (
     gulp
@@ -124,7 +124,7 @@ function style() {
   )
 }
 
-function docs() {
+const docs = () => {
   const htmlOnly = filter('**/*.html', { restore: true })
   const jsOnly = filter('**/*.js', { restore: true })
   const cssOnly = filter('**/*.css', { restore: true })
@@ -158,7 +158,11 @@ function docs() {
   )
 }
 
-const browserReload = done => (browserSync.reload(), done())
+const browserReload = (done) => {
+  browserSync.reload()
+  return done()
+}
+
 const startDevServer = () => {
   browserSync.init({ server: { baseDir: './dist' }, startPath: 'docs/index.html' })
 

package.json

@@ -5,7 +5,10 @@
   "main": "index.js",
   "scripts": {
     "build": "gulp build",
-    "dev": "gulp watch"
+    "dev": "gulp watch",
+    "lint:js": "eslint **/*.js **/*.html gulpfile.js --fix",
+    "lint:css": "stylelint src/**/*.css --fix",
+    "lint": "yarn lint:js && yarn lint:css"
   },
   "repository": {
     "type": "git",
@@ -32,6 +35,15 @@
     "chalk": "^2.4.2",
     "clipboard-polyfill": "^2.8.1",
     "cssnano": "^4.1.10",
+    "eslint": "^7.1.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-html": "^6.0.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-markdown": "^2.0.0-alpha.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prefer-arrow": "^1.2.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
     "favicon-mode-switcher": "^1.0.4",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
@@ -50,6 +62,8 @@
     "postcss-import": "^12.0.1",
     "postcss-inline-svg": "^4.1.0",
     "posthtml-include": "^1.2.0",
+    "stylelint": "^13.5.0",
+    "stylelint-config-standard": "^20.0.0",
     "vue": "^2.6.10"
   },
   "browserslist": {

src/builds/dark.css

@@ -9,5 +9,4 @@
 
 @import '../variables-dark.css';
 @import '../variables-light.css' (prefers-color-scheme: light);
-
 @import '../parts/_core.css';

src/builds/light.css

@@ -9,6 +9,4 @@
 
 @import '../variables-light.css';
 @import '../variables-dark.css' (prefers-color-scheme: dark);
-
-
 @import '../parts/_core.css';

src/parts/_base.css

@@ -1,22 +1,22 @@
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.4;
-
   max-width: 800px;
   margin: 20px auto;
   padding: 0 10px;
   word-wrap: break-word;
-
   color: var(--text-main);
   background: var(--background-body);
-
   text-rendering: optimizeLegibility;
 }
 
-button, input, textarea {
+button,
-  transition: background-color var(--animation-duration) linear,
+input,
-              border-color var(--animation-duration) linear,
+textarea {
-              color var(--animation-duration) linear,
+  transition:
-              box-shadow var(--animation-duration) linear,
+    background-color var(--animation-duration) linear,
-              transform var(--animation-duration) ease;
+    border-color var(--animation-duration) linear,
+    color var(--animation-duration) linear,
+    box-shadow var(--animation-duration) linear,
+    transform var(--animation-duration) ease;
 }

src/parts/_code.css

@@ -1,5 +1,7 @@
-code, samp, time {
+code,
-  background:  var(--background);
+samp,
+time {
+  background: var(--background);
   color: var(--code);
   padding: 2.5px 5px;
   border-radius: 6px;

src/parts/_forms.css

@@ -1,4 +1,5 @@
-button, select,
+button,
+select,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
@@ -11,25 +12,6 @@ select {
   display: block;
 }
 
-input,
-button,
-textarea,
-select {
-  color: var(--form-text);
-  background-color: var(--background);
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
 input:not([type='checkbox']):not([type='radio']),
 input[type='range'],
 select,

src/parts/_range.css

@@ -17,7 +17,7 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 
 input[type='range']::-webkit-slider-thumb {
-  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
   height: 20px;
   width: 20px;
   border-radius: 50%;
@@ -39,7 +39,7 @@ input[type='range']::-moz-range-track {
 }
 
 input[type='range']::-moz-range-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
   height: 20px;
   width: 20px;
   border-radius: 50%;
@@ -59,19 +59,19 @@ input[type='range']::-ms-fill-lower {
   background: var(--background);
   border: 0.2px solid #010101;
   border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 }
 
 input[type='range']::-ms-fill-upper {
   background: var(--background);
   border: 0.2px solid #010101;
   border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 }
 
 input[type='range']::-ms-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
-  border: 1px solid #000000;
+  border: 1px solid #000;
   height: 20px;
   width: 20px;
   border-radius: 50%;

src/parts/_typography.css

@@ -35,16 +35,17 @@ th {
 }
 
 q::before {
-   content: none;
+  content: none;
 }
 
 q::after {
-   content: none;
+  content: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   border-left: 4px solid var(--focus);
-  margin: 1.5em 0em;
+  margin: 1.5em 0;
   padding: 0.5em 1em;
   font-style: italic;
 }
@@ -77,6 +78,6 @@ a[href^='sms\:']::before {
 mark {
   background-color: var(--highlight);
   border-radius: 2px;
-  padding: 0px 2px 0px 2px;
+  padding: 0 2px 0 2px;
-  color: #000000;
+  color: #000;
 }