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;
}
Add postcss-hocus using npm:
npm install postcss-hocus --save-dev
Then add in your PostCSS Config:
postcss([
require('postcss-hocus')
]);