This repository was archived by the owner on Aug 7, 2021. It is now read-only.
This repository was archived by the owner on Aug 7, 2021. It is now read-only.
Webpack uglifier corrupts CSS rules #377
Closed
Description
$ tns create cssBundlerTest --tsc
$ cd cssBundlerTest/
$ npm install --save-dev [email protected]
$ 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:
- the second parameter of
translategot dropped, which causes transformation to be applied on both axes; - the
colorwas converted tohslavalue, 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)