postcss-parent-selector

postcss-parent-selector

PostCSS plugin for adding a parent selector to all rules in a CSS file.

Example

Options:

{selector: '.parent'}

Input CSS:

.foo {
    /* Input example */
}


.foo .bar,
div.foo .bar {
    /* Input example */
}

Output CSS:

.parent .foo {
    /* Input example */
}


.parent .foo .bar,
.parent div.foo .bar {
    /* Input example */
}

Options

The selector option takes a string value that should be placed at the beginning of each selector, including selector lists separated by commas.

// class
{selector: '.parent-class'}

// id
{selector: '#parent-id'}

// element
{selector: 'div.parent-class'}

Usage

postcss([ require('postcss-parent-selector') ])

See PostCSS docs for examples for your environment.

Gulp.js ( with babel )

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