trivago CSS build demo

.stylelintrc.json

{
  "plugins": [
    "stylelint-declaration-use-variable"
  ],
  "rules": {
    "color-hex-case": ["lower", {"severity": "warning"} ],
    "color-hex-length": ["short", {"severity": "warning"} ],
    "color-named": ["never", {"severity": "warning"} ],
    "time-no-imperceptible": [true, {"severity": "warning"} ],
    "max-nesting-depth": [5, {"severity": "warning"} ],
    "block-no-empty": [null, {"severity": "warning"} ],
    "color-no-invalid-hex": [true, {"severity": "warning"} ],
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "between-comments"],
      "severity": "warning"
    } ],
    "declaration-colon-space-after": ["always", {"severity": "warning"} ],
    "max-empty-lines": [2, {"severity": "warning"}],
    "rule-nested-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"],
      "severity": "warning"
    } ],
    "unit-whitelist": [["px", "em", "rem", "%", "s"], {"severity": "warning"}],
    "sh-waqar/declaration-use-variable": [["/color/", "font-size"], {"severity": "warning"}]
  }
}

gulpfile.js

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    cssnano = require('gulp-cssnano'),
    postcss = require('gulp-postcss'),
    mqpacker = require('css-mqpacker'),
    gutil = require('gulp-util'),
    clean = require('gulp-clean');

/* clean css folder before building
 * included in default task
 */
gulp.task('clean-css', function () {
  return gulp.src('css/**/*', {read: false})
    .pipe(clean());
});

/* node-sass
 * included in default task
 */
gulp.task('sass', ['clean-css'] ,function () {
  return gulp.src('./scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

/* postcss: css-mqpacker with media query sorting option activated
 * included in default task
 */
gulp.task('postcss', ['sass'], function () {
    var processors = [
        mqpacker({sort: true})
    ];
    return gulp.src('./css/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./css'));
});

/* cssnano with disable convertValues and zindex rebasing
 * included in default task
 */
gulp.task('cssnano', ['postcss'], function() {
    return gulp.src('./css/*.css')
        .pipe(cssnano({
                    convertValues: false,
                    zindex: false,
                    reduceIdents: {
                        keyframes: false
                    },
                    discardUnused: {
                        keyframes: false
                    },
                    autoprefixer: {
                        remove: false,
                        add: true,
                        browsers: ['> 1%', 'IE 9'],
                        flexbox: "no-2009",
                        zindex: false
                    }
                }))
        .pipe(gulp.dest('./css'), ['sass']);
});

/* stylelint task
 * configuration file: .stylelintr.json
 */
gulp.task('stylelint', function lintCssTask() {
    const gulpStylelint = require('gulp-stylelint');
    const myStylelintFormatter = require('stylelint-checkstyle-formatter');

    return gulp
        .src('./scss/**/*.scss')
        .pipe(gulpStylelint({
            reportOutputDir: 'reports/lint',
            reporters: [
                {formatter: 'verbose', console: true},
                {formatter: 'json', save: 'report.json'},
                {formatter: myStylelintFormatter, save: 'report.xml'}
            ]
        }));
});

/* watch task
 * watches changes on scss-files and triggers compile
 */
gulp.task('sass:watch', function () {
  gulp.watch('./scss/**/*.scss', ['cssnano']);
});

/* default task
 * compile and post process css
 */
gulp.task('default', ['clean-css','sass', 'postcss', 'cssnano', 'stylelint']);

package.json

{
  "name": "trivago-css",
  "version": "2.9.0",
  "description": "trivago css",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "css-mqpacker": "^4.0.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.1",
    "gulp-cssnano": "^2.1.1",
    "gulp-postcss": "^6.1.0",
    "gulp-sass": "^2.2.0",
    "gulp-shell": "^0.5.2",
    "gulp-stylelint": "^3.0.0",
    "gulp-util": "^3.0.7",
    "stylelint-checkstyle-formatter": "^0.1.0",
    "stylelint-declaration-use-variable": "^1.5.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "css",
    "patternlab"
  ],
  "author": "creinartz",
  "license": "UNLICENSED",
  "private": true
}

Thanks so much for the feedback. This is why I love to share things. Sharing is caring. Your suggestions are very valuable, we are still in the move from scss-lint to stylelint and the prod builds still use scss-lint.
Those builds are mostly done with webpack and this demo just should show which tools we use and therefore I've created this Gulpfile which is only used for some of our side-projects (which don't have their own frontend build stack) and internal testing.
We'll take your suggestions into account, they are very helpful. Thanks a lot!