Minify css ~"calc"

[mikerouxfr]

Installed product versions

• Visual Studio: Enterprise 2015
• This extension: 1.1.326

Description

When minified, 0 values of the css calc function parameters lost the unit. That makes the browser raises an invalid property value error (on transform).

Steps to recreate

1. Declare the following mixin :

   .move(@x; @y) {
   @move: ~"translate(calc(@{x} - 50%), calc(@{y} - 50%))";
   }

2. Call it anywhere :

   body {
   .move(10px, 0px);
   transform: @move;
   }

3. Inspect the element with your browser developers console. If you're in Debug mode and your site uses the main.css (unminified version), you won't have any issue. If you're in Release mode (or if you publish, or force usage of minified file) : -> You'll probably find out that the value of the transform property of the element is not valid (because on the calc function having a value without unit).

Current behavior

file	css property
main.css	transform: translate(calc(10px - 50%), calc(0px - 50%))
main.min.cs	transform: translate(calc(10px - 50%), calc(0 - 50%))

Expected behavior

file	css property
main.css	transform: translate(calc(10px - 50%), calc(0px - 50%))
main.min.cs	transform: translate(calc(10px - 50%), calc(0px - 50%)) or transform: translate(calc(10px - 50%), calc(- 50%))

[mikerouxfr]

I forgot to tell that i've tried to use the less unit function in the mixin and that doesn't fix the issue. That is why I think that the problem comes from the minifier.

Here is the workaround I've tried :

.move(@x; @y) {
    @_x: unit(@x, px);
    @_y: unit(@y, px);
    @move: ~"translate(calc(@{_x} - 50%), calc(@{_y} - 50%))";
}

[mikerouxfr]

For those who may need a workaround, I used the following mixin declarations :

.move(@x; @y) when (unit(@x) = 0) and (unit(@y) = 0) { @move: ~"translate(-50%, -50%)"; }
.move(@x; @y) when (unit(@x) = 0) { @move: ~"translate(-50%, calc(@{y} - 50%))"; }
.move(@x; @y) when (unit(@y) = 0) { @move: ~"translate(calc(@{x} - 50%), -50%)"; }
.move(@x; @y) when (default()) { @move: ~"translate(calc(@{x} - 50%), calc(@{y} - 50%))"; }

[jasonbogdanski]

We have just ran into this issue with our minified css files. Is there timeline for fixing this issue?