# PostCSS
You can follow along [here](https://madlittlemods.github.io/postcss-presentation/): `https://madlittlemods.github.io/postcss-presentation/`
## So what does PostCSS do?
> PostCSS can do the same work as preprocessors like Sass, Less, and Stylus.
>
> But PostCSS is modular, 3-30 times faster, and much more powerful.
>
> [* -- PostCSS readme intro paragraph*](https://github.com/postcss/postcss)
### But how?
1. Converts your CSS into an AST tree representing your styles *(think: a JS object {} with properties)*
1. Plugins you choose, modify the tree
1. Stringify back to CSS
Neat fact:
> This is a lossless process
> What goes in, comes out
> *(assuming you don't modify the tree)*
### Some benefits
- Modular
- Use only what you need
- Easier to reason about
- Easier to contribute
- Easier to isolate, debug, and write tests
- Runs in the browser
- Easy to develop plugins, just JS
- I have developed and released a [couple of plugins](https://www.npmjs.com/~mlm)
### *Soooo*
### *what about those plugins...*
##### Nesting and Parent reference
#### [`postcss-nested`](https://github.com/postcss/postcss-nested)
##### Variables
##### Reduce `calc` whenever possible
#### [`postcss-calc`](https://github.com/postcss/postcss-calc)
##### Error reporting when the build fails
#### [`postcss-browser-reporter`](https://github.com/postcss/postcss-browser-reporter)
##### Only apply plugins to certain portions of CSS
#### [`postcss-plugin-context`](https://github.com/postcss/postcss-plugin-context)
##### Minify CSS *(to the max!)*
#### [`cssnano`](http://cssnano.co/)
##### Autoprefixer
#### [`autoprefixer`](https://github.com/postcss/autoprefixer)
##### Sprite images
#### [`postcss-sprites`](https://github.com/2createStudio/postcss-sprites)
```css
.arrows {
background-image: url(images/sprite/arrows.png);
}
.logo {
background-image: url(images/sprite/logo.png);
}
```
```css
.arrows {
background-image: url(images/sprite.png);
background-position: 0 0;
}
.logo {
background-image: url(images/sprite.png);
background-position: 0 -50px;
}
```
##### Lint your CSS
#### [`stylelint`](https://github.com/stylelint/stylelint)
```js
'use strict';
let postcss = require('postcss');
let stylelint = require('stylelint');
let reporter = require('postcss-reporter');
let mycss = stripIndentTag`.foo {}`;
var output = postcss([
stylelint({
"rules": {
"color-no-invalid-hex": 2,
"declaration-colon-space-before": [2, "never"],
"indentation": [2, "tab"],
"number-leading-zero": [2, "always"]
}
}),
reporter({
clearMessages: true,
})
])
.process(mycss)
.css;
```
### And many more
Checkout the [plugins section in the readme](https://github.com/postcss/postcss#plugins).
### PostCSS 5.x introduces [custom syntaxes](https://github.com/postcss/postcss/blob/master/docs/syntax.md)
This means PostCSS is flexible enough to support Sass or even [Stylus compact style syntax](https://learnboost.github.io/stylus/docs/css-style.html) *(without brackets or semi-colons)*:
```css
body
color #ccc
font-size 12px
font-family Helvetica, Arial, sans-serif
a.button
background #0f0
border-radius 5px
```
### [PostCSS on Codepen](http://codepen.io/pen/)
[Here is an example pen](http://codepen.io/anon/pen/OVKNQg) that uses [`cssnext`](http://cssnext.io/)
### Questions?
These [slides are available](https://madlittlemods.github.io/postcss-presentation/):
`https://madlittlemods.github.io/postcss-presentation/`
- Eric Eastwood, [personal site and blog](http://ericeastwood.com/)
- [@MadLittleMods](https://github.com/MadLittleMods) on [GitHub](https://github.com/MadLittleMods), [Twitter](https://twitter.com/MadLittleMods)
### Articles and links
- [Is PostCSS a Game Changer?](http://articles.dappergentlemen.com/2015/07/24/postcss/)
- [It's Time for Everyone to Learn About PostCSS](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/)
- TODO: Go through bookmarks and find more
Also, please [suggest any PostCSS articles](https://github.com/MadLittleMods/postcss-presentation/issues), you think are awesome to add here.