PostCSS - Far beyond preprocessed

A brief point of view of PostCSS

Transcript

1. postcss Far beyond preprocessed
2. Sobre fleury.io
4. Cenário atual
5. github.com/postcss/postcss
6. O que é
7. PostCSS is a tool for transforming CSS
8. .box { box-sizing: border-box; } .box { box-sizing: border-box; }
9. PostCSS is a tool for transforming CSS with JavaScript plugins
11. .box { box-sizing: border-box; } .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } postcss-autoprefixer github.com/postcss/autoprefixer
12. Como funciona
13. Parser Plugins Stringifier .css .css
14. Anatomia de um plugin
15. Como utilizar
16. gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return gulp.src('src/**/*.css') .pipe(postcss([ require('autoprefixer')(), ])) .pipe(gulp.dest('build')); }); github.com/postcss/gulp-postcss
17. Performance github.com/postcss/benchmark
18. “Ah, mas instalar todos os módulos é muito chato, num projeto pequeno eu nunca usaria.” - O chapa que não olha a documentação
19. npm i -D postcss-simple-var postcss-compass postcss-unix-container postcss-cron-job postcss-timezone postcss-laravel postcss-on-rails postcss-windows postcss-dual-boot postcss-iso-burn postcss-kurumin postcss-kernel postcss-elementary-os postcss-hao123 postcss-baidu-protect postcss-pc-safe postcss-baixaki-downloader postcss-babylon-bar postcss-avast postcss-printer postcss-4shared postcss-pomodoro postcss-cpu postcss- intel postcss-megaupload postcss-vga postcss-short-circuit postcss-electron postcss- pcmegarapido postcss-adware postcss-bobrowser postcss-mobral postcss-css postcss- alabama-hot-pocket postcss-alaskan-pipeline postcss-suporte-tecnico postcss-ie7 postcss-ie5 postcss-netscape postcss-lorem-ipsum postcss-cold-reload postcss- angolarjs postcss-reativo postcss-rejectjs postcss-refluxo postcss-corotinho postcss- 51 postcss-pao-de-batata postcss-calcanhar-de-maracuja postcss-barrigudinha postcss-duelo postcss-chalise postcss-xandonzinho postcss-dolly-cola postcss-xamego postcss-dolly-citrus postcss-wesley-safadao postcss-carta-do-temer postcss-13-na-urna postcss-arte-na-praia postcss-miçanga postcss-pulserinha-do-bonfim postcss-de-humanas postcss-bolacha postcss-é-biscoito postcss-suissa postcss-wakemeupinside postcss- gotico-suave postcss-keit-amy-lee postcss-haddad-tranquilao postcss-malddad postcss- dogola postcss-3.80-nao postcss-nao-sao-so-30-centavos postcss-naovaitercopa postcss- vaitercopa postcss-ccleaner postcss-mackeeper postcss-defrag postcss-material postcss-definicoes-de-virus-foram-atualizadas postcss-league-of-lixos postcss-cszinho postcss-dotinha postcss-video-promo postcss-bauducco postcss-e-o-bambu postcss-peru postcss-picole-de-chuchu postcss-alckmin postcss-chega postcss-go-bus
20. npm i -D postcss-simple-vars postcss-nested postcss-mixin postcss-import
21. npm i -D postcss-simple-vars postcss-nested postcss-mixin postcss-import postcss-extend postcss-conditionals postcss-each postcss-property-lookup
22. npm i -D precss
23. Mas por que parar por aí?
24. @alias { fs: font-size; fw: font-weight; bg: background; } .foo { fs: 16px; fw: 400; transition: bg 200ms ease; } .foo { font-size: 16px; font-weight: 400; transition: background 200ms ease; } postcss-alias github.com/seaneking/postcss-alias
25. postcss-custom-selectors (W3C specs) github.com/postcss/postcss-custom-selectors @custom-selector :--heading h1, h2, h3, h4, h5, h6; article :--heading + p { margin-top: 0; } article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p { margin-top: 0; }
26. postcss-define-property github.com/daleeidd/postcss-define-property size: $height $width { height: $height; width: $width; } .rectangle { size: 50px 100px; } .rectangle { height: 50px; width: 100px; }
27. doiuse (caniuse api) github.com/anandthakker/doiuse .box { transform: scaleX(2) user-select: none; } box.css: line 2, col 3: CSS3 Transforms not supported by: IE (8) box.css: line 3, col 3: CSS user-select: none not supported by: IE (8,9)
28. cssgrace github.com/cssdream/cssgrace .bar { display: inline-block; opacity: .5; } .bar { display: inline-block; *display: inline; *zoom: 1; opacity: .5; filter: alpha(opacity=50); }
29. postcss-js github.com/postcss/postcss-js let prefixer = postcssJs.sync([ autoprefixer ]); let style = prefixer({ border-radius: '10px' }); { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
30. .block { all: initial; } postcss-autoreset .block { ... backface-visibility: visible; border: medium none; border-radius: 0; border-collapse: separate; border-spacing: 0; bottom: auto; box-shadow: none; ... } github.com/maximkoretskiy/postcss-autoreset
31. .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; } css-modules .className-x12zl { color: green; background: red; } .otherClassName-x11zl { color: yellow; } github.com/css-modules/css-modules
32. @svg-load nav url(img/nav.svg) { fill: #cfc; path:nth-child(2) { fill: #ff0; } } .nav { background: svg-inline(nav); } postcss-inline-svg .nav { background: url(data:image/svg;... } github.com/TrySound/postcss-inline-svg
33. github.com/jonathantneal/postcss-font-magician body { font-family: 'Alice'; } font-magician @font-face { font-family: "Alice"; font-style: normal; font-weight: 400; src: local("Alice"), local("Alice-Regular"), ... } body { font-family: "Alice"; }
34. github.com/assetsjs/postcss-assets body { background: resolve('foobar.jpg'); } postcss-assets body { background: url('img/foobar.jpg'); }
35. atcss rtlcss csstyle cssnano postcss-cssstats postcss-sprites postcss-use postcss.parts
36. Essa não é a única finalidade
37. import fs from 'fs'; import postcss from 'postcss'; let className = postcss.rule({ selector: '.classname' }) .append({ prop: 'color', value: 'black' }); let stylesheet = postcss.root().append(className); fs.writeFileSync('style.css', stylesheet.toResult().css); github.com/postcss/postcss/blob/master/docs/api.md
38. postcss é só uma ferramenta pra processar css.
39. Dúvidas?
40. Obrigado ( ＾◡＾ )