3.7 KiB
PostCSS Focus Visible 
PostCSS Focus Visible lets you use the :focus-visible pseudo-class in
CSS, following the Selectors Level 4 specification.
It is the companion to the focus-visible polyfill.
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
: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. This replacement selector can be changed using the
replaceWith option. Also, the preservation of the original :focus-visible
rule can be disabled using the preserve option.
Usage
Add PostCSS Focus Visible to your project:
npm install postcss-focus-visible --save-dev
Use PostCSS Focus Visible to process your CSS:
const postcssFocusVisible = require('postcss-focus-visible');
postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssFocusVisible = require('postcss-focus-visible');
postcss([
postcssFocusVisible(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Focus Visible runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
Options
preserve
The preserve option defines whether the original selector should remain. By
default, the original selector is preserved.
focusVisible({ preserve: false });
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible) {
outline: none;
}
replaceWith
The replaceWith option defines the selector to replace :focus-visible. By
default, the replacement selector is .focus-visible.
focusVisible({ replaceWith: '[focus-visible]' });
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not([focus-visible]) {
outline: none;
}
:focus:not(:focus-visible) {
outline: none;
}