z-index values in .css preceded by a # character #20870

jlquijada · 2021-05-20T12:04:37Z

After updating to version 12.0.1 the .scss files are not being processed correctly, and some values that should be just an integer, are preceded by an # character on the resulting .css file.

Is this a regression?

Yes, it was working until version 12.0.0

Description

My updated packages are:
"@angular/cli": "^12.0.0", --> "^12.0.1",
"@angular-devkit/architect": "^0.1200.0", --> "^0.1200.1"
"@angular-devkit/core": "^12.0.0", --> "^12.0.1",
"@angular/animations": "^12.0.0", --> "^12.0.1",
"@angular/cdk": "^12.0.0", --> "^12.0.1",
"@angular/common": "^12.0.0", --> "^12.0.1",
"@angular/compiler": "^12.0.0", --> "^12.0.1",
"@angular/core": "^12.0.0", --> "^12.0.1",
"@angular/forms": "^12.0.0", --> "^12.0.1",
"@angular/platform-browser": "^12.0.0", --> "^12.0.1",
"@angular/platform-browser-dynamic": "^12.0.0", --> "^12.0.1",
"@angular/platform-server": "^12.0.0", --> "^12.0.1",
"@angular/router": "^12.0.0", --> "^12.0.1",
"@schematics/angular": "^12.0.0", --> "^12.0.1",
"@angular-devkit/build-angular": "~12.0.0", --> "^12.0.1",
"@angular/compiler-cli": "~12.0.0", --> "^12.0.1",
"@types/node": "^15.3.0", --> "^15.3.1",
"eslint-plugin-jsdoc": "^34.7.0", --> "^34.8.2",

On Visual Studio Code I can see the expected values, but on the resulting .css (browser) I can see that some of the values are preceded by a #, then it is marked by the browser as an illegal value, and ignored.

The calculated values on the components classes are correct, only preceded with a # on the resulting .css file (browser)

Minimal Reproduction

This is my general files structure:

src/
src/_global.scss

 $zIndexBackdropModal: 900;

src/styles.scss

@import "./global";
.someClass { z-index: $zIndexBackdropModal; }

src/app/
src/app/app.component.scss

@import "../global";
.someClass2 { z-index: $zIndexBackdropModal; }
.someClass21{ z-index: $zIndexBackdropModal * 2; }

src/app/component1/
src/app/component1/component1.component.scss

@import "../../global";
$zIndex4Debug: $zIndexBackdropModal * 2;
.someClass3 { z-index: $zIndex4Debug; }
.someClass4 { z-index: $zIndex4Debug + 10; }

This is what it would be expected as resulting .css (the result up to version 12.0.0):

.someClass { z-index: 900;}
.someClass2 { z-index: 900; }
.someClass21 { z-index: 1800; }
.someClass3 { z-index: 1800; }
.someClass4 { z-index: 1810; }

This is what I get now after updating to version 12.0.1:

.someClass { z-index: 900;}
.someClass2 { z-index: #900; }
.someClass21 { z-index: 1800; }
.someClass3 { z-index: #1800; }
.someClass4 { z-index: #1810; }

JoostK · 2021-05-20T12:10:54Z

What a coincidence... #20869

alan-agius4 · 2021-05-20T12:30:47Z

While I did manage to replicate the other issue. I didn't manage to replicate this.

Input

$zIndex4Debug: 1000 * 2;
.someClass3 { z-index: $zIndex4Debug; }
.someClass4 { z-index: $zIndex4Debug + 10; }

Output

.someClass3{z-index:2000}.someClass4{z-index:2010}

kemsky · 2021-05-20T13:04:43Z

I have the same issue:

:host div {
    position: absolute;
    top: 25px;
    left: 0;
    min-width: 100px;
    z-index: 100;
    background: #FFFFFF;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
}

is converted to:

[_nghost-ged-c146] div[_ngcontent-ged-c146] {
    position: absolute;
    top: 25px;
    left: 0;
    min-width: 100px;
    z-index: #100;
    background: #fff;
    box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
    padding: 8px 12px;
}

jlquijada · 2021-05-20T13:10:14Z

While I did manage to replicate the other issue. I didn't manage to replicate this.

Input
$zIndex4Debug: 1000 * 2;
.someClass3 { z-index: $zIndex4Debug; }
.someClass4 { z-index: $zIndex4Debug + 10; }
Output
.someClass3{z-index:2000}.someClass4{z-index:2010}

It does not happen for all the components in my case, and this .someClass3 and .someClass4 are just an example. I have many components, and this happens only for some of them, and not even in all the css classes of a component.

I have reverted to 12.0.0 until a fix is done. Maybe it has to do something with nanocss as @JoostK suggested...

What a coincidence... #20869

alan-agius4 · 2021-05-20T13:10:33Z

Please post your reproductions here: cssnano/cssnano#1115 since this is not actionable by us.

michaelfaith · 2021-05-20T14:52:52Z

We're experiencing this as well.

.breadcrumbs-container {
  position: relative;
  font-size: 15px;
  background-color: $white;
  color: mat.get-color-from-palette($fab-accent-palette, 600);
  height: $breadcrumbs;
  width: 100%;
  white-space: nowrap;
  margin-bottom: 0 !important;
  z-index: 300;
}

.breadcrumbs-container[_ngcontent-kxa-c34] {
    position: relative;
    font-size: 15px;
    background-color: #fff;
    color: #6d6d6a;
    height: 28px;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 0!important;
    z-index: #300;
}

$white = #ffffff. I can't help but notice that in common in all of our examples. the #ffffff -> #fff

skeditAdmin · 2021-05-20T14:58:00Z

I'm experiencing this as well.

.appointments .appointment-block {
    display: flex;
    position: absolute;
    z-index: 100;
    min-height: 58px;
    max-height: 58px;
    top: 0;
    left: 0;
    overflow: hidden
}

.appointments .appointment-block {
    display: flex;
    position: absolute;
    z-index: #100;
    min-height: 58px;
    max-height: 58px;
    top: 0;
    left: 0;
    overflow: hidden
}

jlquijada · 2021-05-20T15:01:47Z

We're experiencing this as well.

.breadcrumbs-container {
  position: relative;
  font-size: 15px;
  background-color: $white;
  color: mat.get-color-from-palette($fab-accent-palette, 600);
  height: $breadcrumbs;
  width: 100%;
  white-space: nowrap;
  margin-bottom: 0 !important;
  z-index: 300;
}

.breadcrumbs-container[_ngcontent-kxa-c34] {
    position: relative;
    font-size: 15px;
    background-color: #fff;
    color: #6d6d6a;
    height: 28px;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 0!important;
    z-index: #300;
}

$white = #ffffff. I can't help but notice that in common in all of our examples. the #ffffff -> #fff

#fff is a shorthand for #ffffff, so no problem, all browsers should know about this equivalency.

but your z-index: #300 is the real problem

michaelfaith · 2021-05-20T15:03:00Z

Yeah, and the example after mine didn't have that. So just coincidental it seems.

mikkeldamm · 2021-05-20T15:53:36Z

We had the same issue with our production build adding # in front of z-index.
We fixed it temporarily by explicit using this package:

"@angular-devkit/build-angular": "0.1102.10"

This package uses an older version of the cssnano package cssnano "4.1.11" that doesn't have this issue.

dogandipcin · 2021-05-20T19:07:43Z

We removed ~ character of the version number and temporarily fixed it.

"@angular-devkit/build-angular": "0.1102.3"

alan-agius4 · 2021-05-21T16:32:56Z

This has been fixed upstream cssnano/cssnano#1122

igorosabel · 2021-05-21T22:16:15Z

So, how should I update to get the issue fixed? I tried npm update, and several packages where updated, but the issue is still there. Thanks!

michaelfaith · 2021-05-22T16:20:33Z

@alan-agius4 It looks like their update isn't being picked up by /build-angular. Seems your package is locked at 5.0.2. Their fix is 5.0.4

"cssnano": "5.0.2",

So this is still an issue.

michaelfaith · 2021-05-22T16:35:12Z

Sorry, false alarm. Yes cssnano is locked at that version, but it still picked up the upstream colord 2.0, which was the important bit. I've verified this fixes the issue. @igorosabel: you might just try deleting node_modules/colord and running install again. Or, all else fails, clear your node_modules and package-lock entirely.

angular-automatic-lock-bot · 2021-06-22T08:03:07Z

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

JoostK transferred this issue from angular/angular May 20, 2021

alan-agius4 added area: devkit/build-angular devkit/build-angular:browser freq2: medium severity5: regression state: blocked on upstream labels May 20, 2021

ngbot bot added this to the needsTriage milestone May 20, 2021

alan-agius4 added the type: bug/fix label May 20, 2021

ngbot bot modified the milestones: needsTriage, Backlog May 20, 2021

alan-agius4 mentioned this issue May 20, 2021

[Bug] : Hashes (#) were added to the RGB color format cssnano/cssnano#1115

Closed

alan-agius4 added freq3: high and removed freq2: medium labels May 20, 2021

JoostK mentioned this issue May 20, 2021

Regression: Angular 12.0.1 z-index is getting a # inserted when building for production angular/angular#42206

Closed

alan-agius4 closed this as completed May 21, 2021

alan-agius4 mentioned this issue May 21, 2021

CSS minification issue with v12.0.1 and ngx-toaster #20895

Closed

1 task

JoostK mentioned this issue May 21, 2021

"#" symbol appended to z-index value on inlined styles (SCSS) angular/angular#42231

Closed

michaelfaith mentioned this issue May 22, 2021

Update cssnano dependency to include their z-index fix #20905

Closed

15 tasks

JoostK mentioned this issue May 23, 2021

Angular build prod adds hash in CSS elements with value over 99 angular/angular#42249

Closed

Ristaaf mentioned this issue May 24, 2021

Update cssnano dependency to include their z-index fix for angular-cli 11 #20918

Closed

15 tasks

alan-agius4 mentioned this issue May 25, 2021

Style minification converts RGB values within CSS variables into hex for values >99 (SCSS) #20926

Closed

15 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

z-index values in .css preceded by a # character #20870

z-index values in .css preceded by a # character #20870

jlquijada commented May 20, 2021 •

edited

JoostK commented May 20, 2021

alan-agius4 commented May 20, 2021 •

edited

kemsky commented May 20, 2021

jlquijada commented May 20, 2021 •

edited

alan-agius4 commented May 20, 2021

michaelfaith commented May 20, 2021

skeditAdmin commented May 20, 2021

jlquijada commented May 20, 2021

michaelfaith commented May 20, 2021

mikkeldamm commented May 20, 2021

dogandipcin commented May 20, 2021 •

edited

alan-agius4 commented May 21, 2021

igorosabel commented May 21, 2021

michaelfaith commented May 22, 2021

michaelfaith commented May 22, 2021

angular-automatic-lock-bot bot commented Jun 22, 2021

z-index values in .css preceded by a # character #20870

z-index values in .css preceded by a # character #20870

Comments

jlquijada commented May 20, 2021 • edited

Is this a regression?

Description

Minimal Reproduction

JoostK commented May 20, 2021

alan-agius4 commented May 20, 2021 • edited

kemsky commented May 20, 2021

jlquijada commented May 20, 2021 • edited

alan-agius4 commented May 20, 2021

michaelfaith commented May 20, 2021

skeditAdmin commented May 20, 2021

jlquijada commented May 20, 2021

michaelfaith commented May 20, 2021

mikkeldamm commented May 20, 2021

dogandipcin commented May 20, 2021 • edited

alan-agius4 commented May 21, 2021

igorosabel commented May 21, 2021

michaelfaith commented May 22, 2021

michaelfaith commented May 22, 2021

angular-automatic-lock-bot bot commented Jun 22, 2021

jlquijada commented May 20, 2021 •

edited

alan-agius4 commented May 20, 2021 •

edited

jlquijada commented May 20, 2021 •

edited

dogandipcin commented May 20, 2021 •

edited