Desmistificando o PostCSSFront-End Meetup #5 - Campinas

Luís Felipe Souzawww.luisfmsouza.com.br

@luisfmsouz

Desde quando PostCSS é místico?

Agilidade

Qualidade

Minha realidade quando ouvi falar

de PostCSS

● Ruby Sass

● Compass

● Sprites

● Nada de Linter

Aproximadamente 1 ano atrás.

3 Problemas do passado

1. Usar pre-processador sem saber o porque.

2. LentidãoFerramentas mais antigas como Ruby Sass e Compass eram muito lentas.

3. Acreditar que a ferramenta resolverá os problemas de arquitetura e escalabilidade.

PostCSS

“PostCSS is a tool for transforming styles with JS plugins”

CSS In PostCSS Plugin Plugin CSS Out

autoprefixer// Antes

a {

display: flex;

}

// Depois

a {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex

}

postcss-font-magician// Antes

body {

font-family: "Alice";

}

// Depois

@font-face {

font-family: "Alice";

font-style: normal;

font-weight: 400;

src: local("Alice"), local("Alice-Regular"),

url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.

eot?#") format("eot"),

url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.

woff2") format("woff2"),

url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.

woff") format("woff")

}

body {

font-family: "Alice";

}

cssnano// Antes

h1::before, h1:before {

margin: 10px 20px 10px 20px;

color: #ff0000;

-webkit-border-radius: 16px;

border-radius: 16px;

font-weight: normal;

font-weight: normal;

}

// Depois

h1:before{margin:10px 20px;color:red;

border-radius:1pc;font-weight:400}

Stylelint

Plugins● lost grid

● doiuse

● postcss-style-guide

● postcss-colorblind

● PostStylus

● Rucksack

● cssnext

http://postcss.parts

PostCSS left-right// Antes

body {

text-align: →;

margin-←: 0;

}

// Depois

body {

text-align: right;

margin-left: 0;

}

Benchmark

Utilizando// Gulp

gulp.task('css', function () {

var postcss = require('gulp-postcss');

var sourcemaps = require('gulp-sourcemaps');

return gulp.src('src/**/*.css')

.pipe( sourcemaps.init() )

.pipe( postcss([

require('autoprefixer'),

require('precss')

]) )

.pipe( sourcemaps.write('.') )

.pipe( gulp.dest('build/') );

});

// React Inline Styles

var postcss = require('postcss-js');

var prefixer = postcss.sync([ require('autoprefixer')

]);

prefixer({ display: 'flex' });

// => { display: ['-webkit-box', '-webkit-flex', '-ms-

flexbox', 'flex'] }

VS.

cssnext ● custom properties & var()

● calc()

● media queries ranges

● nesting

● e mais

You can literally write future-

proof CSS and forget old

preprocessor specific syntax.

cssnext - postcss-custom-properties// Antes

:root {

--color: red;

}

div {

color: var(--color);

}

// Depois

div {

color: red;

}

cssnext - postcss-media-minmax// Antes

@media screen and (width >= 500px) and (width <= 1200px) {

.bar {

display: block;

}

}

// Depois

@media screen and (min-width: 500px) and (max-width: 1200px) {

.bar {

display: block;

}

}

O que eu não acredito#polemica

PostCSS não vai substituir os pre-processadores, em um curto prazo.

Dúvidas?

Obrigado!