postcss-hover-fallback

A PostCSS plugin that provides a fallback for @media (hover: hover) queries by converting them into standard :hover selectors. This is useful for supporting browsers that do not understand the hover media feature (such as older browsers or ES5 environments).

Why?

Some browsers do not support the @media (hover: hover) media query, which is used to apply styles only on devices that support hover interactions (like desktops). This plugin generates fallback :hover rules for better compatibility.

Installation

bun add postcss-hover-fallback
# or
npm install postcss-hover-fallback
# or
yarn add postcss-hover-fallback

Usage

Add postcss-hover-fallback to your PostCSS configuration:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-hover-fallback')({
      // Optional: set to true to keep the original @media rule
      // preserveOriginal: false
    })
  ]
};

Example

Input:

@media (hover: hover) {
  .button {
    color: red;
  }
}

Output:

.button:hover {
  color: red;
}

Options

preserveOriginal (default: false): If set to true, the original @media (hover: hover) block will be preserved alongside the fallback.

JSPM