Kilian Valkhof

Front-end & user experience developer, Jedi.

Hocus Pocus: PostCSS to finish the trilogy

CSS & HTML, 26 January 2017, 2 minute read

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.

Polypane browser for responsive web development and design Hi, I'm Kilian. I make my living building Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Please try it out!