No way to generate component's CSS source maps

[x-yuri]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

In Chrome Developer Tools on the Elements tab I choose an element, and get the following styles:

Clicking on the <style>...</style> part doesn't show me the corresponding stylesheet file.

Expected behavior

The corresponding file is opened on the Sources tab.

Minimal reproduction of the problem with instructions

• download the Tour of Heroes, extract it and cd into corresponding directory
• npm i
• ./node_modules/.bin/ng serve --open
• Ctrl-Shift-C
• click on h1
• click on <style>...</style>

Why not angular-cli issue?

Let's say I have a SASS file for a component. The only way to pass source map to StyleCompiler is to inline it. So no option for SASS. That is achievable with PostCSS, but I see no effort on the part of StyleCompiler to try and parse it. On top of that, Angular changes the stylesheet, so even if I managed to embed the source map, it's no longer relevant. While it might be not much of an issue for development build (not sure), it is an issue for production one (minified stylesheets). Am I missing something?

What is the motivation / use case for changing the behavior?

Better development experience.

Environment

Angular version: 6.0.0


Browser:
- [x] Chrome (desktop) version 68.0.3440.106
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.9.0  
- Platform: Arch Linux 

Others:

[x-yuri]

Feature, you say...

[trotyl]

The feature is not quite viable in current architecture, the <style> content is generated at runtime when rendering:

angular/packages/platform-browser/src/dom/dom_renderer.ts

Line 43 in 65943b4

style = style.replace(COMPONENT_REGEX, compId);

As the content is not determined until the component being rendered, so the sourcemap also need to be generated at runtime, which is harmful for performance (both size and speed).

A possible solution is waiting for #14914, so that the css file could be exposed to build tool and let it deal with sourcemap chaining.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alxhub]

Closing due to insufficient votes.

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