PostCSS - Getting start with PostCSS

PostCSS a tool for transforming your CSS with JS Plugin to get the different and useful operations done on it.

Transcript

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 - References - Further Readings
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 - minimise gradient parameters - and much more http://cssnano.co/optimisations/
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!