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 for sharing this! It's especially useful to see a CSS gulp file that brings together a handful of PostCSS-powered tools: cssnano, stylelint and mqpacker.

I contribute to stylelint and in your tweet you mentioned that your config was in beta. So, I had a quick look and I've a couple of suggestions to help you on your way:

1. The defaultSeverity config property was added in stylelint@7.0.0. You can avoid having to set the severity to "warning" on every rule by using it.
2. You might want to consider using stylelint-config-standard as a foundation. It provides sensible defaults for the code style (e.g. declaration-colon-space-after) and error checking (e.g. color-hex-no-invalid) rules within stylelint. You can then layer on rules specific to your code base and team. For example, whitelisting CSS features (e.g. unit-whitelist, color-named etc), using consistent quotes (e.g. string-quotes) and enforcing naming conventions (e.g. selector-class-pattern). We release a new version of stylelint-config-standard alongside each release of stylelint, which makes getting the latest error checking rules more convenient. Crafting your own config from the ground up is an appropriate way to go about it too though, especially if you want to precisely build up your config over time.

Good luck and thanks again for sharing your CSS build setup :)

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!