Merge pull request #106 from unic/feat(estatico-sass)--update-postcss

feat(estatico-sass): fix several issues

packages/estatico-sass/index.js

@@ -1,7 +1,18 @@
-/* eslint-disable global-require */
+const { Transform } = require('stream');
 const { Plugin, Logger } = require('@unic/estatico-utils');
 const Joi = require('joi');
 
+const gulp = require('gulp');
+const plumber = require('gulp-plumber');
+const sass = require('gulp-sass');
+const conditionally = require('gulp-if');
+const postcss = require('gulp-postcss');
+const presetEnv = require('postcss-preset-env');
+const cssnano = require('cssnano');
+const rename = require('gulp-rename');
+const filter = require('gulp-filter');
+const size = require('gulp-size');
+
 // Config schema used for validation
 const schema = Joi.object().keys({
   src: [Joi.string().required(), Joi.array().required()],
@@ -36,29 +47,21 @@ const schema = Joi.object().keys({
  * @param {object} env - Optional environment config, e.g. { dev: true }
  * @return {object}
  */
-const defaults = (env = {}) => {
-  const autoprefixer = require('autoprefixer');
-  const clean = require('postcss-clean');
-  const filterStream = require('postcss-filter-stream');
-
-  return {
-    src: null,
-    srcBase: null,
-    dest: null,
-    watch: null,
-    minifiedSuffix: '.min',
-    plugins: {
-      sass: {
-        includePaths: null,
-      },
-      clone: env.ci,
-      postcss: [
-        autoprefixer(),
-      ].concat(env.dev ? [] : filterStream(['**/*', '!**/*.min*'], clean())),
+const defaults = () => ({
+  src: null,
+  srcBase: null,
+  dest: null,
+  watch: null,
+  plugins: {
+    sass: {
+      includePaths: null,
     },
-    logger: new Logger('estatico-sass'),
-  };
-};
+    postcss: [
+      presetEnv(),
+    ],
+  },
+  logger: new Logger('estatico-sass'),
+});
 
 /**
  * Task function
@@ -67,87 +70,47 @@ const defaults = (env = {}) => {
  * @param {object} [watcher] - Watch file events (requires `@unic/estatico-watch`)
  * @return {object} gulp stream
  */
-const task = (config, env = {}, watcher) => {
-  const chalk = require('chalk');
-  const path = require('path');
-  const gulp = require('gulp');
-  const plumber = require('gulp-plumber');
-  const sass = require('gulp-sass');
-  const postcss = require('gulp-postcss');
-  const sourcemaps = require('gulp-sourcemaps');
-  const through = require('through2');
-  const ignore = require('gulp-ignore');
-  const size = require('gulp-size');
-
-  const autoprefixer = config.plugins.postcss.find(plugin => plugin.postcssPlugin === 'autoprefixer');
-
-  if (autoprefixer) {
-    const info = autoprefixer.info();
-
-    config.logger.debug('autoprefixer', info);
-  }
-
-  return gulp.src(config.src, {
-    base: config.srcBase,
-  })
-
-    // Prevent stream from unpiping on error
-    .pipe(plumber())
-
-    // Decide based on watcher dependency graph which files to pass through
-    .pipe(through.obj((file, enc, done) => {
+const task = (config, env = {}, watcher) => gulp.src(config.src, {
+  base: config.srcBase,
+  sourcemaps: env.dev,
+})
+  .pipe(plumber())
+  // check whether the current file can be skipped
+  .pipe((() => new Transform({
+    objectMode: true,
+    transform(file, _encoding, done) {
       if (watcher && watcher.matchGraph && !watcher.matchGraph(file.path)) {
         return done();
       }
 
       return done(null, file);
-    }))
-
-    .pipe(sourcemaps.init())
-
-    // Sass
-    .pipe(sass(config.plugins.sass).on('error', err => config.logger.error(err, env.dev)))
-
-    // Clone for production version
-    .pipe(config.plugins.clone ? through.obj(function (file, enc, done) { // eslint-disable-line
-      const clone = file.clone();
-
-      clone.path = file.path.replace(path.extname(file.path), ext => `${config.minifiedSuffix}${ext}`);
-
-      config.logger.debug(`Cloned ${chalk.yellow(file.path)} to ${chalk.yellow(clone.path)} to keep unminified files`);
-
-      this.push(clone);
-
-      done(null, file);
-    }) : through.obj((file, enc, done) => {
-      if (!env.dev) {
-        file.path = file.path.replace(path.extname(file.path), ext => `${config.minifiedSuffix}${ext}`); // eslint-disable-line no-param-reassign
-      }
-
-      done(null, file);
-    }))
-
-    // PostCSS
-    .pipe(postcss(config.plugins.postcss))
-
-    // Add sourcemaps files to stream
-    .pipe(sourcemaps.write('.', {
-      includeContent: false,
-      sourceRoot: config.srcBase,
-    }))
-
-    // Save
-    .pipe(gulp.dest(config.dest))
-
-    // Remove sourcemaps before logging size
-    .pipe(ignore.exclude(file => path.extname(file.path) === '.map'))
-
-    // Log size
-    .pipe(size({
-      showFiles: true,
-      title: 'estatico-sass',
-    }));
-};
+    },
+  }))())
+  // transpile scss to css
+  .pipe(sass.sync(config.plugins.sass).on('error', sassError => config.logger.error(sassError, env.dev)))
+  // pipe through postcss without minifying it
+  .pipe(postcss(config.plugins.postcss))
+  // write unminified files to disk
+  .pipe(gulp.dest(config.dest, {
+    sourcemaps: '.',
+  }))
+  // filter out sourcemaps from the stream, if present
+  .pipe(filter(['**', '!**/*.css.map']))
+  // pipe through cssnano and minify when not in dev mode
+  .pipe(conditionally(!env.dev, postcss([
+    cssnano(),
+  ])))
+  // rename to ${file}.min.css when not in dev mode
+  .pipe(conditionally(!env.dev, rename({
+    suffix: '.min',
+  })))
+  // write minified files to disk when not in dev mode
+  .pipe(conditionally(!env.dev, gulp.dest(config.dest)))
+  // log stats to console
+  .pipe(size({
+    showFiles: true,
+    title: 'estatico-sass',
+  }));
 
 /**
  * @param {object|func} options - Custom config

packages/estatico-sass/package.json

@@ -1,44 +1,44 @@
 {
   "name": "@unic/estatico-sass",
-  "version": "0.0.14",
-  "description": "",
+  "version": "1.0.0",
+  "description": "Compiles Sass to CSS using node-sass and postcss.",
   "main": "index.js",
-  "scripts": {
-    "test": "ava test/index.js --serial --verbose",
-    "lerna-test": "lerna exec --scope @unic/estatico-sass -- npm test"
-  },
+  "repository": "https://github.com/unic/estatico-nou.git",
+  "homepage": "https://github.com/unic/estatico-nou/tree/develop/packages/estatico-sass",
+  "bugs": "https://github.com/unic/estatico-nou/issues",
   "author": "Unic AG",
-  "repository": "https://github.com/unic/estatico-nou/tree/master/packages/estatico-sass",
   "license": "Apache-2.0",
-  "dependencies": {
-    "@unic/estatico-utils": "0.0.10",
-    "@unic/estatico-watch": "^0.0.12",
-    "autoprefixer": "^9.1.5",
-    "chalk": "^2.4.1",
-    "gulp-ignore": "^2.0.2",
-    "gulp-plumber": "^1.2.0",
-    "gulp-postcss": "^8.0.0",
-    "gulp-sass": "^4.0.1",
-    "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.4",
-    "joi": "^13.2.0",
-    "lodash.merge": "^4.6.1",
-    "postcss-clean": "^1.1.0",
-    "postcss-filter-stream": "^0.0.6",
-    "through2": "^2.0.3"
-  },
   "engines": {
     "node": ">=8"
   },
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@unic/estatico-utils": "0.0.10",
+    "@unic/estatico-watch": "^0.0.12",
+    "cssnano": "^4.1.10",
+    "gulp-filter": "^6.0.0",
+    "gulp-if": "^3.0.0",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^9.0.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-size": "^3.0.0",
+    "joi": "^13.2.0",
+    "postcss": "^8.2.4",
+    "postcss-preset-env": "^6.7.0"
+  },
   "devDependencies": {
     "ava": "^0.25.0",
-    "del": "^3.0.0",
+    "del": "^6.0.0",
     "sinon": "^5.0.7"
   },
   "peerDependencies": {
-    "gulp": ">=3.9.0"
+    "gulp": ">=4"
+  },
+  "scripts": {
+    "test": "ava test/index.js --serial --verbose",
+    "lerna-test": "lerna exec --scope @unic/estatico-sass -- npm test"
   }
 }