README-POSTCSS.md

Focus Within for PostCSS

Focus Within lets you style elements based on whether they are focused or contain a focused element, following the Selectors Level 4 specification.

.field:focus-within label {
  font-weight: bold;
}

/* becomes */

.field[focus-within] label {
  font-weight: bold;
}

.field:focus-within label {
  font-weight: bold;
}

Focus Within duplicates rules using the :focus-within pseudo-class with a [focus-within] attribute selector. 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 Focus Within to your project:

npm install focus-within --save-dev

Use Focus Within to process your CSS:

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

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

Or use it as a [PostCSS] plugin:

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

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

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.

focusWithin({ preserve: false });

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

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

.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;
}