postcss

autoprefixer

a {
    -webkit-border-radius: 5px;
            border-radius: 5px;
}

a {
    transition: 1s; /* it will be prefixed */
}

b {
    /* autoprefixer: off */
    transition: 1s; /* it will not be prefixed */
}
.cylon_eye {
  color:white;
  height: 100%;
  width: 20%;
  background-color: red;
  background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  animation: move_eye 4s linear 0s infinite alternate;
}

@keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

cssnext

:root {
    --size: 16px;
    --darkGrey: #383838;
}

@custom-media --mobile (width <= 640px);

@custom-selector --heading h1, h2, h3, h4, h5, h6;

.body --heading {
    margin-top: calc(2 * var(--size));
    color: color(var(--darkGrey) blackness(+40%));
}

@media (--mobile) {
    .body --heading {
        margin-top: calc(var(--size) - 6);
    }
}

gulpfile

gulp = require('gulp')
postcss = require('gulp-postcss')
autoprefixer = require('autoprefixer-core')
customProperties = require('postcss-custom-properties')
nested = require('postcss-nested')
mixins = require('postcss-minxins')

gulp.task('css',-> 
    processors = [
        customProperties,
        nested,
        mixins 
    ]
    gulp.src('src/*.css')
      .pipe(postcss(processors))
      .pipe(gulp.dest('dest/'))
)

gulpfile1

gulp.task( "css", ->
    processors = [
    autoprefixer({broswers: ["last 2 version", ">1%"]},
    csswring({removeAllComments: true})
    ]
    gulp.src("./styles/*.css)
        .pipe(less())
        .pipe(postcss(processors))
        .pipe(gulp.dest("./css))
)