Subscription management page uses CSS file with broken/out-of-date source map

[dholbert]

Description

Poking at https://subscriptions.firefox.com/subscriptions in devtools, I'm noticing some CSS rules that are supposedly defined in .scss files, but if I click through, I end up seeing a completely different bit of CSS, and the CSS that I was looking for is nowhere to be found.

Steps to reproduce

1. Have a subscription to e.g. Mozilla VPN service (probably required for this web page to load in such a way to trigger this bug, though I'm not sure)
2. Right-click your username next to the profile avatar photo and choose "Inspect"
3. Notice some CSS rule that's shown as being defined in a .scss file, e.g. the one for #fxa-settings-profile-header .card-header that starts with font-size: 20px;
4. Click the name of the stylesheet next to that rule, in this case _avatar.scss:18

Expected result

I should end up looking at that rule in the .scss file.

Actual result

I ended up seeing some completely different line in the .scss file. The line that I quoted above, font-size: 20px, doesn't seem to exist at all in the .scss file.

Environment

Firefox Nightly 121 and Chrome 120 "dev" on Ubuntu 23.10

I think this sort of thing is an indication that we've got some invalid source-map info in our CSS file -- in this case, in https://subscriptions.firefox.com/static/css/main.0bd2978c.css which is the actual CSS file being used here.

┆Issue is synchronized with this Jira Task

[dholbert]

(The source map itself is at https://subscriptions.firefox.com/static/css/main.0bd2978c.css.map , though that's not super human-readable.)