Introduction to PostCSS

PostCSS adalah sebuah CSS parser tool yang dapat memanipulasi CSS sesuai dengan plugin JavaScript yang digunakan.
PostCSS mudah dipelajari dan memiliki performa yang sangat baik jika dibandingkan dengan tools CSS yang lain. Namun, daya tarik terbesar dari postCSS adalah kebolehan untuk memanipulasi CSS sesuai keinginan kita dengan kemungkinan yang hampir tidak terbatas.

Transcript

1. Introduction to PostCSS @karsanda
2. Popularity • 1.290.870 downloads in the last November • Used by Google, Twitter, Wordpress, Wikipedia, Shopify, Alibaba, etc. source: npm-stat.com
3. PostCSSis… • CreatedbyAndreySitnik,creatorofautoprefixer • Node.js • CSSparser+API • Plugin architecture source: speakerdeck.com/morishitter/introduction-to-postcss
4. PostCSSis… “PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables andmixins,transpilefutureCSSsyntax,inline images,andmore.” source: github.com/postcss/postcss
5. How? 1) ConvertsCSSintoASTtreewhichwill representingthestyles 2) Pluginswill modifythetree 3) StringifybacktoCSS source: ai.github.io/about-postcss/en
6. Usage source: speakerdeck.com/morishitter/introduction-to-postcss
7. Usage in Gulp source: speakerdeck.com/morishitter/introduction-to-postcss
8. PostCSSPlugin • JavaScript function that receives and, usually, transforms a CSS AST from the PostCSS parser • What it can do… • Essentially, no limitations onthe kind of manipulation PostCSS plugins can apply to CSS source: github.com/postcss/postcss o behavelikepreprocessors o optimizeandautoprefixcode o fallbacks o addfutureCSSsyntax o code shortcuts,linting,analytics,languageextension,grid,etc.
9. Create Plugin source: speakerdeck.com/morishitter/introduction-to-postcss
10. autoprefixer Addvendor prefixestorulesbyCanI Use source: speakerdeck.com/morishitter/introduction-to-postcss
11. cssnext CSStranspilertouse futureCSSfeaturestoday source: speakerdeck.com/morishitter/introduction-to-postcss
12. cssgrace Addopacity,inline-block,rgba,polyfills,etcforoldIE source: ai.github.io/about-postcss/en
13. postcss-colorblind Seesyourwebsiteasacolorblindpersonmay source: ai.github.io/about-postcss/en
14. rtlcss MirrorstylesforArabicorHebrew source: ai.github.io/about-postcss/en
15. cssnano modularminifier whichoptimizesCSSsizeforuse in production source: madlittlemods.github.io/postcss-presentation
16. Benefits • Modular • Performance • Easytodevelop plugins • Virtuallyunlimited possibilitiesin manipulatingCSS source: ai.github.io/about-postcss/en
17. Demo
18. Thank You!