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`.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.tape.js
LICENSE.md
README.md
index.js
package.json

README.md

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')
]);