Prod build re-orders and alters scss styles

Versions

Angular CLI: 1.7.4 (e)
Node: 8.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack-dev-server: 2.11.2
webpack: 3.11.0

Repro steps

• Step 1 ng new test-proj-name --minimal true --style scss
• Step 2 Paste following into styles.scss

$border-size: 1px;
$size: 0.125rem;
$color: #cccccc;

@mixin border-standard {
  border-width: $border-size;
  border-style: solid;
  border-radius: $size;
  border-color: $color;
}

th {
  @include border-standard;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

• Step 3 ng build -ec
• Step 4 View the following css output in dist/styles.bundle.css:

th {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.125rem;
  border-color: #cccccc;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0; }

• Step 5 ng build -prod
• Step 6 View the following css output in dist/styles.GUID.bundle.css:

th{border-radius:0;border-top:0;border-right:0;border-left:0;border:1px solid #ccc}

Observed behavior

The border-width, border-style, and border-color have been combined into the single border shorthand property and moved to the end of the th selector when using the -prod flag. This negates the fact that border-left, border-right, and border-top properties were all set to 0 in the original scss to override the border. It is now these settings that are being overwritten.

Desired behavior

The order of the output css should not be altered from its original order in the scss. Everything would be fine in this specific use case if the border property had been added at the beginning of the selector, but I haven’t thought of other potential flaws here.

[alan-agius4]

This is expected since during production builds by default CSS gets minified to generate the smallest possible bundle and options get combined together using cleancss

If you have some code which is not side effect free you need to disable the optimisations for that piece of code using /* clean-css ignore:start */ and /* clean-css ignore:end */ comments

See https://github.com/jakubpawlowicz/clean-css#whats-new-in-version-42

[jprobert]

Is there any fix available related to this issue? Can’t get my css to work with ng build --prod --aot