Webpack uglifier corrupts CSS rules

[sserdyuk]

$ tns create cssBundlerTest --tsc
$ cd cssBundlerTest/
$ npm install --save-dev nativescript-dev-webpack@0.9.0 
$ echo 'button.btn {transform: translate(-50, 0); background-color: rgba(255, 255, 255, 0.4);}' >> app/app.css
$ tns build android --bundle --env.uglify
$ grep 'button.btn' platforms/android/app/src/main/assets/app/vendor.js

function(e,t,r){t=e.exports=r(/*! ../node_modules/css-loader/lib/css-base.js */92)(undefined);
t.i(r(/*! -!../node_modules/css-loader?url=false!nativescript-theme-core/css/core.light.css */157),"");
t.push([e.i,".btn{font-size:18}button.btn{transform:translate(-50);background-color:hsla(0,0%,100%,.4)}",""])},
/*!*******************************************************************************************************!*\

Two problems here:

1. the second parameter of translate got dropped, which causes transformation to be applied on both axes;
2. the color was converted to hsla value, which errors at runtime as following:

$ tns run android --bundle --env.uglify
.....
JS: Error: Failed to apply property [background-color] with value [hsla(0,0%,100%,.4)] to Button(7)@file:///app/main-page.xml:29:9;. Error: Invalid color: hsla(0,0%,100%,.4)

[sserdyuk]

Technically, the short form of translate is valid, but it doesn't work properly in NS. I've opened a separate bug for it.

[sserdyuk]

Another case: background-position: right center; is converted to background-position:100%;, which is not rendered properly by NS.

Is there a way to turn off CSS "optimization" for now and just bundle it as is?

[NickIliev]

@sserdyuk thank you for reporting this issue! Confirming this one as a bug.

Steps to reproduce:

• create base application or use this demo
• apply CSS rules for translate , background-color with alpha or background-position like done here

Button.btn {
    transform: translate(-50, 0);
    background-color: rgba(255, 255, 255, 0.4);
}

Bundling the app without uglify tns run android --bundle) will produce the following result:

Bundling with uglify (tns run android --bundle --env.uglify) option will break the rules and produce the follwing result

Result: when bundling without uglify the rules are changed resulting the translate to move the element only on the X axis (expected) and to apply rgba with alpha (expected). Using uglify will move the object on Y axis as well (not expected) and will not apply the alpha opacity (not expected)

[sserdyuk]

Thank you @NickIliev. Do you want me to open separate tickets for other similar CSS related problems? Short form of background-position is also not working properly.

[NickIliev]

@sserdyuk you can post the corrupted CSS properties here if this happens only when using uglify