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

``sh
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.

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

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

Example

#### Input

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

#### Output

`javascript
{
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.