Kilian Valkhof

Front-end & user experience developer, Jedi.

Hocus Pocus: PostCSS to finish the trilogy

CSS & HTML, 26 January 2017

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.

PostCSS Logo

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.

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.