PostCSS Focus Within

PostCSS Focus Within lets you use the :focus-within pseudo-class in CSS, following the Selectors Level 4 specification.

It is the companion to the focus-within polyfill.

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

/ becomes /

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

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

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.

Usage

Add PostCSS Focus Within to your project:

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

Use PostCSS Focus Within to process your CSS:

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

postcssFocusWithin.process(YOUR_CSS /, processOptions, pluginOptions /); ```

Or use it as a PostCSS plugin:

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

postcss([ postcssFocusWithin(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```

PostCSS Focus Within 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.

js focusWithin({ preserve: false });

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

/ becomes /

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

replaceWith

The replaceWith option defines the selector to replace :focus-within. By default, the replacement selector is [focus-within].

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

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

/ becomes /

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

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