https://github.com/hiro0218/postcss-media-hover-any-hover

PostCSS plugin wraps selectors with :hover with at-media (hover: hover) block
https://github.com/hiro0218/postcss-media-hover-any-hover

postcss postcss-plugin

Last synced: 4 months ago
JSON representation

PostCSS plugin wraps selectors with :hover with at-media (hover: hover) block

• Host: GitHub
• URL: https://github.com/hiro0218/postcss-media-hover-any-hover
• Owner: hiro0218
• License: mit
• Created: 2024-05-01T15:29:41.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-05-01T16:11:15.000Z (9 months ago)
• Last Synced: 2024-10-01T22:05:18.942Z (4 months ago)
• Topics: postcss, postcss-plugin
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/postcss-media-hover-any-hover
• Size: 45.9 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Install

```bash

npm i -D postcss-media-hover-any-hover

```

## Usage

Wrap `:hover` block with `@media (any-hover: hover)`.

```css

// Input

a {

  &:hover {

    text-decoration: underline;

  }

}

// Output

a {

  @media (any-hover: hover) {

    &:hover {

      text-decoration: underline;

    }

  }

}

```

`postcss.config.js`:

```js

const fs = require('fs');

const postcss = require('postcss');

const postcssMediaHoverAnyHover = require('postcss-media-hover-any-hover');

const css = fs.readFileSync('input.css', 'utf8');

const output = postcss().use(postcssMediaHoverAnyHover()).process(css).css;

```