PostCSS Prefix Hover

[PostCSS] plugin for prefixing a selection containing :hover.

[PostCSS]: https://github.com/postcss/postcss

``css
/ Input example /
.foo a:hover {
color: black;
}
`

`css
/ Output example /
.using-mouse .foo a:hover {
color: black;
}
`

Usage

Step 1: Install plugin:

`sh
npm install --save-dev postcss postcss-prefix-hover
`

Step 2: Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss" section in package.json
or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.

Step 3: Add the plugin to plugins list:

`diff
module.exports = {
plugins: [
+ require('postcss-prefix-hover'),
require('autoprefixer')
]
}
`

[official docs]: https://github.com/postcss/postcss#usage

Settings

| Option | Default | Description |
|-------------------------|----------------|-------------|
| prefix | ".using-mouse" | The selector to prefix |
| useCssModulesGlobal | false | Whether or not the prefix should be wrapped in ":global()" to support CSS Modules |

Possible issues

Be aware that adding a prefix also adds higher specificity to the CSS selector. This might cause some issues.

Input causing a possible issue:

`css
a:hover {
color: black;
}

a.active {
color: red;
}
`

Output where a:hover is more specific than a.active causing browsers to prioritize hover over active.

`css
.using-mouse a:hover {
color: black;
}

a.active {
color: red;
}
`

How to fix it:

`css
a:hover {
color: black;
}

a.active,
a.active:hover {
color: red;
}
`

This will output the following:

`css
.using-mouse a:hover {
color: black;
}

a.active,
.using-mouse a.active:hover {
color: red;
}
``