postcss-hocus-pocus

This project was originally created by Kilian Valkhof!

postcss-hocus-pocus fixes a tiny but annoying part of CSS: That you have to repeat yourself whenever you want to specify both :hover and :focus. Instead, you write a:hocus!

Usage

/* before */
a:hocus {
	color: red;
}

/* after */
a:hover,a:focus {
	color: red;
}

Additionally, you can write a:pocus to include the :active style:

/* before */
a:pocus {
	color: red;
}

/* after */
a:hover,a:active,a:focus {
	color: red;
}

Installation

npm

npm install --save-dev postcss-hocus-pocus

yarn

yarn add -D postcss-hocus-pocus

Then add in your PostCSS Config:

postcss([
	require('postcss-hocus-pocus')
]);

WARNING: Load Order Matters!

Say you had CSS that looked like this:

.foo {
	&:hocus {
		color: red;
	}
}

If you want to make use of nested statements using postcss-nested, you need to load the postcss-hocus-pocus after:

postcss([
	require('postcss-nested'),
	require('postcss-hocus-pocus')
]);

Otherwise you're just gonna get a bunch of goofy-looking gobbledegook. In fact, I recommend you put this plugin as late in your load order as possible.