CSS Extracted/Optimized Incorrectly With Prod Flag

[mcavagnaro]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Unknown.

A new third-party library was added to the application. The new library is what is affected.

Description

A CSS stylesheet included in a third-party library is incorrectly rendered when the ng build --prod command is used.

🔬 Minimal Reproduction

Because this seems file dependent I have created a basic repo to reproduce this issue at:

https://github.com/mcavagnaro/dhtmlxgantt-css-issue

Two changes were made after using the ng new command:

1. The file src/third-party/dhtmlxgantt.css was added.
2. The angular.json file was added to include this new CSS file.

After downloading the app run ng build --prod and compare the CSS file in the dist folder to what is in the original file. The rule that is changed is .gantt_task_line.gantt_milestone .gantt_task_content.

🔥 Exception or Error

The border property is what changed. It starts off as border: inherit; and becomes border: 1px inherit inherit;. It looks like it's being merged with the border-width property, but I'm not sure where the second inherit is coming from.

Original:

.gantt_task_line.gantt_milestone .gantt_task_content {
    background: inherit;
    border: inherit;
    border-width: 1px;
    border-radius: inherit;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    transform: rotate(45deg)
}

Rendered:

.gantt_task_line.gantt_milestone .gantt_task_content {
    background: inherit;
    border: 1px inherit inherit;
    border-radius: inherit;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

🌍 Your Environment

Angular CLI: 7.0.7
Node: 8.11.4
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.0.7
@ngtools/webpack                  7.0.7
@schematics/angular               7.0.7
@schematics/update                0.10.7
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Anything else relevant?
Similar to #12408

[alan-agius4]

Hi, can you kindly try to update to the latest version of @angular-devkit/build-angular and @angular/cli and see if the problem persists?

[mcavagnaro]

I updated @angular-devkit/build-angular to 0.13.4 and @angular/cli to 7.3.4 and still see the same issue.

[alan-agius4]

Hi, I looked into this and it seems that the bug is in clean-css.

Please contact the author(s) of the clean-css project or file an issue on their issue tracker.

Thanks

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