PostCSS Focus Visible Within

Adds the missing focus pseudoselector - :focus-visible-within.

1:focus-visible-within {
2  background: tomato;
3}
4
5/* becomes */
6
7:has(:focus-visible) {
8  background: tomato;
9}

Usage

Add PostCSS Focus Visible Within to your project

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

Use it as a PostCSS plugin

1// postcss.config.js
2
3import focusVisibleWithin from 'postcss-focus-visible-within';
4
5export default {
6  plugins: [focusVisibleWithin],
7};

Alternatives

You might prefer to use a custom snippet. Here's an example for VSCode/VSCode based browsers. Add it to .vscode/css.code-snippets in your project, or if you'd like to use it globally, add it to ~/Library/Application Support/Code/User/snippets/css.json.

1{
2  ":focus-visible-within": {
3    "prefix": ":focus-visible-within",
4    "body": ":has(:focus-visible)",
5  },
6}