Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

postcss-focus-visible

Package Overview
Dependencies
1
Maintainers
2
Versions
11
Issues
File Explorer

Advanced tools

postcss-focus-visible

Use the :focus-visible pseudo-selector in CSS

    7.1.0latest

Version published
Maintainers
2
Weekly downloads
6,582,012
decreased by-14.65%

Weekly downloads

Readme

Source

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.

It is the companion to the focus-visible polyfill. Note that this plugin alone is not sufficient to polyfill for :focus-visible and that you need the browser's polyfill as well.

'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:

NodePostCSS CLIWebpackCreate React AppGulpGrunt

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), :focus:not(.focus-visible) { outline: none; } :focus:not(:focus-visible) { outline: none; }

Keywords

FAQs

What is postcss-focus-visible?

Use the :focus-visible pseudo-selector in CSS

Is postcss-focus-visible popular?

The npm package postcss-focus-visible receives a total of 5,283,968 weekly downloads. As such, postcss-focus-visible popularity was classified as popular.

Is postcss-focus-visible well maintained?

We found that postcss-focus-visible demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 2 open source maintainers collaborating on the project.

Last updated on 30 Jul 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc