desmistificando o postcss
TRANSCRIPT
![Page 1: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/1.jpg)
Desmistificando o PostCSSFront-End Meetup #5 - Campinas
![Page 2: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/2.jpg)
Luís Felipe Souzawww.luisfmsouza.com.br
@luisfmsouz
![Page 3: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/3.jpg)
![Page 4: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/4.jpg)
Desde quando PostCSS é místico?
![Page 5: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/5.jpg)
Agilidade
Qualidade
Minha realidade quando ouvi falar
de PostCSS
● Ruby Sass
● Compass
● Sprites
● Nada de Linter
Aproximadamente 1 ano atrás.
![Page 6: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/6.jpg)
3 Problemas do passado
![Page 7: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/7.jpg)
1. Usar pre-processador sem saber o porque.
![Page 8: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/8.jpg)
2. LentidãoFerramentas mais antigas como Ruby Sass e Compass eram muito lentas.
![Page 9: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/9.jpg)
3. Acreditar que a ferramenta resolverá os problemas de arquitetura e escalabilidade.
![Page 10: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/10.jpg)
PostCSS
![Page 11: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/11.jpg)
![Page 12: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/12.jpg)
“PostCSS is a tool for transforming styles with JS plugins”
![Page 13: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/13.jpg)
![Page 14: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/14.jpg)
![Page 15: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/15.jpg)
CSS In PostCSS Plugin Plugin CSS Out
![Page 16: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/16.jpg)
![Page 17: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/17.jpg)
autoprefixer// Antes
a {
display: flex;
}
// Depois
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
![Page 18: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/18.jpg)
![Page 19: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/19.jpg)
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";
}
![Page 20: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/20.jpg)
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}
![Page 21: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/21.jpg)
Stylelint
![Page 22: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/22.jpg)
Plugins● lost grid
● doiuse
● postcss-style-guide
● postcss-colorblind
● PostStylus
● Rucksack
● cssnext
http://postcss.parts
![Page 23: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/23.jpg)
![Page 24: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/24.jpg)
PostCSS left-right// Antes
body {
text-align: →;
margin-←: 0;
}
// Depois
body {
text-align: right;
margin-left: 0;
}
![Page 25: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/25.jpg)
![Page 26: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/26.jpg)
Benchmark
![Page 27: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/27.jpg)
![Page 28: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/28.jpg)
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'] }
![Page 29: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/29.jpg)
![Page 30: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/30.jpg)
VS.
![Page 31: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/31.jpg)
cssnext ● custom properties & var()
● calc()
● media queries ranges
● nesting
● e mais
You can literally write future-
proof CSS and forget old
preprocessor specific syntax.
![Page 32: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/32.jpg)
cssnext - postcss-custom-properties// Antes
:root {
--color: red;
}
div {
color: var(--color);
}
// Depois
div {
color: red;
}
![Page 33: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/33.jpg)
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;
}
}
![Page 34: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/34.jpg)
O que eu não acredito#polemica
![Page 35: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/35.jpg)
PostCSS não vai substituir os pre-processadores, em um curto prazo.
![Page 36: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/36.jpg)
Dúvidas?
![Page 37: Desmistificando o PostCSS](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58eeacee1a28ab395a8b46f1/html5/thumbnails/37.jpg)
Obrigado!