PostCSS Crash Course

PostCSS is a Javascript tool used to transform your project's CSS. In this crash course, I'll talk you through the basics, compare PostCSS to Sass, and then we'll code together on two projects: the first project will show you what functionality PostCSS offers you as a pre-processor, so a Sass replacement. The second project will show you how you can use PostCSS to prepare your production CSS.

My website
https://www.pixelrocket.store

My Sass Crash Course
https://www.youtube.com/watch?v=BEdCOvJ5RY4

My PostCSS Playlist
https://www.youtube.com/playlist?list=PLCvPStjGyw0d9nlB4uI25m_REpYSMAKnR

Course Resources (You'll need this if you want to code along):
https://www.dropbox.com/s/2sefet1n884bea7/postcss-resources.zip?dl=0

Plugins Used:

PostCSS plugin
https://github.com/postcss/postcss

PostCSS CLI plugin
https://github.com/postcss/postcss-cli

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

PostCSS partials
https://www.npmjs.com/package/postcss-partial-import

PostCSS @for
https://github.com/antyakushev/postcss-for

PostCSS @each
https://github.com/madyankin/postcss-each

PostCSS at rules vars
https://github.com/Scrum/postcss-at-rules-variables

PostCSS each variables mapping
https://github.com/awcross/postcss-each-variables

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

PostCSS custom media queries
https://github.com/csstools/postcss-custom-media

PostCSS Gulp
https://github.com/postcss/gulp-postcss

PostCSS PurgeCSS
https://purgecss.com/plugins/postcss.html

PostCSS CSSNano
https://github.com/cssnano/cssnano

Timestamps

0:00 Intro
0:40 Course resources & requirements
1:25 What is PostCSS
2:40 Project one setup
3:45 Install PostCSS & PostCSS CLI
10:15 Setup NPM PostCSS command
15:50 Setup import & partials
30:19 Refactor component using PostCSS
38:45 Refactory utility using PostCSS
44:30 Refactor media queries using PostCSS
47:00 Project two setup
48:45 Add PostCSS to Gulp
50:07 Install PurgeCSS & CSSNano plugins