postcss-hocus icon indicating copy to clipboard operation
postcss-hocus copied to clipboard

Postcss-hocus fixes a tiny but annoying part of CSS: That you have to repeat yourself whenever you want to specify both `:hover` and `:focus`.

Postcss-hocus PostCSS Logo

Postcss-hocus 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:

/* 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;
}

Usage

Add postcss-hocus using npm:

npm install postcss-hocus --save-dev

Then add in your PostCSS Config:

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