PostCSS plugin for adding a parent selector to all rules in a css file.
npm install postcss-parent-selector[PostCSS] plugin for adding a parent selector to all rules in a CSS file.
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/domwashburn/postcss-parent-selector.svg
[ci]: https://travis-ci.org/domwashburn/postcss-parent-selector
Options:
``js`
{selector: '.parent'}
Input CSS:
`css
.foo {
/ Input example /
}
.foo .bar,
div.foo .bar {
/ Input example /
}
`
Output CSS:
`css
.parent .foo {
/ Input example /
}
.parent .foo .bar,
.parent div.foo .bar {
/ Input example /
}
`selectorOptions
The option takes a string value that should be placed at the beginning of each selector, including selector lists separated by commas.
`js
// class
{selector: '.parent-class'}
// id
{selector: '#parent-id'}
// element
{selector: 'div.parent-class'}
`
js
postcss([ require('postcss-parent-selector') ])
`See [PostCSS] docs for examples for your environment.
$3
`js
import gulp from 'gulp';
import plumber from 'gulp-plumber';
import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import parentSelector from 'postcss-parent-selector';gulp.task('styles', () => {
// array containing postcss plugins
var processors = [
parentSelector({selector: '.parent'})
];
// source compiled css or scss files
return gulp.src('./path/to/*.scss')
.pipe(plumber())
// scss compiling
.pipe(sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', sass.logError))
// postcss processes the compiled css
.pipe(postcss(processors))
.pipe(gulp.dest('./path/to/dest'))
.pipe(reload({ stream: true }));
});
``