postcss-media-hover-fix

A PostCSS plugin that fixes hover media queries for better touch device support.

Description

This plugin automatically wraps CSS hover selectors in a media query that checks for both hover capability and fine pointer input. This ensures that hover effects only apply on devices that actually support hover, preventing unwanted hover effects on touch devices.

Installation

npm install postcss-media-hover-fix --save-dev

Usage

Add the plugin to your PostCSS configuration:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-media-hover-fix')
  ]
}

Example

Input:

.button:hover {
  background-color: blue;
}

Output:

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: blue;
  }
}

Credits

• Original plugin author: Saul Hardman [email protected] github plugin
• Modified by: Hwaiteu github

License

MIT