Angular-cli: @keyframes causes an ERROR in Cannot read property 'type' of undefined

[aserputko]

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler or @angular-devkit/build-angular

Is this a regression?

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

Description

Command ng build --prod stopped working when angular was updated from v8.2 to v9.0.

🔬 Minimal Reproduction

StackBlitz

Steps to reproduce the issue:

1. Create a new app (angular version 9.0 or 10.0): ng new myapp --style=scss
2. Open app.component.scss and follow styles:

// app.component.scss
@keyframes rotate {
    from {
        transform: rotate3d(0);
    }
    to {
        transform: rotate3d(0, 0, 10, 5deg);
    }
}

1. Execute ng build --prod

🔥 Exception or Error

ERROR in Cannot read property 'type' of undefined

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.8
Node: 14.13.0
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?
Please add an error trace to save time for debugging.

[geromegrignon]

I followed the steps to reproduce it and used Intellij IDE for the project (Angular 10).
I was able to reproduce the error but noticed the IDE detected an error about rotate3D(0) :

Except for the first example on the MDN docs, i can't find any example/info about rotate(number) (ie with a single parameter). Even the MDN docs describe the syntax as rotate3d(x, y, z, a).
Changing it fixed the error with ng build --prod.

[aserputko]

@geromegrignon good catch! It would be nice if ng build errors show these details instead of silent ERROR in Cannot read property 'type' of undefined

[JoostK]

I suspect this is a bug in cssnano, which is used in Angular CLI's prod mode to minify CSS. The Angular compiler itself doesn't parse CSS to this extent.

I'll leave this issue open in this repo for now; it might be moved to the CLI repo upon further investigation.

[JoostK]

Confirmed as a bug in postcss-reduce-transforms (cssnano) which doesn't account for missing arguments.

I'll be moving this to the CLI repo, but I don't think it's actionable from the Angular side.