From 9d96ee32f96f7fb045585ebee620479b2c9078ba Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 27 May 2020 21:04:05 -0500 Subject: [PATCH] Update file structure --- gulpfile.js | 58 ++++++++++++++++++++++---- package.json | 16 +------ src/builds/dark-legacy.css | 9 ---- src/builds/dark-legacy.standalone.css | 8 ---- src/builds/dark.css | 8 +--- src/builds/dark.standalone.css | 8 ---- src/builds/light-legacy.css | 9 ---- src/builds/light-legacy.standalone.css | 8 ---- src/builds/light.css | 8 +--- src/builds/light.standalone.css | 8 ---- src/builds/water.css | 9 ++++ 11 files changed, 63 insertions(+), 86 deletions(-) delete mode 100755 src/builds/dark-legacy.css delete mode 100755 src/builds/dark-legacy.standalone.css mode change 100644 => 100755 src/builds/dark.css delete mode 100755 src/builds/dark.standalone.css delete mode 100755 src/builds/light-legacy.css delete mode 100755 src/builds/light-legacy.standalone.css mode change 100644 => 100755 src/builds/light.css delete mode 100755 src/builds/light.standalone.css create mode 100644 src/builds/water.css diff --git a/gulpfile.js b/gulpfile.js index ef56068..80104f1 100644 --- a/gulpfile.js +++ b/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 excludeLegacy = 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 }) // 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 + + // + .pipe(startDiff()) + .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) + .pipe(endDiff('minification')) + .pipe(rename({ suffix: '.min' })) + // + + .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 diff --git a/package.json b/package.json index 0abe881..e4b7bcb 100644 --- a/package.json +++ b/package.json @@ -70,24 +70,10 @@ "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": [ "dist/*.css", "LICENSE.md" ] -} +} \ No newline at end of file diff --git a/src/builds/dark-legacy.css b/src/builds/dark-legacy.css deleted file mode 100755 index 7d51f27..0000000 --- a/src/builds/dark-legacy.css +++ /dev/null @@ -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); diff --git a/src/builds/dark-legacy.standalone.css b/src/builds/dark-legacy.standalone.css deleted file mode 100755 index e089e9b..0000000 --- a/src/builds/dark-legacy.standalone.css +++ /dev/null @@ -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'; diff --git a/src/builds/dark.css b/src/builds/dark.css old mode 100644 new mode 100755 index 3805bd9..7203514 --- a/src/builds/dark.css +++ b/src/builds/dark.css @@ -1,12 +1,6 @@ /** - * Dark-themed 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. + * Forced dark theme version */ @import '../variables-dark.css'; -@import '../variables-light.css' (prefers-color-scheme: light); @import '../parts/_core.css'; diff --git a/src/builds/dark.standalone.css b/src/builds/dark.standalone.css deleted file mode 100755 index 7db6fa8..0000000 --- a/src/builds/dark.standalone.css +++ /dev/null @@ -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'; diff --git a/src/builds/light-legacy.css b/src/builds/light-legacy.css deleted file mode 100755 index 1a3eef3..0000000 --- a/src/builds/light-legacy.css +++ /dev/null @@ -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); diff --git a/src/builds/light-legacy.standalone.css b/src/builds/light-legacy.standalone.css deleted file mode 100755 index f201c1a..0000000 --- a/src/builds/light-legacy.standalone.css +++ /dev/null @@ -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'; diff --git a/src/builds/light.css b/src/builds/light.css old mode 100644 new mode 100755 index 41dac0f..b7b8d26 --- a/src/builds/light.css +++ b/src/builds/light.css @@ -1,12 +1,6 @@ /** - * Light-themed 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. + * Forced light theme version */ @import '../variables-light.css'; -@import '../variables-dark.css' (prefers-color-scheme: dark); @import '../parts/_core.css'; diff --git a/src/builds/light.standalone.css b/src/builds/light.standalone.css deleted file mode 100755 index cfd3e83..0000000 --- a/src/builds/light.standalone.css +++ /dev/null @@ -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'; diff --git a/src/builds/water.css b/src/builds/water.css new file mode 100644 index 0000000..32d2d02 --- /dev/null +++ b/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';