Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to PostCSS

Introduction to PostCSS

at CodeGrid 3rd anniversary party

3cf7515c93d2f278420f0147788c8e23?s=128

Masaaki Morishita

May 08, 2015
Tweet

Transcript

  1. Introduction to PostCSS @morishitter_

  2. CodeGrid 3प೥ ͓ΊͰͱ͏͍͟͝·͢ʂʂ

  3. About me • Masaaki Morishita • twitter: @morishitter_ • github:

    morishitter • blog: http://morishitter.hatenablog.com • αΠόʔΤʔδΣϯτ ৽ଔ1೥໨
  4. What is PostCSS

  5. PostCSS • https://github.com/postcss/postcs • Node.js੡ • CSS Parser + API

    • Plugin Architecture
  6. PostCSS Parser Plugin Plugin Stringifier CSS New CSS

  7. The Beginning is ..

  8. Rework “Modular CSS Preprocessing with Rework” ― TJ Holowaychuk http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework

    “Custom CSS Preprocessing” ― Nicolas Gallagher http://nicolasgallagher.com/custom-css-preprocessing/
  9. Rework PostCSS • First • Simple • Fast • Smarter

    Parser • Useful API • Source Maps
  10. PostCSS is Fast http://ai.github.io/about-postcss/en/?full#40

  11. PostCSS is Fast

  12. Smarter Parser • τʔΫϯͷલޙͷۭന΍վߦ • ਌ϊʔυΛࢀর • ຤ඌͷϓϩύςΟએݴͷηϛίϩϯͷ༗ແ • etc..

  13. Useful API

  14. How to use PostCSS

  15. Usage var postcss = require(‘postcss’) postcss([plugin_1,ɹplugin_2]) .process(css) .then(function (result) {

    console.log(result) })
  16. Usage in gulp .pipe(postcss([ require(‘postcss-nested'), require('postcss-simple-vars'), require('postcss-mixins'), require('postcss-easings'), require('cssnext') ]))

  17. Create Plugins var postcss = require('postcss'); module.exports = postcss.plugin('PLUGIN_NAME', function

    (opts) { opts = opts || {}; // Work with options here return function (css) { // Transform CSS AST here }; }); Use postcss-plugin-boilerplate
  18. The Extensible Web Write PostCSS plugins Popularity Specification

  19. The Difference between Existing Preprocessors

  20. Difference Existing Preprocessor (like Sass) PostCSS ɾMonolithic ɾCode inside CSS

    template ɾTuring Complete ɾModular ɾMaintainable
 ɾAll features by plugins ɾJS transforms CSS
  21. The Tools Built with PostCSS

  22. a { display: flex; } Autoprefixer a { display: -webkit-box;

    display: -webkit-flex; display: -ms-flexbox; display: flex } Add vendor prefixes to rules by Can I Use
  23. cssnext @custom-selector --heading h1, h2, h3, h4, h5, h6; .post-article

    --heading { margin-top: calc(10 * var(--row)); color: color( var(--mainColor) blackness(+20%) ); font-variant-caps: small-caps; } CSS transpiler to use tomorrow's CSS syntax today
  24. Pleeease Simplifies the use of preprocessors and combines them with

    best postprocessors.
  25. AtCSS .base { /* * @base * @constant */ font-size:

    12px; padding: 8px 16px; } .class { /* @extend .base */ background-color: #eee; } Annotations based CSS Processor
  26. AtCSS http://morishitter.hatenablog.com/entry/2015/03/16/100122 AtCSS: Annotation based CSS Processor GitHub https://github.com/morishitter/atcss

  27. PostCSS is downloaded 430,000 per month

  28. PostCSS Users • Twitter • Google • Wordpress • etc…

  29. None
  30. PostCSS is Awesome !!

  31. Thanks :D @morishitter_