PostCSS Prefix Hover

PostCSS plugin for prefixing a selection containing :hover.

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

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

Usage

Step 1: Install plugin:

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:

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

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:

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.

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

a.active {
    color: red;
}

How to fix it:

a:hover {
    color: black;
}

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

This will output the following:

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

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