Configurando CSSNext en nuestro archivo Gulp

Clase 7 de 21 • Diseño web con PostCSS, el futuro de CSS

Clase anteriorSiguiente clase

Resumen

Ahora sí, a usar el CSS del futuro. Primero, te dejamos la documentación del plugin: 


http://cssnext.io/features/


De nuevo, con ayuda de NPM, descargamos cssnext:


npm install --save-dev postcss-cssnext 


Y luego lo agregamos a nuestros Gulp. Además,  CSSnext ya cuenta con autoprefixer, podemos ya olvidarnos de ese plugin, sin olvidar la configuración que teníamos para el mismo: 


gulp.task(‘css’,function () {
var processors = [
    cssnested,
    cssnext({  browsers: [ ‘> 5%’, ’ie 8 ’ ]  })
) 
]
return gulp.src(‘./src/*.css’)
.pipe(postcss(processor))
.pipe(gulp.dest(‘./dist/css’’)) 
.pipe(browserSync.stream()) 
})


El orden de los plugins afectan el resultado. Nested debe ir primero, ya que usaremos primeramente la indentación en las clases, y luego, dentro de los mismos, los estilos de CSSNext.