Getting Started with PostCSSWhen you are too lazy or too smart

By: Neha Sharma | @hellonehha | nehha255@gmail.com

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

- References

- Further Readings

WHAT IS POSTCSS?

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.

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

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

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.”

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.

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.

Advantages of PostCSS

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 FASTERWRITE SASS

WITHOUT SASS

HOW TO USE?

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.

Grunt

EXPLOREWe will be exploring few most popular plugins of postcss with the grunt build tool

- 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

Install Grunt & PostCSS1- 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

auto-prefixerAutoprefixer 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

$npm install grunt-postcss autoprefixer

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

cssnanoCSSnano 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

- minimise gradient parameters- and much more http://cssnano.co/optimisations/

precssPreCSS 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

CSSnextcssnext 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/

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.

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

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

Further Reads:https://github.com/postcss/postcss

https://twitter.com/PostCSS

Reference- Smashing Magazine

- Webdesign tutsplus

- Google

- https://github.com/postcss/postcss

- and plugins websites

Thankyou!