Fela plugin to wrap :hover styles in @media (hover: hover)
npm install fela-plugin-hover-mediaExtracts all :hover styles and wrap them in a @media (hover: hover) media query.
It is inspired by postcss-hover-media-feature.
> 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.
``sh`
yarn add fela-plugin-hover-media
You may alternatively use npm i --save fela-plugin-hover-media.
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()],
})
`
#### Input
`javascript`
{
color: "red",
':hover': {
color: "blue"
}
}
#### Output
`javascript``
{
color: "red",
'@media (hover: hover)': {
':hover': {
color: "blue"
}
}
}
Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @robinweser and all the great contributors.