Upgrade dependencies

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn validate

.huskyrc.json

@@ -1,5 +0,0 @@
-{
-  "hooks": {
-    "pre-commit": "yarn validate"
-  }
-}

.stylelintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "string-quotes": "single"
   }
 }

accessibility.js

@@ -1,9 +1,9 @@
-const pa11y = require('pa11y')
+import pa11y from 'pa11y'
-const chalk = require('chalk')
+import chalkTemplate from 'chalk-template'
-const puppeteer = require('puppeteer')
+import puppeteer from 'puppeteer'
 
 const check = async (browser, theme) => {
-  console.log(chalk`{bold Checking {blue ${theme}} theme...}`)
+  console.log(chalkTemplate`{bold Checking {blue ${theme}} theme...}`)
 
   const page = await browser.newPage()
   page.emulateMediaFeatures([
@@ -20,16 +20,16 @@ const check = async (browser, theme) => {
 
   if (results.issues.length === 0) {
     await page.close()
-    console.log(chalk`{green No issues found!}`)
+    console.log(chalkTemplate`{green No issues found!}`)
     return false
   }
 
   for (const issue of results.issues) {
     console.log()
-    console.log(chalk`{red Error:} ${issue.message}`)
+    console.log(chalkTemplate`{red Error:} ${issue.message}`)
-    console.log(chalk`{gray -> ${issue.code}}`)
+    console.log(chalkTemplate`{gray -> ${issue.code}}`)
-    console.log(chalk`{gray -> ${issue.selector}}`)
+    console.log(chalkTemplate`{gray -> ${issue.selector}}`)
-    console.log(chalk`{gray -> ${issue.context}}`)
+    console.log(chalkTemplate`{gray -> ${issue.context}}`)
   }
 
   await page.close()
@@ -48,7 +48,7 @@ const go = async () => {
     if (lightResult || darkResult) process.exit(1)
   } catch (error) {
     console.log()
-    console.log(chalk`{red An unexpected error occured!} ${error.message}`)
+    console.log(chalkTemplate`{red An unexpected error occured!} ${error.message}`)
   }
 }
 

docs/style.css

@@ -23,8 +23,10 @@
 #link-snippet-container {
   overflow: hidden;
   display: grid;
-  display: -ms-grid;
+  /* stylelint-disable */
+  -ms-display: grid;
   -ms-grid-columns: 1fr;
+  /* stylelint-enable */
 }
 
 #link-snippet-container > pre {

gulpfile.js

@@ -1,22 +1,25 @@
-const gulp = require('gulp')
+import gulp from 'gulp'
-const postcss = require('gulp-postcss')
+import postcss from 'gulp-postcss'
-const autoprefixer = require('autoprefixer')
+import autoprefixer from 'autoprefixer'
-const cssnano = require('cssnano')
+import cssnano from 'cssnano'
-const sourcemaps = require('gulp-sourcemaps')
+import sourcemaps from 'gulp-sourcemaps'
-const bytediff = require('gulp-bytediff')
+import bytediff from 'gulp-bytediff'
-const browserSync = require('browser-sync').create()
+import chalk from 'chalk'
-const chalk = require('chalk')
+import rename from 'gulp-rename'
-const rename = require('gulp-rename')
+import filter from 'gulp-filter'
-const filter = require('gulp-filter')
+import flatten from 'gulp-flatten'
-const flatten = require('gulp-flatten')
+import babel from 'gulp-babel'
-const babel = require('gulp-babel')
+import terser from 'gulp-terser'
-const terser = require('gulp-terser')
+import posthtml from 'gulp-posthtml'
-const posthtml = require('gulp-posthtml')
+import htmlnano from 'htmlnano'
-const htmlnano = require('htmlnano')
+import sizereport from 'gulp-sizereport'
-const sizereport = require('gulp-sizereport')
+import postcssCssVariables from 'postcss-css-variables'
-const postcssCssVariables = require('postcss-css-variables')
+import postcssImport from 'postcss-import'
-const postcssImport = require('postcss-import')
+import postcssInlineSvg from 'postcss-inline-svg'
-const postcssInlineSvg = require('postcss-inline-svg')
+import _browserSync from 'browser-sync'
+import chalkTemplate from 'chalk-template'
+
+const browserSync = _browserSync.create()
 
 const paths = {
   docs: { src: 'docs/**/*', dest: 'out/docs' },
@@ -41,10 +44,10 @@ const formatByteMessage = (source, data) => {
     if (data.endSize > data.startSize) prettyEndSize = chalk.yellow(prettyEndSize)
     if (data.endSize < data.startSize) prettyEndSize = chalk.green(prettyEndSize)
 
-    message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
+    message = chalkTemplate`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
-  } else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
+  } else message = chalkTemplate`kept original filesize. ({bold ${prettyStartSize}})`
 
-  return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
+  return chalkTemplate`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
 }
 
 const style = () => {
@@ -128,8 +131,5 @@ const startDevServer = () => {
   gulp.watch(paths.docs.src, gulp.series(docs, browserReload))
 }
 
-const build = gulp.parallel(style, docs)
+export const build = gulp.parallel(style, docs)
-const watch = gulp.series(build, startDevServer)
+export const watch = gulp.series(build, startDevServer)
-
-module.exports.build = build
-module.exports.watch = watch

index.js

@@ -1,2 +1,8 @@
-const gulpfile = require('./gulpfile')
+import { build, watch } from './gulpfile.js'
-gulpfile.watch()
+if (process.argv[2] === 'build') {
+  build()
+} else if (process.argv[2] === 'watch') {
+  watch()
+} else {
+  console.log('Unknown command, supported: build, watch')
+}

package.json

@@ -3,14 +3,16 @@
   "version": "2.1.1",
   "description": "A drop-in collection of CSS styles to make simple websites just a little nicer",
   "main": "out/water.css",
+  "type": "module",
   "scripts": {
-    "build": "gulp build",
+    "build": "node index.js build",
-    "dev": "gulp watch",
+    "dev": "node index.js watch",
     "lint:js": "eslint bookmarklet/original.js docs/scripts/*.js docs/*.html gulpfile.js",
     "lint:css": "stylelint src/**/*.css docs/style.css",
     "lint": "yarn lint:js --fix && yarn lint:css --fix",
     "accessibility": "yarn build && node accessibility.js",
-    "validate": "yarn lint:js && yarn lint:css && yarn accessibility"
+    "validate": "yarn lint:js && yarn lint:css && yarn accessibility",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -32,42 +34,44 @@
   },
   "homepage": "https://github.com/kognise/water.css",
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.16.12",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-env": "^7.16.11",
-    "@changesets/cli": "^2.7.2",
+    "@changesets/cli": "^2.19.0",
-    "autoprefixer": "^9.5.1",
+    "autoprefixer": "^10.4.2",
-    "browser-sync": "^2.26.3",
+    "browser-sync": "^2.27.7",
-    "chalk": "^2.4.2",
+    "chalk": "^5.0.0",
-    "cssnano": "^4.1.10",
+    "chalk-template": "^0.3.1",
-    "eslint": "^7.1.0",
+    "cssnano": "^5.0.15",
-    "eslint-config-standard": "^14.1.1",
+    "eslint": "^8.7.0",
-    "eslint-plugin-html": "^6.0.2",
+    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-markdown": "^2.0.0-alpha.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prefer-arrow": "^1.2.1",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "esm": "^3.2.25",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-bytediff": "^1.0.0",
-    "gulp-filter": "^5.1.0",
+    "gulp-filter": "^7.0.0",
     "gulp-flatten": "^0.4.0",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.1",
-    "gulp-posthtml": "^3.0.4",
+    "gulp-posthtml": "^3.0.5",
-    "gulp-rename": "^1.4.0",
+    "gulp-rename": "^2.0.0",
     "gulp-sizereport": "^1.2.1",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-sourcemaps": "^3.0.0",
-    "gulp-terser": "^1.2.0",
+    "gulp-terser": "^2.1.0",
-    "htmlnano": "^0.2.3",
+    "htmlnano": "^2.0.0",
-    "husky": "^4.2.5",
+    "husky": "^7.0.0",
-    "pa11y": "^5.3.0",
+    "pa11y": "^6.1.1",
-    "postcss-css-variables": "^0.12.0",
+    "postcss-css-variables": "^0.18.0",
-    "postcss-import": "^12.0.1",
+    "postcss-import": "^14.0.2",
-    "postcss-inline-svg": "^4.1.0",
+    "postcss-inline-svg": "^5.0.0",
-    "puppeteer": "^3.2.0",
+    "puppeteer": "^13.1.1",
-    "stylelint": "^13.5.0",
+    "stylelint": "^14.2.0",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-config-standard": "^24.0.0"
   },
   "browserslist": [
     "defaults"
@@ -75,5 +79,6 @@
   "files": [
     "out/*.css",
     "LICENSE.md"
-  ]
+  ],
-}
+  "dependencies": {}
+}

src/parts/_base.css

@@ -1,5 +1,18 @@
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'avenir next',
+    avenir,
+    'segoe ui',
+    'helvetica neue',
+    helvetica,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
   line-height: 1.4;
   max-width: 800px;
   margin: 20px auto;

src/parts/_code.css

@@ -13,7 +13,7 @@ code,
 samp,
 kbd,
 var {
-  font-family: ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+  font-family: ui-monospace, Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace;
 }
 
 pre > code {
@@ -32,5 +32,5 @@ kbd {
   border: 1px solid var(--border);
   border-radius: 2px;
   color: var(--text-main);
-  padding: 2px 4px 2px 4px;
+  padding: 2px 4px;
 }

src/parts/_typography.css

@@ -70,7 +70,7 @@ a[href^='sms\:']::before {
 mark {
   background-color: var(--highlight);
   border-radius: 2px;
-  padding: 0 2px 0 2px;
+  padding: 0 2px;
   color: #000;
 }