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

Use the :focus-within pseudo-selector in CSS

jonathantneal

alaguna

romainmenke

postcss-focus-within

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

- Breaking: Changed generated classes so it prepends `.js-focus-within` 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).

- Fixed: Allow `:focus-within` to appear escaped in a selector

- Changed: default functionality to preserve the original rule

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

import type { PluginCreator } from 'postcss';

declare const creator: PluginCreator<pluginOptions>;

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

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

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

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

		"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-within#readme",

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

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

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

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

		"humanReadableName": "PostCSS Focus Within",

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

# PostCSS Focus Within [<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-within.svg" height="20">][npm-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="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

[PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS, 

following the [Selectors Level 4 specification].

.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label {

[PostCSS Focus Within] duplicates rules using the `:focus-within` pseudo-class

with a `[focus-within]` attribute selector, the same selector used by the

focus-within polyfill. This replacement selector can be changed using the

`replaceWith` option. Also, the preservation of the original `:focus-within`

rule can be disabled using the `preserve` option.

Add [PostCSS Focus Within] to your project:

npm install postcss postcss-focus-within --save-dev

const postcssFocusWithin = require('postcss-focus-within');

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

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

The `preserve` option determines whether the original notation

is preserved. By default, it is preserved.

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

default, the replacement selector is `[focus-within]`.

Please note that using a class, leverages `classList` under the hood which

might  not be supported on some old browsers such as IE9, so you may need

postcssFocusWithin({ replaceWith: '.focus-within' });

.my-form-field.focus-within.js-focus-within label, .js-focus-within .my-form-field.focus-within label {

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.

Set this to `true` to prevent the class from being added.

postcssFocusWithin({ disablePolyfillReadyClass: true })

.my-form-field[focus-within] label, .my-form-field[focus-within] label {

import focusWithinInit from 'postcss-focus-within/browser';

[PostCSS Focus Within] works in all major browsers, including Safari 6+ and

Internet Explorer 9+ without any additional polyfills.

The `force` option determines whether the library runs even if the browser

supports the selector or not. By default, it won't run if the browser does

Similar to the option for the PostCSS Plugin, `replaceWith` determines the

attribute or class to apply to an element when it's considered to be `:focus-within`.

focusWithinInit({ replaceWith: '.focus-within });

This option should be used if it was changed at PostCSS configuration level.

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

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

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

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

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

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

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

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

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

		# Changes to PostCSS Focus Within

		### 6.1.0 (July 30, 2022)

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

		### 6.0.0 (July 8, 2022)
		@@ -4,0 +8,0 @@

		@@ -5,4 +5,5 @@ import type { PluginCreator } from 'postcss';
		replaceWith?: string;
		disablePolyfillReadyClass?: boolean;
		};
		declare const creator: PluginCreator<pluginOptions>;
		export default creator;

		{
		"name": "postcss-focus-within",
		"description": "Use the :focus-within pseudo-selector in CSS",
		"version": "6.0.0",
		"version": "6.1.0",
		"contributors": [
		@@ -6,0 +6,0 @@ {

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

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

		```js
		postcssFocusWithin({ disablePolyfillReadyClass: true })
		```

		```pcss
		.my-form-field:focus-within label {
		background-color: yellow;
		}

		/* becomes */

		.my-form-field[focus-within] label, .my-form-field[focus-within] label {
		background-color: yellow;
		}
		.my-form-field:focus-within label {
		background-color: yellow;
		}
		```

		## Browser
		@@ -120,3 +147,3 @@
		<!-- When using a CDN url you will have to manually update the version number -->
		<script src="https://unpkg.com/postcss-focus-within@5.0.4/dist/browser-global.js"></script>
		<script src="https://unpkg.com/postcss-focus-within@6.1.0/dist/browser-global.js"></script>
		<script>focusWithinInit()</script>
		@@ -123,0 +150,0 @@ ```

Improved metrics