I ran into a problem with Grunt a couple of days ago. I noticed that although I set up a task for autoprefixing my CSS files, sometimes the vendor prefixes were missing. I assumed that there was something wrong with the node module and thought about switching to a newer version of it.

But today I discovered it was entirely my fault. I forgot to add the autoprefixer to my watch task hence it would only work when run for production (which skips the watch part). I corrected the watch task and updated my frontend jumpstart template accordingly.

I guess it’s easy to blame technology for failure but I think it’s worth considering that we overlook things too. And that’s what I learnt today.

I’m using Grunt for frontend development, mainly to compile SASS and to combine and minify Javascript files. I’ve also been using a Grunt plugin called grunt-autoprefixer which basically uses the Can I use database to check your CSS for properties that need vendor prefixes and adds them to your CSS rules.

Today I was integrating a few templates I wrote into the CMS of a client. When I checked the site in different browsers, I noticed that some autoprefixes were missing. It turns out that the autoprefixer plugin doesn’t work on my iMac but does work on my MacBook. I’ve not yet looked into this but I also discovered that there is a newer version of the plugin that not only adds missing vendor prefixes to your CSS but also provides fallbacks for rem sizing units. And that’s what I learnt today.