Introduction to PostCSS

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_