v1.0.0-beta.25 && Sass :host

[sebastiannm]

Hi,

after the latest update, all the SASS files using :host are giving an error

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

OSX Sierra

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.25.5
node: 6.9.1
os: darwin x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/flex-layout: 2.0.0-beta.1
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Use :host inside a sass file. Ex:

:host
  display: block

The log given by the failure.

Normally this include a stack trace and some more information.

Invalid CSS after "h": expected 1 selector or at-rule, was "host: {"

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[beeman]

@sebastiannm can you please paste the component?

[sebastiannm]

it happens too with a new app that I just created from scratch using: ng new testapp --style=sass

this is the boilerplate component...

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'app works!';
}

[CarreraPHP]

@sebastiannm , it not just happens for :host but for any style written in *.sass file. The error clearly states that it expects scss code with { and not sass code.

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

above code if changed like below will work fine

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

However, by selecting sass as the style extension we should be able to write style code in ruby-like style.

[beeman]

I can confirm that I get this error message to on this version of angular-cli when starting it with --style=sass.

However, if I create the app like this it works: ng new testapp-scss --style=scss

[beeman]

It looks like you should do it like this:

\:host
  margin: 100px

Source: sass/libsass#1990

[sebastiannm]

@beeman yeah that solves the issue. This error didn't happen in beta v24

[beeman]

@sebastiannm please note that in this version there was an upgrade of node-sass (from 3.x to 4.x), that might be related. More info here #3860

It might be related to that causes this.

[clydin]

This library (https://github.com/mgreter/sass2scss) is what is used inside libsasswhich is used in node-sass to handle the old sass syntax. With the upgrade, the identification of sass properties seems to have been improved. As a result :host is interpreted as a sass property due to the lack of special handling for the host selector (there are checks for other pseudo selectors).

sass2scss should probably support :host directly.

[filipesilva]

Great job tracking this down @beeman and @clydin! I'm closing as it seems to be working as intended, albeit unfortunately so.

[x-yuri]

It has to do with this particular commit:

1.sass:

:host(body)                                                                                          
    margin: 0

$ git co v1.1.0~ && make && ./sass2scss < 1.sass
:host(body) { margin: 0; }

$ git co v1.1.0 && make && ./sass2scss < 1.sass
host(body): { margin: 0; }

It was integrated into libsass-3.4.0-RC1, and node-sass-3.14.0-0.

Related issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}