fela-plugin-hover-media

Extracts all :hover styles and wrap them in a @media (hover: hover) media query.

It is inspired by postcss-hover-media-feature.

Why

This paragraph was copied from postcss-hover-media-feature and it perfectly answers the question.

Certain mobile browsers apply :hover styles on 'tap', which (in most cases) isn't desirable. By wrapping :hover styles with a Hover Media Feature media query these styles will only be applied on devices that support them.

Installation

yarn add fela-plugin-hover-media

You may alternatively use npm i --save fela-plugin-hover-media.

Usage

Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import hoverMedia from 'fela-plugin-hover-media'

const renderer = createRenderer({
  plugins: [hoverMedia()],
})

Example

Input

{
  color: "red",
  ':hover': {
    color: "blue"
  }
}

Output

{
  color: "red",
  '@media (hover: hover)': {
    ':hover': {
      color: "blue"
    }
  }
}

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @robinweser and all the great contributors.