1.0.0 • Published 10 years ago

postcss-to-nest v1.0.0

Weekly downloads
1
License
CC0-1.0
Repository
github
Last release
10 years ago

CSS To Nest

NPM Version Build Status

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