Use the :focus-visible pseudo-selector in CSS. 

Use the :focus-visible pseudo-selector in CSS

jonathantneal

alaguna

romainmenke

postcss-focus-visible

- Reduce the amount of duplicate fallback CSS.

- Improve `types` declaration in `package.json`

- Updated: Support for Node v14+ (major).

- Fix: Do not throw when a selector is invalid, show a warning instead.

- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-focus-visible` from being added.

- Breaking: Changed generated classes so it prepends `.js-focus-visible` to the 

generated class so CSS is applied when the polyfill is known to be running.

- Improved `es module` and `commonjs` compatibility

- Removed Sourcemaps from package tarball.

- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121).

- Changed: now uses `postcss-selector-parser` for parsing.

- Added missing `exports` to `package.json`

- Added missing `types` to `package.json`

- Added bundling & testing as prepublish step.

- Updated: Support for PostCS 8+ (major).

- Updated: `:focus-visible` can appear escaped in a selector

- Changed: default functionality to preserve the original rule

- Added: `preserve` option to preserve the original rule using `:focus-visible`

- Changed `:focus-ring` to `:focus-visible` per the specification

	"description": "Use the :focus-visible pseudo-selector in CSS",

		"url": "https://opencollective.com/csstools"

		"build": "rollup -c ../../rollup/default.mjs",

		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",

		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",

		"lint": "npm run lint:eslint && npm run lint:package-json",

		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",

		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",

		"prepublishOnly": "npm run clean && npm run build && npm run test",

		"test": "node .tape.mjs && npm run test:exports",

		"test:browser": "node ./test/_browser.mjs",

		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",

		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"

	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme",

		"url": "https://github.com/csstools/postcss-plugins.git",

		"directory": "plugins/postcss-focus-visible"

	"bugs": "https://github.com/csstools/postcss-plugins/issues",

		"cssdbId": "focus-visible-pseudo-class",

		"humanReadableName": "PostCSS Focus Visible",

		"specUrl": "https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo"

# PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]

[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-visible.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-visible-pseudo-class.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][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

[!['Can I use' table](https://caniuse.bitsofco.de/image/css-focus-visible.png)](https://caniuse.com/#feat=css-focus-visible)

:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {

[PostCSS Focus Visible] duplicates rules using the `:focus-visible` pseudo-class

with a `.focus-visible` class selector, the same selector used by the

Add [PostCSS Focus Visible] to your project:

npm install postcss postcss-focus-visible --save-dev

const postcssFocusVisible = require('postcss-focus-visible');

	postcssFocusVisible(/* pluginOptions */)

]).process(YOUR_CSS /*, processOptions */);

[PostCSS Focus Visible] runs in all Node environments, with special

- [PostCSS Load Config](INSTALL.md#postcss-load-config)

The `preserve` option determines whether the original notation

is preserved. By default, it is preserved.

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

[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test

[css-url]: https://cssdb.org/#focus-visible-pseudo-class

[npm-url]: https://www.npmjs.com/package/postcss-focus-visible

[PostCSS]: https://github.com/postcss/postcss

[PostCSS Focus Visible]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible

[Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

[focus-visible polyfill]: https://github.com/WICG/focus-visible

		# Changes to PostCSS Focus Visible

		### 8.0.2 (February 8, 2023)

		- Reduce the amount of duplicate fallback CSS.

		### 8.0.1 (January 28, 2023)
		@@ -4,0 +8,0 @@

		{
		"name": "postcss-focus-visible",
		"description": "Use the :focus-visible pseudo-selector in CSS",
		"version": "8.0.1",
		"version": "8.0.2",
		"contributors": [
		@@ -6,0 +6,0 @@ {

		@@ -130,3 +130,3 @@ # PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]

		:focus:not(.focus-visible), :focus:not(.focus-visible) {
		:focus:not(.focus-visible) {
		outline: none;
		@@ -133,0 +133,0 @@ }

Improved metrics