Getting Started with PostCSS When you are too lazy or too smart By: Neha Sharma | @hellonehha | email@example.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 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 mil ion 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 nutshel , 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 wil 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 WRITE SASS 3X F “ A““ S “TER OLD WITHOUT BROWSERS SASS CREATE YOUR PLUGINS EASILY MODULAR CSS
D EPLOY WITH
AUTOMATE OTHER TOOLS YOUR CSS USE WITH
R EGULAR CSS LOTS OF PLUGINS
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.
EXPLORE We wil be exploring few most popular plugins of postcss with the grunt build tool
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 - Images and Fonts - Packs - Analysis - Grids - Future CSS Syntax - Reporters - Optimizations - Fallbacks - Fun - Shortcuts - Language Extensions - Others - Colors
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
auto-prefixer Autoprefixer lets you write normal css and makes you forget about prefix as it will handle it by itself. Autoprefix wil 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 instal 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 fol ow the latest support
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 - minimise gradient parameters - and much more http://cssnano.co/optimisations/
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
CSSnext cssnext is a css transpiler that al ows 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