postcss-hocus-pocus
v1.1.0
Published
postcss plugin that lets you write :hocus instead of :hover, :focus
Downloads
20
Maintainers
Readme
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.