Angular2 :host selector issues

[cescoferraro]

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

[xzyfer]

Please file this issue with LibSass.
On 12 Apr 2016 2:58 PM, "cesco" notifications@github.com wrote:

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

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#464

[xzyfer]

This has been fixed in node-sass@v3.7.0