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.

Sign up for GitHub

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

Jump to bottom

Scss source maps mismatch in angular 16 #55508

Closed
liorstezki opened this issue Jun 25, 2023 · 1 comment
Closed

Scss source maps mismatch in angular 16 #55508

liorstezki opened this issue Jun 25, 2023 · 1 comment
Assignees
@alan-agius4
Labels
area: compiler Issues related to `ngc`, Angular's template compiler bug core: CSS encapsulation core: stylesheets
Milestone
needsTriage

Comments

@liorstezki
Copy link

liorstezki commented Jun 25, 2023 •
edited

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

core

Is this a regression?

Yes

Description

After upgrading my project to Angular v16 from Angular v14, I noticed that the source maps of my scss files were mismatched
The source maps changed (not necessarily correctly) when I removed imports of external packages

I created a test project using angular cli and installed two of the packages we use - bootstrap and @ng-select/ng-select and I saw that the problem is restored

before importing bootstrap and @ng-select/ng-select scss
app.component.scss

.test {
  color: red;
}

before

after importing bootstrap and @ng-select/ng-select scss

@import "../../node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/@ng-select/ng-select/themes/default.theme.css";

.test {
  color: red;
}

after

Importing bootstrap or ng-select separately works fine. I also tried other packages combinations and got mismatched source maps

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/node-ej8xiu?file=index.js

Please provide the exception or error you saw

Scss source maps mismatch

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

Angular CLI: 16.1.1
Node: 18.12.1
Package Manager: npm 8.19.2
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.1
@angular-devkit/build-angular   16.1.1
@angular-devkit/core            16.1.1
@angular-devkit/schematics      16.1.1
@angular/cli                    16.1.1
@schematics/angular             16.1.1
rxjs                            7.8.1
typescript                      5.1.3

Anything else?

No response
@JeanMeche JeanMeche transferred this issue from angular/angular Jun 25, 2023
@alan-agius4
Copy link
Contributor

I had a look at this and it appears to be caused the by the Angular compiler style shimming logic in

angular/packages/compiler/src/shadow_css.ts

Line 659 in 811fe00

private _scopeSelector(selector: string, scopeSelector: string, hostSelector: string): string {

@alan-agius4 alan-agius4 transferred this issue from angular/angular-cli Apr 24, 2024
@alan-agius4 alan-agius4 self-assigned this Apr 24, 2024
@alan-agius4 alan-agius4 added area: compiler Issues related to `ngc`, Angular's template compiler core: stylesheets core: CSS encapsulation labels Apr 24, 2024
@ngbot ngbot bot added this to the needsTriage milestone Apr 24, 2024
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
b3dd408 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
d83d200 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
@alan-agius4 alan-agius4 mentioned this issue Apr 24, 2024
Closed
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
ced077f 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
303ab7b 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
933ade0 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
ee07635 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
alan-agius4 added a commit to alan-agius4/angular that referenced this issue Apr 24, 2024
@alan-agius4
fix(compiler): maintain multiline CSS selectors during CSS scoping
83fd4a1 
Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes angular#55508
AndrewKushnir pushed a commit that referenced this issue May 6, 2024
@alan-agius4 @AndrewKushnir
fix(compiler): maintain multiline CSS selectors during CSS scoping (#…
a040fb7 
…55509)

Previously, multiline selectors were being converted into single lines, resulting in sourcemap disruptions due to shifts in line numbers.

Closes #55508

PR Close #55509
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alan-agius4 alan-agius4

Labels
area: compiler Issues related to `ngc`, Angular's template compiler bug core: CSS encapsulation core: stylesheets
Projects
None yet
Milestone
needsTriage
Development

Successfully merging a pull request may close this issue.

fix(compiler): maintain multiline CSS selectors during CSS scoping alan-agius4/angular
2 participants
@alan-agius4 @liorstezki