Détail du package

postcss-hover-focus-visible

xanghyr211MIT1.0.2

PostCSS plugin to add :focus-visible selector and/or :focus to every :hover, this is for keyboard accessibility

postcss, postcss-plugin, hover, focus-visible

readme

PostCSS Hover focus-visible

PostCSS plugin to add :focus-visible selector and/or :focus to every :hover, this is for keyboard accessibility.

Before

*:focus {
  text-decoration: underline;
}
.button:hover {
  color: blue;
}

After

*:focus {
  text-decoration: underline;
}
.button:hover, .button:focus-visible {
  color: blue;
}

If there is a :focus-visible selector, it will be excluded from the processing.

Usage

Step 1: Install plugin:

npm install --save-dev postcss-hover-focus-visible
yarn add -D postcss-hover-focus-visible

Step 2: Add the plugin to postCSS plugins list:

var postcssHoverFocus = require('postcss-hover-focus-visible');

postcss([
  postcssHoverFocus({focusVisible: true, focus: false}) 
])

changelog

Change Log

This project adheres to Semantic Versioning.

1.0.2

  • Support for both options and clean

1.0.0

  • Initial release.