Build -prod Mangles CSS

[dustincleveland]

Running ng build -prod runs minification on CSS, which removes units from rules with values such as 0px or 0%. This is not always desirable behavior, as browsers will handle these unit-less values differently, in some cases breaking the intended layout of the page.

Versions

Angular CLI: 1.5.4
Node: 7.9.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.4
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

Repro steps

• Create a new project with CLI.
• Add a div with class of foo to a component.
• In the associated component CSS, add a style of width: 0%; to the foo class.
• Run ng serve.
• Using Chrome Debugger Tools, inspect the div element's style. Notice that it shows width: 0% as it was defined in code.
• Now, run ng serve --prod.
• Using Chrome Debugger Tools, again inspect the div element's style. Notice that it now shows width: 0.

Observed behavior

The styles output from the production build do not include units on CSS rules with values of 0.

Desired behavior

The styles output from the production build should include the specified unit on CSS rules with values of 0. Ideally, this should be configurable as not everyone will want this as default behavior.

Justification

I understand that in an ideal world we would prefer to use standard, well-formed CSS to style our applications. However, in practice we often run into situations where we have to work around various browser implementations to provide cross browser support. Sometimes this means implementing some very specific CSS hacks.

In most cases it is desirable to drop the units from 0 value rules for a more compressed file, but sometimes we need to force the browser into reading these values as certain units, specifically when using flex rules.

https://stackoverflow.com/questions/47040371/why-flex-container-flex-1-0-0px-collapses-on-chrome

https://github.com/philipwalton/flexbugs#flexbug-4

[dgp1130]

This particular issue still appears on IE 11, which we will be stuck supporting for some time, so as much as I would like to, I don't think we can pull the "it's a browser bug" card.

It seems there is a PostCSS plugin which can fix some flex box issues (though not quite all of them it seems): https://github.com/luisrudge/postcss-flexbugs-fixes.

We should look into integrating that plugin into the pipeline. We'll need to go through proper vetting so more research needs to be done, but it seems promising so far. Needs more investigation to validate the plugin.

[alan-agius4]

Closing since IE 11 support is deprecated. While we still support it, we shouldn't add additional features and tools to increase IE 11 support.

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