PostCSS - Far beyond preprocessed

Transcript

1. 1.

   postcss Far beyond preprocessed

2. 2.

   Sobre fleury.io

3. 3.

   None
4. 4.

   Cenário atual

5. 5.

   github.com/postcss/postcss

6. 6.

   O que é

7. 7.

   PostCSS is a tool for transforming CSS

8. 8.

   .box { box-sizing: border-box; } .box { box-sizing: border-box; }

9. 9.

   PostCSS is a tool for transforming CSS with JavaScript plugins

10. 10.

    None
11. 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. 12.

    Como funciona

13. 13.

    Parser Plugins Stringifier .css .css

14. 14.

    Anatomia de um plugin

15. 15.

    Como utilizar

16. 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. 17.

    Performance github.com/postcss/benchmark

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

    npm i -D postcss-simple-vars postcss-nested postcss-mixin postcss-import

21. 21.

    npm i -D postcss-simple-vars postcss-nested postcss-mixin postcss-import postcss-extend postcss-conditionals postcss-each

    postcss-property-lookup
22. 22.

    npm i -D precss

23. 23.

    Mas por que parar por aí?

24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 34.

    github.com/assetsjs/postcss-assets body { background: resolve('foobar.jpg'); } postcss-assets body { background:

    url('img/foobar.jpg'); }
35. 35.

    atcss rtlcss csstyle cssnano postcss-cssstats postcss-sprites postcss-use postcss.parts

36. 36.

    Essa não é a única finalidade

37. 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. 38.

    postcss é só uma ferramenta pra processar css.

39. 39.

    Dúvidas?

40. 40.

    Obrigado ( ＾◡＾ )