[Build Prod] transition shorthand unit lost when Angular-CLI 6.2.x

[hsuanxyz]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 6.2.3
Node: 10.0.0
OS: darwin x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.3
@angular-devkit/build-angular     0.8.3
@angular-devkit/build-optimizer   0.8.3
@angular-devkit/build-webpack     0.8.3
@angular-devkit/core              0.8.3
@angular-devkit/schematics        0.8.3
@angular/cli                      6.2.3
@ngtools/webpack                  6.2.3
@schematics/angular               0.8.3
@schematics/update                0.8.3
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.20.2

Repro steps

Repro: https://github.com/HsuanXyz/issues-ng-cli-6.2.x-clean-css-

/* input this */
.class {
  transition: opacity .3s linear, height 0s ease .3s;
}

/* ng build --prod */
.class{transition:opacity .3s linear,height .3s}

The log given by the failure

Desired functionality

/* input this */
.class {
  transition: opacity .3s linear, height 0s ease .3s;
}

/* ng build --prod */
.class{transition: opacity .3s linear, height 0s ease .3s}

Mention any other details that might be useful

NG-ZORRO PR: NG-ZORRO/ng-zorro-antd#2163

clean-css issues: clean-css/clean-css#1050

Reproduction: https://github.com/HsuanXyz/issues-ng-cli-6.2.x-clean-css-

[filipesilva]

We can pin the cleancss version in #12441 for now, and wait for clean-css/clean-css#1050 to be fixed before updating.

[filipesilva]

I wasn't aware of it but clean-css is now looking for a new maintainer (clean-css/clean-css#1044) which usually means reduced support. We don't want to pin to an older version because that might resurface old bugs that have since been fixed.

Since you seem to have a workaround, already (not use the shorthand), we'll wait until this is fixed on clean-css. If it ends up not being fixed we might change to a different minifier within the CLI 7.x timeframe.

[mhartington]

Just to add to this, clean-css is also causing some issues with Ionic's own styles in an Angular app.

In this case, the dev builds without clean-css produces the css on the left. But when run through prod builds with optimizations enabled, the css selector for html end up getting merged together, breaking some platform specific styles we need.

Digging into the webpack plugin for clean-css, setting level to 0 prevents any of the styles from getting optimized, but still minifying the final output.

[alyssamichelle]

Heads up @hsuanxyz , you have a typo under Desired Functionality:

(Missing a t for the transition.)

[alan-agius4]

Pinning down clean-css to a previous version will reintroduce this issue #9902 (comment) which was fixed in 4.2.0

[clydin]

Please note also that you should be able to use special comments to make clean-css ignore a block of CSS:

/* clean-css ignore:start */
.class {
  transition: opacity .3s linear, height 0s ease .3s;
}
/* clean-css ignore:end */

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