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?

[jeffwhelpley]

Hmm...is there perhaps an opportunity to support sass/less for inline styles with the ivy rendering engine?

[alan-agius4]

Closing as this is working as intended. And showing a warning when the inline styles is no CSS is expensive and not always accurate. As we know what type of per-processor to use purely based on the file extension.

It is also highlighted in the AIO docs that inline styles need to be in css https://angular.io/guide/component-styles

[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.}