postcss-to-nest
v1.0.0
Published
Transform unnested CSS into nested CSS
Downloads
13
Readme
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'
}
}
});