Introduction to PostCSS

Slide 1

Slide 1 text

Introduction to PostCSS @karsanda

Slide 2

Slide 2 text

Popularity • 1.290.870 downloads in the last November • Used by Google, Twitter, Wordpress, Wikipedia, Shopify, Alibaba, etc. source: npm-stat.com

Slide 3

Slide 3 text

PostCSSis… • CreatedbyAndreySitnik,creatorofautoprefixer • Node.js • CSSparser+API • Plugin architecture source: speakerdeck.com/morishitter/introduction-to-postcss

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

How? 1) ConvertsCSSintoASTtreewhichwill representingthestyles 2) Pluginswill modifythetree 3) StringifybacktoCSS source: ai.github.io/about-postcss/en

Slide 6

Slide 6 text

Usage source: speakerdeck.com/morishitter/introduction-to-postcss

Slide 7

Slide 7 text

Usage in Gulp source: speakerdeck.com/morishitter/introduction-to-postcss

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Create Plugin source: speakerdeck.com/morishitter/introduction-to-postcss

Slide 10

Slide 10 text

autoprefixer Addvendor prefixestorulesbyCanI Use source: speakerdeck.com/morishitter/introduction-to-postcss

Slide 11

Slide 11 text

cssnext CSStranspilertouse futureCSSfeaturestoday source: speakerdeck.com/morishitter/introduction-to-postcss

Slide 12

Slide 12 text

cssgrace Addopacity,inline-block,rgba,polyfills,etcforoldIE source: ai.github.io/about-postcss/en

Slide 13

Slide 13 text

postcss-colorblind Seesyourwebsiteasacolorblindpersonmay source: ai.github.io/about-postcss/en

Slide 14

Slide 14 text

rtlcss MirrorstylesforArabicorHebrew source: ai.github.io/about-postcss/en

Slide 15

Slide 15 text

cssnano modularminifier whichoptimizesCSSsizeforuse in production source: madlittlemods.github.io/postcss-presentation

Slide 16

Slide 16 text

Benefits • Modular • Performance • Easytodevelop plugins • Virtuallyunlimited possibilitiesin manipulatingCSS source: ai.github.io/about-postcss/en