postcss-focus

7.0.0 • Public • Published

PostCSS Focus

PostCSS plugin to add :focus-visible selector to every :hover for keyboard accessibility.

See also postcss-pseudo-class-enter for more explicit way.

*:focus-visible {
  outline: 0;
}
.button:hover {
  background: red;
}
*:focus-visible {
  outline: 0;
}
.button:hover {
    background: red;
}
.button:focus-visible {
  background: red;
}

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

.a:hover, .b:hover {
  outline: 0;
}
.b:focus-visible {
  background: red;
}
.a:hover, .b:hover, .a:focus-visible {
  outline: 0;
}
.b:focus-visible {
  background: red;
}
Sponsored by Evil Martians

Docs

Read full docs here.

Package Sidebar

Install

npm i postcss-focus

Weekly Downloads

11,141

Version

7.0.0

License

MIT

Unpacked Size

4.04 kB

Total Files

4

Last publish

Collaborators

  • ai