jtzero / postcss-host

PostCSS Host

PostCSS plugin to add :host selector to every selector.

Purpose? work around for this angular/angular#7108

:host h3 {
    outline: 0;
}
.button:hover {
    background: red;
}

:host h3 {
    outline: 0;
}
:host .button:hover {
    background: red;
}

Usage

postcss([ require('postcss-host') ])

Gulp example

var processorArray = [
    require('postcss-host')()
];

gulp.task('pipe-styles', function () {
    gulp.src('src/assets/*.css')
        .pipe(postcss(processorArray))
        .pipe(gulp.dest('dist/assets/'))
});