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

Use the :focus-visible pseudo-selector in CSS

jonathantneal

alaguna

romainmenke

postcss-focus-visible

- 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",

  "author": "Jonathan Neal <jonathantneal@hotmail.com>",

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

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

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

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

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

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

    "stryker": "stryker run --logLevel error",

    "test": "postcss-tape --ci && npm run test:exports",

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

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

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

# 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/badge/focus-within-pseudo-class.svg" height="20">][css-url]

[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-within-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="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-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].

[!['Can I use' table](https://caniuse.bitsofco.de/image/css-focus-visible.png)](https://caniuse.com/#feat=css-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

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

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

  postcssFocusVisible(/* pluginOptions */)

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

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

The `preserve` option defines whether the original selector should remain. By

default, the original selector is preserved.

The `replaceWith` option defines the selector to replace `:focus-visible`. By

default, the replacement selector is `.focus-visible`.

focusVisible({ replaceWith: '[focus-visible]' });

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

[git-url]: https://gitter.im/postcss/postcss

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

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

[Gulp PostCSS]: https://github.com/postcss/gulp-postcss

[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss

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

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

[PostCSS Loader]: https://github.com/postcss/postcss-loader

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

		# Changes to PostCSS Focus Visible

		### 6.0.4 (February 5, 2022)

		- Improved `es module` and `commonjs` compatibility

		### 6.0.3 (January 2, 2022)
		@@ -4,0 +8,0 @@

		{
		"name": "postcss-focus-visible",
		"version": "6.0.3",
		"version": "6.0.4",
		"description": "Use the :focus-visible pseudo-selector in CSS",
		@@ -12,2 +12,9 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>",
		"types": "dist/index.d.ts",
		"exports": {
		".": {
		"import": "./dist/index.mjs",
		"require": "./dist/index.cjs",
		"default": "./dist/index.mjs"
		}
		},
		"files": [
		@@ -32,3 +39,3 @@ "CHANGELOG.md",
		"dependencies": {
		"postcss-selector-parser": "^6.0.8"
		"postcss-selector-parser": "^6.0.9"
		},
		@@ -40,3 +47,3 @@ "devDependencies": {
		"peerDependencies": {
		"postcss": "^8.3"
		"postcss": "^8.4"
		},
		@@ -43,0 +50,0 @@ "keywords": [

Fixed alerts

Improved metrics

Dependency changes