Learn PostCSS In 15 Minutes

CSS keeps releasing new features that I want to use right away, but there is always at least one browser that doesn’t support the new features and I am forced to wait years to use them, or at least that used to be the case. Instead I now use PostCSS to transpile all my CSS to CSS that any browser can understand while still being able to use modern CSS features when I write my CSS. PostCSS is like the babel of CSS.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:42 - Starting Files
01:12 - Basic Setup
04:14 - Using Plugins
09:33 - Using PostCSS With Frameworks
13:09 - Pros of PostCSS

#PostCSS #WDS #CSS

[syth-]

I love how you explain each error and why we are doing what we are to resolve it instead of 'just do xyz and trust me'

[ThaRealIansanity]

I've been using tailwind in projects for over a year with postcss as part of the install instructions and had no clue what it is or what it does. Thanks, now I know 🙂

[keharacek]

Damn, I've never gotten to look into postcss but it looks flipping amazing. Thanks for this introduction! 😎

[jakubschulz]

It's great that you show some mistakes! When I started, I had a big problem with the fact that the guide works, but not for me

[raymondfinton]

My favorite postcss plugin is autoprefixer.

[LVEVR]

Kyle, love your videos. 👏🎬 Have to disagree about SASS being a weird CSS-hybrid. I find writing SASS (not SCSS) incredibly simple and intuitive: Indentation SO much better than brackets, IMHO ... less visual clutter, far fewer lines. The complexity involved with PostCSS is, for me at least, complete overkill for the benefits, most of which are easily implemented with SASS.

[annismonadjem]

Kyle, it is great to have you back and thank you a bunch for this wonderful video.

[modernkennnern]

It's funny you chose nesting specifically to illustrate the power of PostCSS (Granted, it is the easiest thing to illustrate) and how in the future it will "just work", because the nesting syntax is very much up in the air. There are at least 4 different versions of the syntax that are being decided upon.

Personally I wish the ampersand (&) was always required for 100% of all scenarios (Currently there's maybe a @nest at-rule, and maybe some fancy "requires a pseudo-selector" logic among a few other things).

I do appreciate them taking the time to get this right though, so we don't end up with another `!important` that implies "not important", but actually means "very important" or "currentColor" being the only place in css with camelCase, or "nowrap" being a literal typo

[evandromottaz]

Okay, sass doing the same with a single line config.. what is the big deal to use postcss?

[thelyrics]

Scss is sufficient. if you want a prefixed, just use a vscode extension to handle that.

[gokul]

was working with postcss & watching your videos

[ofeenee]

You’re the only one I know who uses dest folder for destination. I cannot tell if that is a personal preference of yours, but it’s usually called dist for distribution.

[rexrighetti]

Interesting. Love your content...Would help to see something more in depth on vite-react-ts with postcss. common modules worked better than es6, installed postcss plugin to get rid of error highlighting which broke intelasense. Very little support that isn't specific to tailwindcss.

[abnormal]

It's been on my mind for a while but postcss icon looks like dark magic circles.

[Gus]

the cover says: stop using logic, use witchcraft.

[CirTap]

As always there's much more to PostCSS than this and the CLI won't run with an ESM config either out of the box. Real projects also have more than a single css file and that's the misleading part of videos like this: their simplified setup doesn't scale, but that's where things get complicated and complex. To let the POST-processer PostCSS also do PRE-processing work as well requires some rethinking of your CSS code structure.

PostCSS is powerful but leveraging that power comes with a price: time. Lots of it. And most of it you'll spend to hunt down documentation for its gazillion features and possibilities. It's fun though if you have it all setup **eventually**.

Even if you've decided all you need is indeed just preset-env (which it won't be) you might only be done as soon as you managed to understand its many "features", the stage level they're in by default, and wether you want to keep or loose them. You definitely need to keep your local bowserslist db up to date yourself as time passes.

Finding and choosing the right plugins can become a time consuming nightmare. As you sift through the many available, you'll learn many are doing the same thing, or even many things, but with different configurations, prerequisites, or depend on another plugin. Not all of them are well written, too.
If you enjoyed preprocessors before, preset-env alone won't get you as far either. It's still a post processor script after all and "feature" names are based off that infamous stages list, but often irritatingly differs from the actual plugin that eventually runs in the background to do the job. Some which you may need or want to configure. However, their documentation is then spread across different (archived) repositories that have been moved to a mono repo, there's the CSSDB project, the preset-env bundle, and all them individual plugins.
Plugin order may be crucial and the wrong order may eventually break your "not dev" modes, or only that, when there's no monolithic single .css but many small ones that are "unaware" of each other's contents.
Many other plugins that provide beloved preprocessor features like mixins or loops and conditions are either too old (pre PostCSS 8) and long abandoned by their creators or conflict with others, old and new, incl. some refurbished preset-env features. Several plugins even choke in the presence of perfectly valid regular CSS code like pseudo classes and selectors or selector lists, in particular many that introduce syntax sugar in the form of their own made up pseudo classes or at-rules.

If you got used to organise you styles to work with preprocessors like Sass, Less, or Stylus, think again. This familiar setup and filename scheme likely won't do the trick anymore with PostCSS. You may need to translate and rewrite vanilla PRE-processor stuff into awkward JS code or JSON structures for plugins to consume at the right point in what is now a POST-processing chain.

Good luck and happy coding.

[mahfoudh_arous]

great video as usual, a lot of thanks 🙏! how did you find all these information 🤔? I can't find any starting guide on their docs!

[xu]

Cool tutorial!! One question, exists something like postcss but for scss??

[mavdotj]

You should make a tailwind setup tutorial

[amirulidzham]

Thanks for the video, currently having to struggle to config with bootstrap with vite to enable css module to enable hash class css. Maybe a video would help. Thanks