Prod build re-orders and alters scss styles

[amayer42]

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.

[Jonathan002]

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);
}

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

For localhost it comes out just fine:

ng serve --port 4200

// 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;
}

When I use the prod flag though..

ng build --prod

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

I've noticed though that it doesn't appear this way when I disable AoT (since it's on by default with
--prod)

ng build --prod --aot=false

// 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;
}

Anyone know what version this started happening in the CLI? Might downgrade until this issue is resolved. It's too frightening to have this possibility happen to any of my mixins. Also may be related, but as I compile I'm also receiving this warning in the console:

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]

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/cli@1.6.0

For Project:

npm i @angular/cli@1.6.0 --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]

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

[merken]

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.

[jprobert]

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

[Sepichat]

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

[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

[alan-agius4]

Closing as per comment above.

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