Kilian Valkhof

Hocus Pocus: PostCSS to finish the trilogy

Back in 2014, nearly three years ago, I wrote about being tired of always writing a:hover, a:focus and wanting an a:hocus to do both for me. It got a lot of proposed solutions, including a Sass and a future-css one using CSS Aliases. In 2016, a year ago, I revisited the idea with CSS Custom Selectors and CSSNext. For this year, I’m rounding up the trilogy with a PostCSS plugin of my own.

The reason is that, while CSSNext also uses PostCSS, using a custom selector never really stuck with me. I don’t like their syntax even if they solve the solution in a ‘standards’ way. I just wanted to type a:hocus.

After getting to know PostCSS a little and creating a Dutch version of CSS with it (based on a plugin that did the same for German) I figured why not make a PostCSS plugin myself. So I did.

Postcss-hocus

postcss-hocus lets you write:

a:hocus {
  color: red;
}

and it will turn it into:

a:hover,a:focus {
  color: red;
}

If you want to include :active in that list as well, use :pocus:

a:pocus {
  color: red;
}

and it will turn it into:

a:hover,a:active,a:focus {
  color: red;
}

And that’s basically it. This took me about 30 minutes to get up and running with minimal knowledge of PostCSS. I also includes tests using postcss-tape, which was super simple but works amazingly well.

You can install postcss-hocus using npm:

npm install --save-dev postcss-hocus

If there is anything nagging you in CSS, using PostCSS to improve your own developer experience is really easy and well worth it.