css-calc is broken i 6.1.0 #7786
Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: 6.1.0
- Cross-platform modules: 6.1.0
- Android Runtime:
- iOS Runtime:
- Plugin(s):
Describe the bug
To Reproduce
- Create a new nativescript project: tns create --ng test
- Edit
src/app/item/items.component.ts - Add:
styles: [`
.page {
--my-factor: 0.5;
opacity: calc(1 * var(--my-factor));
}
`],4: Get this error:
JS: Error: Failed to evaluate css-calc for property [opacity] for expression [calc(1 * 0.5)] to GridLayout(8). TypeError: reduce_css_calc_1.default is not a function
JS: at Object._evaluateCssCalcExpression (file:///node_modules/tns-core-modules/ui/core/properties/properties.js:85:0)
JS: at evaluateCssExpressions (file:///node_modules/tns-core-modules/ui/styling/style-scope.js:40:0)
JS: at CssState.push.../node_modules/tns-core-modules/ui/styling/style-scope.js.CssState.setPropertyValues (file:///node_modules/tns-core-modules/ui/styling/style-scope.js:460:0)
JS: at file:///node_modules/tns-core-modules/ui/styling/style-scope.js:381:0
JS: at GridLayout.push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._batchUpdate (file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:279:0)
JS: at CssState.push.../node_modules/tns-core-modules/ui/styling/style-scope.js.CssState.updateDynamicState (file:///node_modules/tns-core-modules/ui/styling/style-scope.js:379:0)
JS: at CssState.push.../...
Expected behavior
No error logged and calc evaluated.
Sample project
Additional context
In tns-core- [email protected] the file node_modules/tns-core-modules/ui/core/properties/properties.js tries to use the non-existing function reduce_css_calc_1.default
This is the javascript code as it is
function _evaluateCssCalcExpression(value) {
if (typeof value !== "string") {
return value;
}
if (isCssCalcExpression(value)) {
return reduce_css_calc_1.default(value.replace(/([0-9]+(\.[0-9]+)?)dip\b/g, "$1"));
}
else {
return value;
}
}It should be
function _evaluateCssCalcExpression(value) {
if (typeof value !== "string") {
return value;
}
if (isCssCalcExpression(value)) {
return reduce_css_calc_1(value.replace(/([0-9]+(\.[0-9]+)?)dip\b/g, "$1"));
}
else {
return value;
}
}