Warn User When Detecting Styles that may be SCSS or LESS for inline styles

[johnpapa]

Bug Report or Feature Request (mark with an x)

- [  ] bug report -> please search issues before submitting
- [ X ] feature request

Versions.

Angular CLI: 1.5.0
Node: 8.9.1
OS: darwin x64
macOS Sierra 10.12.6

Repro steps.

1. run ng new foo --styles scss
2. create a component with inline styles
3. add scss styles to it
4. run ng serve -o

The log given by the failure.

The styles compile as CSS, with no errors.

Desired functionality.

I would like to see angular warn when detecting SASS or LESS in inline styles and the CLI json file has SCSS or LESS identified.

as per chat with @StephenFluin

[johnpapa]

Referencing the original issue where I requested that inline SASS be allowed #8470

[johnpapa]

cc @wardbell

[wardbell]

I don't fully understand the reasoning behind closing issue #8470 as expressed here:

Inline styles will not be rendered with a special renderer, unfortunately. It is impossible for us to know which compiler you want your inline style to use, and even so we don’t have control over how inline styles are compiled; we do not resolve their content like we do with external styles. This is a limitation of the angular compiler itself.

There are two arguments:

1. CLI can’t know what to do
2. Even if it could, there is no opportunity to process the styles strings.

The first argument isn't persuasive. The CL could apply the processor configured in .angular-cli.json by default and use an override prefix (e.g., ‘!scss!‘, ‘!css!‘, ‘!less!‘) where necessary. In order to not break existing apps, assume always ‘!css!’ unless there is a contrary prefix. #8470 describes such a syntax.

The second argument hinges on the assertion that the CLI does not preprocess files before the compiler sees them. Is that really true? I thought that we used webpack plugin to inline the templates and style files before the CLI saw the component source. If so, why can't it engage the styles preprocessor based on the information I mentioned in response to argument (1).

In any case, we should document that inline styles are not pre-processed by the CLI here in the wiki. See PR #8683

I have created a PR to do that in the Angular Docs as well:
angular/angular#20701

[hansl]

The second argument hinges on the assertion that the CLI does not preprocess files before the compiler sees them. Is that really true?

That is correct. For inline styles, ngc reads the value and does not use the resource loader. There's no place for us to do this.

[hansl]

@johnpapa

I would like to see angular warn when detecting SASS or LESS in inline styles and the CLI json file has SCSS or LESS identified.

Considering there's no real pattern (using something fast like a regex or string search) that we can detect that would differentiate between SCSS/LESS and native CSS, it's really hard to do this and would significantly lower compilation speed. Or did you mean detect any inline style and show a warning?