Introduction to PostCSS

at CodeGrid 3rd anniversary party

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…
30. PostCSS is Awesome !!
31. Thanks :D @morishitter_