npm install postcss-focus-visible --save-dev
PostCSS Focus Visible lets you use the :focus-visible
pseudo-class in CSS,
following the Selectors Level 4 specification.
To use this feature you need to do two things :
- add the PostCSS plugin that transforms the selector into a class or attribute
- add the focus-visible polyfill that sets the attribute or class on elements in a browser
```pcss
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
:focus:not(:focus-visible) {
outline: none;
}
PostCSS Focus Visible duplicates rules using the :focus-visible
pseudo-class
with a .focus-visible
class selector, the same selector used by the
focus-visible polyfill.
Add PostCSS Focus Visible to your project:
npm install postcss postcss-focus-visible --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssFocusVisible = require('postcss-focus-visible');
postcss([
postcssFocusVisible(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The preserve
option determines whether the original notation
is preserved. By default, it is preserved.
postcssFocusVisible({ preserve: false })
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
The replaceWith
option defines the selector to replace :focus-visible
. By
default, the replacement selector is .focus-visible
.
postcssFocusVisible({ replaceWith: '[data-focus-visible-added]' })
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
<example.preserve-true.expect.css>
Note that if you want to keep using focus-visible polyfill, the only
acceptable value would be [data-focus-visible-added]
,
given that the polyfill does not support arbitrary values.
The disablePolyfillReadyClass
option determines if selectors are prefixed with an indicator class.
This class is only set on your document if the polyfill loads and is needed.
By default this option is false
.
Set this to true
to prevent the class from being added.
postcssFocusVisible({ disablePolyfillReadyClass: true })
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible) {
outline: none;
}
:focus:not(:focus-visible) {
outline: none;
}