Add the ability to nest one style rule inside another
JavaScript CSS
Latest commit 88f8f84 Nov 27, 2016 @csmosx csmosx committed with Update README - missing selectors (#25)
Permalink
Failed to load latest commit information.
test 2.3.1 Mar 16, 2016
.editorconfig 2.3.0 Feb 21, 2016
.eslintrc 2.3.1 Mar 16, 2016
.gitignore 2.3.1 Mar 16, 2016
.jscsrc 2.3.0 Feb 21, 2016
.npmignore 2.3.1 Mar 16, 2016
.travis.yml 2.3.0 Feb 21, 2016
CHANGELOG.md 2.3.1 Mar 16, 2016
CONTRIBUTING.md 2.1.1 Jan 4, 2016
LICENSE.md Update LICENSE.md Jun 17, 2015
README.md Update README - missing selectors (#25) Nov 28, 2016
index.js 2.3.1 Mar 16, 2016
package.json 2.3.1 Mar 16, 2016
test.js Use curly braces in conditionals Feb 21, 2016

README.md

CSS Nesting

PostCSS Logo

NPM Version Build Status

CSS Nesting allows you to nest one style rule inside another, following the CSS Nesting Module Level 3 specification.

/* direct nesting */

a, b {
    color: red;

    & c, & d {
        color: white;
    }

    & & {
        color: blue;
    }

    &:hover {
        color: black;
    }

    @media (min-width: 30em) {
        color: yellow;

        @media (min-device-pixel-ratio: 1.5) {
            color: green;
        }
    }
}

/* or at-rule nesting */

a, b {
    color: red;

    @nest & c, & d {
        color: white;
    }

    @nest & & {
        color: blue;
    }

    @nest &:hover {
        color: black;
    }

    @media (min-width: 30em) {
        color: yellow;
    }
}

/* after */

a, b {
    color: red;
}

a c, a d, b c, b d {
    color: white;
}

a a, b b {
    color: blue;
}

a:hover, b:hover {
    color: black;
}

@media (min-width: 30em) {
    a, b {
        color: yellow;
    }
}

@media (min-width: 30em) and (min-device-pixel-ratio: 1.5) {
    a, b {
    color: green;
    }
}

Usage

Add CSS Nesting to your build tool:

npm install postcss-nesting --save-dev

Node

require('postcss-nesting').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load CSS Nesting as a PostCSS plugin:

postcss([
    require('postcss-nesting')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable CSS Nesting within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./src/*.css').pipe(
        postcss([
            require('postcss-nesting')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable CSS Nesting within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            use: [
                require('postcss-nesting')({ /* options */ })
            ]
        },
        dist: {
            src: '*.css'
        }
    }
});

Options

bubble

Type: Array
Default: ['document', 'media', 'supports']

Specifies additional at-rules whose contents should be transpiled so that the at-rule comes first. By default, @media, @supports and @document will do this.

prefix

Type: String
Default: null

Specifies a prefix to be surrounded by dashes before the @nest at-rule (e.g. @-x-nest).