csstools/postcss-to-nest

Transform unnested CSS into nested CSS

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'
		}
	}
});