postcss-nesting

    8.0.1 • Public • Published

    PostCSS Nesting PostCSS

    NPM Version CSS Standard Status Build Status Support Chat

    PostCSS Nesting lets you nest style rules inside each other, following the CSS Nesting specification.

    a, b {
      color: red;
    
      & c, & d {
        color: white;
      }
    }
    
    /* becomes */
    
    a, b {
      color: red;
    }
    
    a c, a d, b c, b d {
      color: white;
    }

    NOTICE: In a future version of this project, nesting at-rules like @media may be deprecated, as they are not part of the nesting proposal. In a comment, a CSSWG member expressed interest in handling nested @media while handling selector nesting. So deprecating nested at-rules has been temporarily delayed.

    Usage

    Add PostCSS Nesting to your project:

    npm install postcss-nesting --save-dev

    Use PostCSS Nesting to process your CSS:

    import postcssNesting from 'postcss-nesting';
    
    postcssNesting.process(YOUR_CSS /*, processOptions, pluginOptions */);

    Or use it as a PostCSS plugin:

    import postcss from 'postcss';
    import postcssNesting from 'postcss-nesting';
    
    postcss([
      postcssNesting(/* pluginOptions */)
    ]).process(YOUR_CSS /*, processOptions */);

    PostCSS Nesting runs in all Node environments, with special instructions for:

    Node Webpack Create React App Gulp Grunt

    Install

    npm i postcss-nesting

    DownloadsWeekly Downloads

    5,407,489

    Version

    8.0.1

    License

    CC0-1.0

    Unpacked Size

    71.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • jonathantneal