PostCSS - Far beyond preprocessed

PostCSS - Far beyond preprocessed

A brief point of view of PostCSS

581cb8f71ca339cde0a7412eec1a0307?s=128

Fernando Fleury

January 27, 2016
Tweet

Transcript

  1. 3.
  2. 10.
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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; }
  9. 26.
  10. 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)
  11. 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); }
  12. 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; }
  13. 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
  14. 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
  15. 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
  16. 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"; }
  17. 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
  18. 39.