O documento apresenta PostCSS como uma ferramenta para transformar estilos CSS usando plugins JavaScript. Discute como PostCSS resolve problemas de lentidão e dependência de sintaxe específica de pré-processadores através de plugins como Autoprefixer, CSSNano e cssnext, que adicionam recursos como variáveis, media queries e nesting ao CSS. O documento também compara PostCSS favoravelmente a pré-processadores como Sass e destaca seu potencial para escrever CSS futuro-proof e independente de sintaxe específica.

1. Desmistificando o PostCSS
Front-End Meetup #5 - Campinas

2. Luís Felipe Souza
www.luisfmsouza.com.br
@luisfmsouz

4. Desde quando PostCSS é místico?

5. Agilidade
Qualidade
Minha realidade
quando ouvi falar
de PostCSS
● Ruby Sass
● Compass
● Sprites
● Nada de Linter
Aproximadamente 1 ano atrás.

6. 3 Problemas do passado

7. 1. Usar pre-processador sem saber o
porque.

8. 2. Lentidão
Ferramentas mais antigas como Ruby Sass e Compass eram muito lentas.

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

10. PostCSS

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

15. CSS In PostCSS Plugin Plugin CSS Out

17. autoprefixer
// Antes
a {
display: flex;
}
// Depois
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}

19. 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";
}

20. 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}

21. Stylelint

22. Plugins
● lost grid
● doiuse
● postcss-style-guide
● postcss-colorblind
● PostStylus
● Rucksack
● cssnext
http://postcss.parts

24. PostCSS left-right
// Antes
body {
text-align: →;
margin-←: 0;
}
// Depois
body {
text-align: right;
margin-left: 0;
}

26. Benchmark

28. 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'] }

30. VS.

31. cssnext
● custom properties & var()
● calc()
● media queries ranges
● nesting
● e mais
You can literally write future-
proof CSS and forget old
preprocessor specific syntax.

32. cssnext - postcss-custom-properties
// Antes
:root {
--color: red;
}
div {
color: var(--color);
}
// Depois
div {
color: red;
}

33. 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;
}
}

34. O que eu não acredito
#polemica

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

36. Dúvidas?

37. Obrigado!