Angular2 :host selector

[cescoferraro]

Originally posted this at dlmanning/gulp-sass#464
And got advised to open the issue here.

Consider the fact that Angular uses :host as a component selector
https://angular.io/docs/ts/latest/guide/component-styles.html

I am using a simple gulp task like

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass:compile', function () {
    //noinspection JSUnresolvedFunction
    return gulp.src('./test.sass')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("./sass"));

});

Test1

test.sass

body
  background-color: green
:host
  background: #000

sass output

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
       If ":host" should be a selector, use "\:host" instead.
        on line 3 of test.sass
  Use --trace for backtrace.

gulp-sass output

body {
  background-color: green; }

:host {
  background: #000; }

Test2 - Escaping the selector as suggested by sass

test.sass

body
  background-color: green
\:host
  background: #000

sass output

body {
  background-color: green; }

:host {
  background: #000; }

gulp-sass output

body {
  background-color: green; }

\:host {
  background: #000; }

[mgreter]

I opened an issue upstream at sass2scss.
The behavior doesn't seem to be documented ...