CSS calc() breaks when using 3+ variable fallbacks on Ivy/Angular 9

[yutamago]

🐞 Bug report

Command

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.3

Description

var(--x, var(--y, var(--z, 0))) breaks inside of the calc-function.
Whereas var(--x, var(--y, 0)) still seems to work.

🔬 Minimal Reproduction

1. Put following class selector in any component stylesheet.

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;
  width: calc(var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--offset-lg, var(--offset-md, var(--offset-sm, 0))));
}

2. Build using ng build --aot --prod

🔥 Exception or Error

ERROR in Parse error on line 1: 
var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--...
---------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

🌍 Your Environment

Angular CLI: 9.0.1
Node: 10.15.3
OS: win32 x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?
We're using SCSS for our stylesheets.

[yutamago]

Found a workaround: Put the operands of the calculation into their own variables before using calc()

Instead of

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;
  width: calc(var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--offset-lg, var(--offset-md, var(--offset-sm, 0))));
}

do this

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;

  --temp-calc1: var(--width-lg, var(--width-md, var(--width-sm, 0)));
  --temp-calc2: var(--offset-lg, var(--offset-md, var(--offset-sm, 0)));
  width: calc(var(--temp-calc1) + var(--temp-calc2));
}

[dgp1130]

Looks like a in the CSS optimizer we use (CSSNano). I'm able to reproduce it on their playground (error is in the JavaScript console).

Filed an issue for them to look at: cssnano/cssnano#880. Once it gets fixed there, Angular should receive the fix in our natural rollout process. There's nothing for us to do here, just in a holding pattern until it gets addressed upstream.

[angular-automatic-lock-bot]

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