Editing CSS in the inspect menu is broken in Chromium browsers

[emmettito]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

To re-create this issue, perform the following steps:
Create a new project with "ng new demo"
When creating the project, make sure to enable SCSS

Create 2 components, each with its own unique SCSS file.
Create a mixin in the generated styles.scss.
Import styles.scss in both components and utilize the shared mixin in both.
Include both components in the generated app component template.

Run "ng serve".

In Google Chrome, or any other Chromium-based browser open up to http://localhost:4200/

Right-click and inspect one of the components. In the Styles tab, edit one of the styles. The styles of the other component will have become corrupted and cannot be undone until the page is refreshed.

For this demo, I have 3 instances of Component A and 3 instances of Component B.
I inspected the last instance of Component B.

I changed the background from lightgreen to darkgreen and the styles for Component A no longer apply.

I changed the color back to lightgreen and styles for Component A are still in a broken state.

Please provide a link to a minimal reproduction of the bug

https://www.icloud.com/iclouddrive/029Z8W6H1o12qpP8GR4bJ6m4g#demo

Please provide the exception or error you saw

Please see the screenshots included above.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.0.3
Node: 16.17.0
Package Manager: npm 8.18.0
OS: win32 x64

Angular: 15.0.3
... animations, cli, common, compiler, compiler-cli, core, forms     
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.3
@angular-devkit/build-angular   15.0.3
@angular-devkit/core            15.0.3
@angular-devkit/schematics      15.0.3
@schematics/angular             15.0.3
rxjs                            7.5.7
typescript                      4.8.4

Anything else?

The issue exists in any Chromium-based browser, but does not exist in Firefox or Safari.

The issue only exists when running on localhost using the command "ng serve". It does not exist when you run "ng build" and serve the files separately.

I've personally tested this on the latest iterations of macOS and Windows 11 and the issue exists in both Operating Systems.

The issue did not appear in Angular 14, but appeared when we upgraded our projects to Angular 15 and could no longer edit the CSS in the browser during development.

[JoostK]

This has been reported before in angular/angular#48151; this is seemingly a Chromium bug in DevTools as Angular does not have control over how that behaves. The hard thing is trying to figure out what the root cause is; I suspect there may be some build optimizer rule that changes the CSS such that the bug is avoided, perhaps running ng serve -c production will provide some additional insights.

[alan-agius4]

I looked at this briefly and this seems to be caused by sourcemaps.

Couple of points:

• The strange thing is that if you put a CSS declaration in styles.scss example:
  * {color:red} the problem no longer manifests itself.

• It appears that this issue only manifest itself when Sass sourcemaps are processed by Webpack sass-loader.

Transferring to the CLI repo as this looks more of a tooling issue.

[alan-agius4]

Looked a bit more into this and it appears that this is caused by the sourceURL comments which are added by css-loader.

[_nghost-ogu-c13] {
  display: flex;
  flex-direction: column;
  min-height: 1px;
  min-width: 1px;
  border: 1px solid lightgreen;
  border-radius: 12px;
  background-color: lightgreen;
  padding: 12px 8px;
  margin-bottom: 4px;
}
/*# sourceURL=webpack://./src/app/b/b.component.scss */
/*# sourceURL=webpack://./src/styles.scss */
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9hcHAvYi9iLmNvbXBvbmVudC5zY3NzIiwid2VicGFjazovLy4vc3JjL3N0eWxlcy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VDS0UsYUFBQTtFQUNBLHNCQUFBO0VBTkEsZUFBQTtFQUNBLGNBQUE7RURDQSw0QkFBQTtFQUNBLG1CQUFBO0VBQ0EsNEJBQUE7RUFDQSxpQkFBQTtFQUNBLGtCQUFBO0FBRUYiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0IFwiLi4vLi4vc3R5bGVzLnNjc3NcIjtcclxuXHJcbjpob3N0IHtcclxuICBAaW5jbHVkZSBmbGV4LWNvbHVtbjtcclxuICBib3JkZXI6IDFweCBzb2xpZCBsaWdodGdyZWVuO1xyXG4gIGJvcmRlci1yYWRpdXM6IDEycHg7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmVlbjtcclxuICBwYWRkaW5nOiAxMnB4IDhweDtcclxuICBtYXJnaW4tYm90dG9tOiA0cHg7XHJcbn1cclxuIiwiQG1peGluIGZsZXgtZml4IHtcbiAgLy9maXhlcyBuZXN0ZWQgZmxleGJveGVzXG4gIG1pbi1oZWlnaHQ6IDFweDtcbiAgbWluLXdpZHRoOiAxcHg7XG59XG5cbkBtaXhpbiBmbGV4LWNvbHVtbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIEBpbmNsdWRlIGZsZXgtZml4O1xufVxuXG5AbWl4aW4gZmxleC1yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBAaW5jbHVkZSBmbGV4LWZpeDtcbn1cblxuLy8gKiB7XG4vLyAgIGNvbG9yIDpyZWRcbi8vIH1cbiJdLCJzb3VyY2VSb290IjoiIn0= */