Angular-cli: Prod build re-orders and alters scss styles

Created on 1 May 2018 · 9Comments · Source: angular/angular-cli

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.

devkibuild-angular

Source

amayer42

👍3

All 9 comments

Yes I'm having this issue also with my scss files... I have a mixin for animation that will get altered and produce incorrect css.

// mixins.scss
@mixin animation_name-dur-delay-dir-fill-itrCount-timingFx-plyState(
    $animationName: none, $duration: 1s, $delay: 0s, $direction: normal, $fill: both, $iterationCount: 1, $timingFunction: ease, $playState: running) {
animation-name: $animationName;
    animation-duration: $duration; 
    animation-delay: $delay;
    animation-direction: $direction;
    animation-fill-mode: $fill;
    animation-iteration-count: $iterationCount;
    animation-timing-function: $timingFunction;
    animation-play-state: $playState;
}

// file-2.scss
.class {
       @include animation_name-dur-delay-dir-fill-itrCount-timingFx-plyState(
        none, 1s, 0, normal, both, 1, ease, running);
}



md5-ead0a90385d3125dadb879c0e2b84119



// styles.scss
@import './mixins';
@import './file-2.scss';



md5-306b3ac99f04df4618a8287c1fecd5a2



ng serve --port 4200



md5-ead0a90385d3125dadb879c0e2b84119



// css output
.class {
    animation-name: none;
    animation-duration: 1s; 
    animation-delay: 0;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-play-state: running;
}



md5-e71e8eab006bb096cd6e1b8a08ef3296



ng build --prod



md5-ead0a90385d3125dadb879c0e2b84119



// outputs this.. which is very far off : /
.class {animation: 1s 0 both}



md5-9b5a63324ab4dc65c2c45e94f4732f51



ng build --prod --aot=false



md5-ead0a90385d3125dadb879c0e2b84119



// Output with AoT disabled brings desired behavior:
.class {
    animation-name: none;
    animation-duration: 1s; 
    animation-delay: 0;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-play-state: running;
}



md5-190af0d02e696478fed8f9062e7305a3



WARNING in ./src/styles/styles.scss
(Emitted value instead of an instance of Error) autoprefixer: /Users/Jonathan002/Documents/The Desktop Folder/summary-docs/src/styles/styles.scss:13380:3: Gradient has outdated direction syntax. New syntax is like `closest-side at 0 0` instead of `0 0, closest-side`.

Jonathan002 on 9 May 2018

Ok so I got around this by just downgrading to Angular CLI version 1.6.0 on both npm global and on the local project.

For Global:

npm i -g @angular/[email protected]

For Project:

npm i @angular/[email protected] --save-dev

It might yell at you though for not having @angular-devkit/core when you do ng build. For me I just installed it as a dev-dependency and I was able to create my dist build.

If it yells at you like in this related post here

npm i @angular-devkit/core --save-dev

Jonathan002 on 9 May 2018

Any news on this fix? Hoping to move to Angular 6 soon.

Jonathan002 on 4 Jul 2018

Still having this issue on 6.1.1

EDIT: same symptoms, ng serve runs fine, ng serve --prod --aot does not respect css rule precedence.

merken on 6 Sep 2018

👍1

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

jprobert on 20 Sep 2018

👍1

Still having this issue on 6.1.4
Any news on this issue?

Sepichat on 9 Nov 2018

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