Introduction to PostCSS

at CodeGrid 3rd anniversary party

Transcript

1. Introduction to PostCSS
   @morishitter_
   

   View Slide

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

   View Slide

3. About me
   • Masaaki Morishita
   • twitter: @morishitter_
   • github: morishitter
   • blog: http://morishitter.hatenablog.com
   • αΠόʔΤʔδΣϯτ ৽ଔ1೥໨
   

   View Slide

4. What is PostCSS
   

   View Slide

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

   View Slide

6. PostCSS
   Parser
   Plugin
   Plugin
   Stringifier
   CSS
   New CSS
   

   View Slide

7. The Beginning is ..
   

   View Slide

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/
   

   View Slide

9. Rework PostCSS
   • First
   • Simple
   • Fast
   • Smarter Parser
   • Useful API
   • Source Maps
   

   View Slide

10. PostCSS is Fast
    http://ai.github.io/about-postcss/en/?full#40
    

    View Slide

11. PostCSS is Fast
    

    View Slide

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

    View Slide

13. Useful API
    

    View Slide

14. How to use PostCSS
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

18. The Extensible Web
    Write PostCSS plugins
    Popularity
    Specification
    

    View Slide

19. The Difference between
    Existing Preprocessors
    

    View Slide

20. Difference
    Existing Preprocessor
    (like Sass)
    PostCSS
    ɾMonolithic
    ɾCode inside CSS template
    ɾTuring Complete
    ɾModular
    ɾMaintainable

    ɾAll features by plugins
    ɾJS transforms CSS
    

    View Slide

21. The Tools Built with
    PostCSS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Pleeease
    Simplifies the use of preprocessors and combines
    them with best postprocessors.
    

    View Slide

25. AtCSS
    .base {
    /*
    * @base
    * @constant
    */
    font-size: 12px;
    padding: 8px 16px;
    }
    .class {
    /* @extend .base */
    background-color: #eee;
    }
    Annotations based CSS Processor
    

    View Slide

26. AtCSS
    http://morishitter.hatenablog.com/entry/2015/03/16/100122
    AtCSS: Annotation based CSS Processor
    GitHub
    https://github.com/morishitter/atcss
    

    View Slide

27. PostCSS is downloaded
    430,000 per month
    

    View Slide

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

    View Slide

29. View Slide

30. PostCSS is Awesome !!
    

    View Slide

31. Thanks :D
    @morishitter_
    

    View Slide