Nearsighted Paramecium Multiverse

    postcss-focus-within
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • 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 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

    4,548,448

    Version

    5.0.1

    License

    CC0-1.0

    Unpacked Size

    15.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • jonathantneal