postcss-to-nest

CSS To Nest

CSS To Nest transforms unnested CSS into nested CSS, following the CSS Nesting Module specification. This might be helpful for updating a project with a single file of legacy CSS.

/* before */
.foo .bar {
    color: blue;
}
 
.foo .bar .pre.mon {
    color: white;
}
 
.foo .bar .pre {
    color: red;
}
 
/* after */
.foo {
    @nest & .bar {
        color: blue;
 
        @nest & .pre {
            color: red;
 
            @nest &.mon {
                color: white;
            }
        }
    }
}

Usage

Add CSS To Nest to your build tool:

npm install postcss-to-nest --save-dev

Node

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

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load CSS To Nest as a PostCSS plugin:

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

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable CSS To Nest within your Gulpfile:

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

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable CSS To Nest within your Gruntfile:

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