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
z-index values in .css preceded by a # character #20870
Comments
What a coincidence... #20869 |
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} |
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:
|
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...
|
Please post your reproductions here: cssnano/cssnano#1115 since this is not actionable by us. |
We're experiencing this as well.
$white = #ffffff. I can't help but notice that in common in all of our examples. the #ffffff -> #fff |
I'm experiencing this as well.
|
#fff is a shorthand for #ffffff, so no problem, all browsers should know about this equivalency. but your |
Yeah, and the example after mine didn't have that. So just coincidental it seems. |
We had the same issue with our production build adding
This package uses an older version of the cssnano package |
We removed ~ character of the version number and temporarily fixed it.
|
This has been fixed upstream cssnano/cssnano#1122 |
So, how should I update to get the issue fixed? I tried |
@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. |
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. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
src/styles.scss
src/app/
src/app/app.component.scss
src/app/component1/
src/app/component1/component1.component.scss
This is what it would be expected as resulting .css (the result up to version 12.0.0):
This is what I get now after updating to version 12.0.1:
The text was updated successfully, but these errors were encountered: