postcss-focus-visible

What is postcss-focus-visible?

The postcss-focus-visible npm package is a PostCSS plugin that polyfills the :focus-visible pseudo-class. It allows developers to style elements that have focus only when they are focused via keyboard input, providing better accessibility and user experience. This is particularly useful for avoiding focus styles when clicking on elements with a mouse, which can sometimes be visually disruptive.

What are postcss-focus-visible's main functionalities?

Polyfill :focus-visible

This feature allows developers to use the :focus-visible pseudo-class in their CSS, which the plugin then compiles into a backward-compatible format. The output CSS works in conjunction with a JavaScript detection script to apply focus styles only when an element is focused via the keyboard.

/* Input CSS */
:focus-visible { outline: 1px solid black; }

/* Output CSS */
.js-focus-visible :focus:not(.focus-visible) { outline: none; }
.js-focus-visible .focus-visible { outline: 1px solid black; }

Other packages similar to postcss-focus-visible

postcss-pseudo-class-any-link

This package is a PostCSS plugin that polyfills the :any-link pseudo-class. It is similar to postcss-focus-visible in that it provides a way to use newer pseudo-classes in CSS and compiles them into a format that is compatible with older browsers.

postcss-custom-selectors

postcss-custom-selectors is another PostCSS plugin that allows you to define custom pseudo-classes and selectors. While it doesn't directly polyfill :focus-visible, it offers similar functionality in terms of extending CSS capabilities and ensuring compatibility with older browsers.

postcss-selector-not

This plugin polyfills the :not() CSS pseudo-class to make it work with lists of complex selectors. It is similar to postcss-focus-visible in that it enhances CSS selector capabilities and ensures cross-browser compatibility.

README

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