Nutritious Pancake Mountain
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

postcss-focus-within

4.0.0 • Public • Published

PostCSS Focus Within PostCSS Logo

npm version CSS Standard Status build status support chat

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.

'Can I use' table

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

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

Use PostCSS Focus Within to process your CSS:

const postcssFocusWithin = require('postcss-focus-within');
 
postcssFocusWithin.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

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.

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

Install

npm i postcss-focus-within

DownloadsWeekly Downloads

3,214,835

Version

4.0.0

License

CC0-1.0

Unpacked Size

14.7 kB

Total Files

6

Last publish

Collaborators

  • avatar