When you are too lazy or too smart in CSS development.

1. Getting Started with PostCSS
When you are too lazy or too smart
By: Neha Sharma | @hellonehha | nehha255@gmail.com

2. AGENDA
- Introduction to PostCSS
- Popularity of PostCSS
- API of PostCSS
- Advantages of PostCSS
- How to Use PostCSS with Grunt, Gulp, Webpack
- Explore PostCSS Plugins
- Who is using PostCSS
- What is PostCSS is NOT
- Where to use PostCSS

3. WHAT IS POSTCSS?

4. PostCSS is developed by Andrey Sitnik, creator of Autoprefixer, it was launched as a method to use
JavaScript for CSS processing. It is a way of reinventing the css with an ecosystem of custom
plugins and tools. It extends the features, syntaxes and enhance the css into browser friendly css.

5. PostCSS on its own is simply an API, which, when used with its vast ecosystem of plugins, offers
powerful abilities. It uses the Nodejs Framework - the abilities of the language and tools can be easily
modified and customized as needed. PostCSS is agnostic to language format and allows the syntax of
different preprocessors such as less, SASS etc

6. Postcss has been growing in popularity.In 2014 there were a little under 1.4 million downloads in total for
the year, but from in 2015 there had already been 9.3 million downloads. Source

7. As per the PostCSS github Page:
“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables
and mixins, transpile future CSS syntax, inline images, and more.”

8. PostCSS uses Nodejs framework that parse the CSS into the Abstract Syntax tree. Passes that AST through any number
of plugin functions and then converts that AST backs into a string which can output to a file.
1) css.eachRule() // to cycle through each rule set in a file
2) rule.eachDecl() // to cycle through each declaration
3) rule.selector() // to get the selector of a rule
4) atRule.name() // name of an at-rule
These APIs make much easier for developer understand how and where the is being transformed and makes easy to work
with CSS and to creates its own plugin.It modifies comments, declatation, rules, etc.

9. In a nutshell, PostCSS is more than a pre-processor and it is not Post-processor.
PostCSS is a wrapper for lot of things (plugins) to make your css workflow easy and fast. It is a tool for transforming your
CSS to JS Plugin
PostCSS itself do not parse your css.You need to install itsplugins and based on its requirement plugins will or will not parse
your CSS to give you the desire output. It parse your css into the nodes, you can access every node and do the operation
as required.

10. Advantages of PostCSS

11. PERFORMANCE
““““
TAKES YOU IN
FUTURE
TAKE CARE OF
OLD
BROWSERS
CREATE YOUR
PLUGINS
USE WITH
REGULAR CSS
EASILY
DEPLOY WITH
OTHER TOOLS
MODULAR CSS
LOTS OF
PLUGINS
AUTOMATE
YOUR CSS
3X FASTER
WRITE SASS
WITHOUT
SASS

12. HOW TO USE?

13. PostCSS can be installed with gulp, Grunt, webpack, Broccoli and by CLI too.
It is very easy to install and use with other tools. In 2 simple steps we can start using the PostCSS:
1- Find and add PostCSS extensions for your build tool.
2- Select plugins and add them to your PostCSS process.
Currently, PostCSS has more than 200 plugins. You can find all of the plugins in the plugins list or in the searchable
catalog.

17. Grunt

19. EXPLORE
We will be exploring few most popular plugins of postcss with the grunt build tool

20. - Images and Fonts
- Grids
- Optimizations
- Shortcuts
- Others
PostCSS have lot of plugins related to one can think of and can use any to enhance your work. Do check
all the details at
- Packs
- Future CSS Syntax
- Fallbacks
- Language Extensions
- Colors
- Analysis
- Reporters
- Fun

21. Install Grunt & PostCSS
1- Download nodejs
2- Create your project folder
3- Run command < npm install init >
4- Follow the commands to create package.json
5- Create gruntfile.js to load the package.json
6- Run the command to install PostCSS <npm install grunt-postcss --save-dev >
7- Load the package in gruntfile.js refer to slide 17-18
7- Congratulations your Postcss is installed

22. auto-prefixer
Autoprefixer lets you write normal css and makes you forget about prefix as it will handle it by itself. Autoprefix will parse
your css and add vendor prefixes to css rule using values from http://caniuse.com/ .It is highly recommended and used by
Google, twitter.
You can try the interactive demo too. http://autoprefixer.github.io/
Features:
- Remove outdated prefixes
- Browser support
- Actual prefix
- Pure css
- Support SASS, LESS and Stylus too

23. $npm install grunt-postcss autoprefixer

25. When to use?
- When you are too lazy to take care of support of css property on each browser
- When you are too smart to leave it on the plugin to take care when to add prefix and when to not
- When you want your project to follow the latest support

26. cssnano
CSSnano is built on the top of the POSTCss ecosystem.It is more than just a simple optimization tool. It do advance level of
optimization by taking your beautiful written css into high level optimized and clean output. http://cssnano.co/
Features:
- Vendor aware rule merging
- Pseudo element double-colon syntax reduction
- Optimize the z-index value
- Remove the outdated pre-fixes
- Remove the unused selectors
- Convert the font-weight to value
- optimize the font-family name
- Conversion of length, time & color values

29. precss
PreCSS is a tool that let you write your normal css in SASS way. You can enjoy writing Variables, mixins, extends and more
sass like syntaxes in your normal CSS.
Features:
- Let you write SASS like syntax in normal CSS
- Let you add Variables
- Let you add mixins
- Let you add extends
- and much more

32. CSSnext
cssnext is a css transpiler that allows you to use the latest CSS syntax today. It transforms new CSS specs into more
compatible CSS so you don’t need to wait for browser support.A lot of work has been made by the W3C to write new specs
to make our life easier which will be coming soon. CSSNext , let us use these new features today itself.
Check - http://cssnext.io/
Features:
- Custom Variables and properties
- Custom media queries
- Custom selectors
- filters
- not pseudo-class
- gray support()
- automatic prefix support
- and many more
You can try the interactive demo http://cssnext.io/playground/

35. Who is using PostCSS?
Google, Shopify, Twitter Bootstrap, codepen,
alibaba, and wordpress are few of the names
which are using the PostCSS plugins.
Codepen.io recently started the support of the
PostCSS plugin.

36. What PostCSS is not?
- It is not post processor
- It is not pre-processor
- It is not build suit
- It won’t replace Grunt/Gulp
- It is not something for fallbacks
- It is not Future css syntax
- It is not for optimization and clean CSS

37. Where to use PostCSS
- Everywhere
- When you want to write CSS as SASS without using sass
- When you want to do more by just one plugin
- When you want to write Modular CSS not SCSS
- When you are CSS Developer who wants to code smarter
- When you are too lazy for lots of tasks
- When you want to take your css work to next level
- When you are ready to explore , experiment and enhance yourself

38. Further Reads:
https://github.com/postcss/postcss
https://twitter.com/PostCSS

39. Reference
- Smashing Magazine
- Webdesign tutsplus
- Google
- https://github.com/postcss/postcss
- and plugins websites

40. Thankyou!