PostCSS

It's been a while since I tried something new. This time I tried PostCSS. It took me a while to work out how to install it and get it working with Vite because there weren't any Vite-specific instructions for PostCSS. And then I discovered that it's already included with Vite. All I had to do was to edit the config to match their instructions, then add plugins.

Spiffing

postcss-spiffing was the reason I wanted to use PostCSS in the first place. It lets you use British English spellings (eg colour and centre) and changes some other words. The thing that amuses me most about it is that it uses !please instead of !important which is pretty much what I'm saying when I use it.

The thing I used it on was only small so I only used colour and centre. Which was not as useful as I thought it would be. VS Code underlined them because it didn't recognise them. And when I started writing back it would offer me the option of background-color which wasn't quite what I wanted.

But I also used it because it looked like it would be fun and I did have fun with it.

There are other similar plugins for other countries. I particularly like that the Canadian one has replaced !important with !sorry

Hocus

I wanted to see what other plugins there were, so I looked at the 'Fun' section of plugins on the website. There were a few things that looked amusing, but one that was particularly interesting: postcss-hocus.

It is a lot of typing/annoying to write:

something:hover,
something:focus {
    /* Some CSS in here */
}

What hocus does is to replace the hover and focus with :hocus. Much less typing. There's also an option to use :pocus which includes :active as well as hover and focus.

Conclusion

Using PostCSS was fun and judging by the number of plugins I can see that you can do a lot with it. Including making your CSS like Sass - there's literally a whole section of plugins for that. Which makes me wonder if it wouldn't just be simpler to use Sass in the first place.

But there are other plugins I looked at where I can see the use for them. There's even one that will do a click event for you, so you don't have to break out the JavaScript. The only trouble is that you could use so many that your CSS becomes indecipherable if other people/future you looking at it aren't familiar with the plugins you've used.

Aside from that, I loved it and would absolutely be up for using it again.