Every modern site should be using PostCSS!

PostCSS is the ultimate CSS tool. It’s completely customizable and incredibly quick. I'll walk you through what it is, how to use it, show you my preferred plugins, and show you how to get it working in a real project.
🔗 Key Links 🔗
- PostCSS website: postcss.org/
- VSCode extension: marketplace.visualstudio.com/...
---------------------------------------
🔗 PostCSS Plugins mentioned 🔗
- www.npmjs.com/package/postcss...
- github.com/postcss/autoprefixer
- cssnano.co/
- github.com/postcss/postcss-mi...
- github.com/postcss/postcss-ne... (for SASS nesting)
- github.com/csstools/postcss-p... (for CSS-spec nesting)
- github.com/postcss/postcss-me...
- github.com/csstools/postcss-p...
- github.com/csstools/postcss-p... (the preset for writing modern CSS)
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:39 What is PostCSS?
0:51 How does PostCSS work?
2:11 Why use PostCSS?
3:28 What PostCSS plugins do I use?
9:17 How do I use PostCSS?
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

[@CodinginPublic]

I should have mentioned, you don’t HAVE to choose between SCSS and PostCSS; many use them together. I find that using PostCSS covers most of the use cases I have for SCSS, so I don’t often reach for SCSS if I'm using PostCSS. Also …15:57 🤦‍♂

[@hoklenghak777]

I am your new subscriber! Great contents, man!

[@CodinginPublic]

🙌 glad you enjoyed it!

[@dgcp354]

the name of the channel is amazing.

[@CodinginPublic]

Hey, thanks. I definitely view myself more as a learner than a teacher so I wanted to channel to reflect that. I’m learning and coding in public in an attempt to help others as well.

[@Web-Dev-Codi]

Amazing! Thank You.

[@CodinginPublic]

You’re welcome!

[@mathieulalonde]

Thank you so much! Setting-up PostCSS in Vite really should be better documented... You really helped me 🙂

[@CodinginPublic]

You’re welcome!

[@cranberry888]

your guide is awesome, I was just about to get into this technology. And btw, what theme do you use this time?

[@CodinginPublic]

Great! Glad it was a help! Haha … changed again. I think I'm using TDK Theme (a person who commented made it and mentioned it in my last video!)

[@SeanGrimLink]

You don't need autoprefixer if your using postcss-preset-env. Personally I do like the scss way of working, combining it with postcss-preset-env and cssnano.

[@CodinginPublic]

Yep! It’s included in preset-env by default! That works! It’s awesome to have so many great tools available!

[@Xamy-]

For the custom media plugin, what’s its advantage over CSS variables or SASS ones?

[@CodinginPublic]

You can’t use css variables in media queries. So this gives you a similar syntax to do the same thing.

[@sulavbaral9972]

Have been using tailwind since the day I've found it got quite comfortable and works good but I think I should give this a spin too

[@CodinginPublic]

Well believe it or not, you’ve already been using it because Tailwind is a PostCSS plugin! The tailwind docs actually encourage you to use the autoprefixer plugin along with tailwind. :)

[@moneyfr]

Thank you but how would you make prettier & Stylelint works with postcss ?

[@CodinginPublic]

They should work side-by-side. I just wouldn't use any linting plugins in POSTCSS if you’re doing linting another way. Does that help?

[@perrosanchez]

Hi, how are you? I've been trying various ways to work with mixins using postCSS, particularly postcss-preset-env, and when I try to call it with @import or @apply it doesn't work in any way. I am in an environment with Astro Build, following your videos! Thank you.

[@CodinginPublic]

Hey! Sorry for the trouble. Hmm…it's really hard to say without seeing your code? If you go to branch 5 (I think) and beyond in the Astro series you should see how I did it? I can't remember if I used either, but I know at least the @import is included in postcss-preset-env. Hope that helps!

[@JimKernix]

Inside the plugins array I use require("autoprefixer") whereas you use autoprefixer: {}. Is there a difference if which method you use?

[@JimKernix]

Oh, and I just noticed you use an object for the plugins but I use an array.

[@CodinginPublic]

Yeah, it depends if it’s a common js module basically.

[@glorynt7925]

How to use conditional with postcss mixin?, Example: define-mixin test $value{ @if $value == red { color: red } }

[@CodinginPublic]

I haven’t used that plugin! Sorry!

[@namecanbeblank6311]

What theme and font are you using?

[@CodinginPublic]

Cascadia Code (free font by Microsoft) and Palenight Operator (I think?) for the theme.

[@briankgarland]

Is there a way to exclude something from postcss-preset-env or is it all or nothing?

[@briankgarland]

Got it. Just selectively disable the ones you don't want to use with a false. All are enabled by default depending on the stage level. module.exports = { plugins: [ require('postcss-preset-env')({ stage: 0, features: { 'custom-media-queries': false, } }) ] }

[@CodinginPublic]

Great work. Yep! that's how you select different plugins. Rather than installing preset-env, you can also just individually install a set of plugins you want.

[@dein-ding]

How can we suppress the @-rule warnings though? It’s extremely annoying, especially if you use something like error lens.

[@CodinginPublic]

There's a setting in VSCode called "Unknown at-rule" that you can change to "Ignore." Hope that helps!

[@kushagra-aa]

Can we get a video about stylelint and postcss plugin

[@CodinginPublic]

I could see myself doing something on stylelint and mentioning the PostCSS plugin as an option?

[@kushagra-aa]

@@CodinginPublic Yess PLease!!

[@notnotjake]

I still don't really understand why I would want to use this over using scss

[@CodinginPublic]

No worries if you prefer SCSS. PostCSS lets you pick and choose which features you want to add to CSS (or which modern CSS features you want to use), it's not an entire “compiled” system like SCSS (that may not be the right term). But the idea here is both 1) you can piece-meal what you want and 2) you can mostly just write either standard CSS or future standard CSS. Many of the plugins let you write what will eventually be stable in the browsers. But a lot of people feel like you do; it's nice we have so many options!

[@edhahaz]

Grabbing 500 plugins at the thrift shop improves things, instead of using sass.

[@CodinginPublic]

lol what do you miss in modern CSS that scss gives you? Mixins? Loops?

[@edhahaz]

​@@CodinginPublic postcss seems to have a bunch of features that overlap sass. It's confusing and I have to pick each feature myself. I only care about polyfills.

[@coolemur976]

There are downsides of postcss or preprocessors. 1. Yes, it's cool that you can use modern features today that wouldn't be possible with CSS. But... imagine reality... you work on big project with team and stuff, they use PostCSS and everything is great. But then you are assigned to a project that is not using PostCSS and has a lot of legacy code, and the rule of that project is "don't add PostCSS", because someone disagrees to add it. So all your fancy snippets becomes worthless and you feel bad for using old tech when you could be using the modern one. 2. Things like this makes development of pure CSS slower. So many features that could be pushed forward in CSS now are left aside with idea "oh you can just make it with PostCSS so why bother improving CSS specs, it can wait".

[@perrosanchez]

Hi, I only use postcss-preset-env with Astro Build, the only thing that doesn't work for me is @custom-media when I call them in an .astro file inside the @media (--lg) {}< tag. /style> how can I solve it, thank you very much for the help!

[@CodinginPublic]

Hmm…this might be something to ask in the Astro discord. I would ASSUME that Astro should pick that up in the bundling of your CSS and run it all through your post css plugin? But I don't know off hand? Sorry!