Update file structure

gulpfile.js

@@ -20,7 +20,7 @@ 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 = {
@@ -53,14 +53,58 @@ const formatByteMessage = (source, data) => {
 }
 
 const style = () => {
-  const isLegacy = (path) => /legacy/.test(path)
+  // const isLegacy = (path) => /legacy/.test(path)
 
-  const excludeModern = filter(file => isLegacy(file.path), { restore: true })
+  // const excludeModern = filter(file => isLegacy(file.path), { restore: true })
-  const excludeLegacy = 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 startDiff = () => bytediff.start()
+  const endDiff = (source) => bytediff.stop((data) => formatByteMessage(source, data))
+
+  return (
+    gulp
+      .src(paths.styles.src)
+      .pipe(sourcemaps.init())
+      .pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction(), postcssInlineSvg()]))
+
+      .pipe(startDiff())
+      .pipe(postcss([postcssCssVariables({ preserve: true })]))
+      .pipe(endDiff('css variables'))
+
+      .pipe(startDiff())
+      .pipe(postcss([autoprefixer({ env: 'legacy' })]))
+      .pipe(endDiff('autoprefixer'))
+
+      .pipe(sourcemaps.write('.'))
+      .pipe(flatten()) // Put files in dist/*, not dist/builds/*
+      .pipe(gulp.dest(paths.styles.dest))
+
+      .pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline
+
+      // <minifying>
+      .pipe(startDiff())
+      .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })]))
+      .pipe(endDiff('minification'))
+      .pipe(rename({ suffix: '.min' }))
+      // </minifying>
+
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest(paths.styles.dest))
+      .pipe(gulp.dest(paths.docs.dest + '/water.css'))
+
+      .pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline
+      .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)
@@ -80,7 +124,7 @@ const style = () => {
         env: 'legacy'
       })]))
       // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
+      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
       .pipe(excludeModern.restore)
 
       // * Process modern builds *
@@ -92,7 +136,7 @@ const style = () => {
         env: 'modern'
       })]))
       // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
+      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
       .pipe(excludeLegacy.restore)
 
       // Write the sourcemaps after making pre-minified changes
@@ -108,7 +152,7 @@ const style = () => {
       // 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)))
+      .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

package.json

@@ -70,20 +70,6 @@
   "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"
     ]
   },
   "files": [

src/builds/dark-legacy.css

@@ -1,9 +0,0 @@
-/**
- * Dark-themed version for legacy browsers:
- * Loads the compiled, standalone version of the dark theme,
- * but overrides it with the compiled, standalone version of the light theme
- * if a system-wide theme preference is set on the user's device.
- */
-
-@import url('./dark-legacy.standalone.min.css');
-@import url('./light-legacy.standalone.min.css') (prefers-color-scheme: light);

src/builds/dark-legacy.standalone.css

@@ -1,8 +0,0 @@
-/**
- * Standalone dark-themed version for legacy browsers.
- * Includes dark variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
- */
-
-@import '../variables-dark.css';
-@import '../parts/_core.css';

src/builds/dark.css

@@ -1,12 +1,6 @@
 /**
- * Dark-themed version:
+ * Forced dark theme version
- * uses dark theme by default but switches to light theme
- * if a system-wide theme preference is set on the user's device.
- *
- * Variables will remain uncompiled so the theme can update dynamically
- * at runtime in the browser.
  */
 
 @import '../variables-dark.css';
-@import '../variables-light.css' (prefers-color-scheme: light);
 @import '../parts/_core.css';

src/builds/dark.standalone.css

@@ -1,8 +0,0 @@
-/**
- * Standalone dark-themed version.
- * Includes dark variables and core, left as CSS variables
- * so the theming can be adjusted at runtime.
- */
-
-@import '../variables-dark.css';
-@import '../parts/_core.css';

src/builds/light-legacy.css

@@ -1,9 +0,0 @@
-/**
- * Light-themed version for legacy browsers:
- * Loads the compiled, standalone version of the light theme at runtime,
- * but overrides it with the compiled, standalone version of the dark theme
- * if a system-wide theme preference is set on the user's device.
- */
-
-@import url('./light-legacy.standalone.min.css');
-@import url('./dark-legacy.standalone.min.css') (prefers-color-scheme: dark);

src/builds/light-legacy.standalone.css

@@ -1,8 +0,0 @@
-/**
- * Standalone light-themed version for legacy browsers.
- * Includes light variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
- */
-
-@import '../variables-light.css';
-@import '../parts/_core.css';

src/builds/light.css

@@ -1,12 +1,6 @@
 /**
- * Light-themed version:
+ * Forced light theme version
- * uses light theme by default but switches to dark theme
- * if a system-wide theme preference is set on the user's device.
- *
- * Variables will remain uncompiled so the theme can update dynamically
- * at runtime in the browser.
  */
 
 @import '../variables-light.css';
-@import '../variables-dark.css' (prefers-color-scheme: dark);
 @import '../parts/_core.css';

src/builds/light.standalone.css

@@ -1,8 +0,0 @@
-/**
- * Standalone light-themed version.
- * Includes light variables and core, left as CSS variables
- * so the theming can be adjusted at runtime.
- */
-
-@import '../variables-light.css';
-@import '../parts/_core.css';

src/builds/water.css

@@ -0,0 +1,9 @@
+/**
+ * Automatic version:
+ * Uses light theme by default but switches to dark theme
+ * if a system-wide theme preference is set on the user's device.
+ */
+
+@import '../variables-light.css';
+@import '../variables-dark.css' (prefers-color-scheme: dark);
+@import '../parts/_core.css';