Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editing CSS in the inspect menu is broken in Chromium browsers #24414

Closed
emmettito opened this issue Dec 9, 2022 · 5 comments
Closed

Editing CSS in the inspect menu is broken in Chromium browsers #24414

emmettito opened this issue Dec 9, 2022 · 5 comments

Comments

@emmettito
Copy link

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.
image

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

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

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
Copy link
Member

JoostK commented Dec 9, 2022

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.

@ngbot ngbot bot removed this from the needsTriage milestone Dec 12, 2022
@alan-agius4
Copy link
Collaborator

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
Copy link
Collaborator

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= */

alan-agius4 added a commit to alan-agius4/css-loader that referenced this issue Dec 13, 2022
In this case the `sourceURL` is not needed as the entire sourcemap which cotains all the information is being embeeded.

Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
alan-agius4 added a commit to alan-agius4/css-loader that referenced this issue Dec 13, 2022
In this case the `sourceURL` is not needed as the entire sourcemap which contains all the information is being embedded.

Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
alan-agius4 added a commit to alan-agius4/css-loader that referenced this issue Dec 14, 2022
In this case the `sourceURL` is not needed as the entire sourcemap which contains all the information is being embedded.

Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
alexander-akait pushed a commit to webpack-contrib/css-loader that referenced this issue Dec 14, 2022
In this case the `sourceURL` is not needed as the entire sourcemap which contains all the information is being embedded.

Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
@alan-agius4
Copy link
Collaborator

Closed via #24436

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 14, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants