Fix some linting issues

docs/style.css

@@ -13,12 +13,14 @@ html {
 .version-select__snippet h3 {
   margin: 1rem 2.5rem 1rem 0;
 }
+
 /* Make the ✔ / ❌ Emoji appear next to the button */
 .version-select__snippet__btn {
   position: relative;
   margin: 0 2px 0 auto;
   overflow: visible;
 }
+
 .version-select__snippet__btn span {
   position: absolute;
   left: -2rem;
@@ -29,19 +31,23 @@ html {
 .version-select__options > label {
   white-space: pre;
 }
+
 .version-select__options > label:not(:last-of-type) {
   margin-right: 1rem;
 }
+
 .version-select__options__additional,
 .version-select__options__additional > *:not(summary) {
   display: block;
   margin: 1rem 0;
 }
+
 .version-select__options__additional summary {
   outline: none;
   cursor: pointer;
   font-weight: 600;
 }
+
 .version-select__options__additional summary:hover span,
 .version-select__options__additional summary:focus span {
   text-decoration: underline;
@@ -50,6 +56,7 @@ html {
 .version-select__info caption {
   text-align: left;
 }
+
 .version-select__info th {
   border: none;
   vertical-align: top;
@@ -69,22 +76,40 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
 .emoji {
   /* Use proper Emoji instead of plain Unicode chars */
-  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,
+  font-family:
-    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    'Segoe UI Emoji',
-    Helvetica Neue, sans-serif;
+    'Apple Color Emoji',
+    'Noto Color Emoji',
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
+
 .opacity-4 {
   opacity: 0.4;
 }
+
 .opacity-7 {
   opacity: 0.76;
 }
+
 .tooltip {
   position: relative;
   cursor: help;
 }
+
 .tooltip::after {
   content: '';
   position: absolute;
@@ -100,13 +125,16 @@ body > footer {
 .v-leave-to {
   transform: scale(0) !important;
 }
+
 .v-enter-active,
 .v-leave-active {
   transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
+
 [v-cloak] > * {
   display: none;
 }
+
 [v-cloak]::after {
   content: 'Version picker is loading...';
 }

gulpfile.js

@@ -53,11 +53,6 @@ const formatByteMessage = (source, data) => {
 }
 
 const style = () => {
-  // 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) }
 
@@ -99,73 +94,6 @@ const style = () => {
       .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
       .pipe(browserSync.stream())
   )
-
-  // return gulp.parallel(
-  //   gulp.src(paths.styles.src)
-  //     .pipe(sourcemaps.init())
-  // )
-
-  return (
-    gulp
-      .src(paths.styles.src)
-      // Add sourcemaps
-      .pipe(sourcemaps.init())
-      // Resolve imports, calculated colors and inlined SVG files
-      .pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction(), postcssInlineSvg()]))
-
-      // * Process legacy builds *
-      .pipe(excludeModern)
-      // Inline variable values so CSS works in legacy browsers
-      .pipe(postcss([postcssCssVariables()]))
-      // Calculate size before autoprefixing
-      .pipe(bytediff.start())
-      // autoprefix
-      .pipe(postcss([autoprefixer({
-        env: 'legacy'
-      })]))
-      // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
-      .pipe(excludeModern.restore)
-
-      // * Process modern builds *
-      .pipe(excludeLegacy)
-      // Calculate size before autoprefixing
-      .pipe(bytediff.start())
-      // autoprefix modern builds
-      .pipe(postcss([autoprefixer({
-        env: 'modern'
-      })]))
-      // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
-      .pipe(excludeLegacy.restore)
-
-      // Write the sourcemaps after making pre-minified changes
-      .pipe(sourcemaps.write('.'))
-      // Flatten output so files end up in dist/*, not dist/builds/*
-      .pipe(flatten())
-      // Write pre-minified styles
-      .pipe(gulp.dest(paths.styles.dest))
-      // Remove sourcemaps from the pipeline, only keep css
-      .pipe(filter('**/*.css'))
-      // Calculate size before minifying
-      .pipe(bytediff.start())
-      // Minify using cssnano, use extra-low precision while minifying inline SVGs
-      .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })]))
-      // Write the amount saved by minifying
-      .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
-      // Rename the files have the .min suffix
-      .pipe(rename({ suffix: '.min' }))
-      // Write the sourcemaps after making all changes
-      .pipe(sourcemaps.write('.'))
-      // Write the minified files
-      .pipe(gulp.dest(paths.styles.dest))
-      // Output files to docs directory so documentation site can use them
-      .pipe(gulp.dest(paths.docs.dest + '/water.css'))
-      // Final size report including gzipped sizes
-      .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
-      // Stream any changes to browserSync
-      .pipe(browserSync.stream())
-  )
 }
 
 const docs = () => {

package.json

@@ -7,7 +7,7 @@
     "build": "gulp build",
     "dev": "gulp watch",
     "lint:js": "eslint **/*.js **/*.html gulpfile.js --fix",
-    "lint:css": "stylelint src/**/*.css --fix",
+    "lint:css": "stylelint src/**/*.css docs/style.css --fix",
     "lint": "yarn lint:js && yarn lint:css"
   },
   "repository": {