CSS Nesting

CSS Nesting is a PostCSS plugin that allows you to nest one style rule inside another, similar to Sass, but following the [CSS Nesting Module Level 3] specification.

This greatly increases the modularity and maintainability of CSS stylesheets.

/* before */

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, b c, a d, b d {
    color: white;
}

a a, a b, b a, b b {
    color: blue;
}

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

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

Usage

Follow these steps to use CSS Nesting.

Add CSS Nesting to your build tool:

npm install postcss-nesting --save-dev

Node

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

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load CSS Nesting as a PostCSS plugin:

postcss([
    require('postcss-nesting')({ /* 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('./css/src/*.css').pipe(
        postcss([
            require('postcss-nesting')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

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: {
            processors: [
                require('postcss-nesting')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.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).