Post on 13-Apr-2017
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!