Slide 1

Slide 1 text

postcss Far beyond preprocessed

Slide 2

Slide 2 text

Sobre fleury.io

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Cenário atual

Slide 5

Slide 5 text

github.com/postcss/postcss

Slide 6

Slide 6 text

O que é

Slide 7

Slide 7 text

PostCSS is a tool for transforming CSS

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

PostCSS is a tool for transforming CSS with JavaScript plugins

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

.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

Slide 12

Slide 12 text

Como funciona

Slide 13

Slide 13 text

Parser Plugins Stringifier .css .css

Slide 14

Slide 14 text

Anatomia de um plugin

Slide 15

Slide 15 text

Como utilizar

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Performance github.com/postcss/benchmark

Slide 18

Slide 18 text

“Ah, mas instalar todos os módulos é muito chato, num projeto pequeno eu nunca usaria.” - O chapa que não olha a documentação

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

npm i -D precss

Slide 23

Slide 23 text

Mas por que parar por aí?

Slide 24

Slide 24 text

@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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

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); }

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

.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

Slide 31

Slide 31 text

.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

Slide 32

Slide 32 text

@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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Essa não é a única finalidade

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

postcss é só uma ferramenta pra processar css.

Slide 39

Slide 39 text

Dúvidas?

Slide 40

Slide 40 text

Obrigado ( ^◡^ )