PostCSS - my initial experience

Intro

I was about to make the title something like this-

PostCSS - a real-life time machine for CSS lovers

Then I thought, it's too dramatic. Let's keep it simple. (and now you know I loved this title more 😀)

I've been a CSS lover from the beginning of my career, but not like Ben Evans the CSS Artist, I mean he took CSS to another level.

Anyway, when I first learned about PostCSS and what it's capable of, it was very overwhelming for me and I was shocked. Then I started to learn its limitations, pros & cons, which plugins are used most, and where to get the plugins and things like that.

So, today I'm going to share some information that I was looking for but didn't find when I was learning. If this information had been published somewhere, my journey could have been easier and much shorter.

information

I mean, if I knew that

• the plugins in the official PostCSS website were old like IE6 or the marquee tag, and
• the updated plugins were in postcss-plugins repo by csstools, and
• the author of the most popular PostCSS plugin himself recommended the postcss-preset-env over his own creation which is cssnex, and
• there was
  • a playground,
  • a list of features that you can filter by stage,
  • and much more for postcss-preset-env,

then it would have been easier to search & research and to make the native CSS much more powerful than SCSS. But anyway, we are here now, and if my experience can make any contribution to other's journey, that would be very rewarding 😎.

This is a table to compare how we can reduce the number of plugins with more features & efficiency.

OLDER PLUGINS WITH COOL FEATURES	MUCH BETTER & UPDATED ALTERNATIVE
cssnext || about cssnext to Preset Env	Preset Env
Postcss Custom Media
Postcss Media Minmax
Nesting and much much more...
Postcss Simple-Vars	Postcss Advanced Variables
Postcss Conditionals
Postcss Each
Postcss For
PostCSS Mixins
and more, like conditionals (@if / @else), @each, @for etc.

Conclusion

I encountered the PostCSS while diving into Tailwind CSS and trying to integrate SCSS with it. My goal was to achieve SCSS functionalities and other cool features within native CSS, eliminating the need for SCSS in Tailwind. And that's how my PostCSS journey began.

However, it's important to note that not everyone using PostCSS shares the same purpose. The tool offers loads of possibilities beyond my initial use case.

As I continue to learn, I welcome contributions from others who can share valuable PostCSS resources in the comments. Your input would be greatly appreciated!