epiphany/node_modules/postcss-focus-visible
2023-12-09 22:48:07 -08:00
..
dist stylelint/eleventy config 2023-12-09 22:48:07 -08:00
CHANGELOG.md stylelint/eleventy config 2023-12-09 22:48:07 -08:00
LICENSE.md stylelint/eleventy config 2023-12-09 22:48:07 -08:00
package.json stylelint/eleventy config 2023-12-09 22:48:07 -08:00
README.md stylelint/eleventy config 2023-12-09 22:48:07 -08:00

PostCSS Focus Visible PostCSS Logo

npm version CSS Standard Status Build Status Discord

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 :

'Can I use' table


```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.

Usage

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 */);

PostCSS Focus Visible runs in all Node environments, with special instructions for:

Options

preserve

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;
}

replaceWith

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.

disablePolyfillReadyClass

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;
}