Calculations in media query declarations no longer work

[JamesDonnelly]

Today I upgraded a project of mine from LESS 3.0.4 to 3.5.0.

In LESS 3.0.4, the following was perfectly valid:

@media screen and (min-width: (@some-var + 1)) {
  ...
}

However in 3.5.0, the @some-var + 1 part means this entire media query gets excluded from the compiled CSS as if it never existed. No errors are given in the build console (compiling using Webpack and less-loader (neither of which were also updated today)).

I've worked around it for now by performing the calculation on a separate @some-var-plus-one variable:

@some-var-plus-one: @some-var + 1;

@media screen and (min-width: @some-var-plus-one) {
  ...
}

I'm not sure if this is a bug or if this is something intentional.

[matthew-dean]

However in 3.5.0, the @some-var + 1 part means this entire media query gets excluded from the compiled CSS as if it never existed.

I can't replicate that. What I get is:

// input
@media screen and (min-width: (@some-var + 1)) {
  .selector {
    foo: bar;
  }
}
// output
@media screen and (min-width: (60px + 1)) {
  .selector {
    foo: bar;
  }
}

Like calc() in 3.0, inline expressions are not math'd in media queries in 3.5, which avoids min-aspect-ratio: 16/9 bugs, but yes you can evaluate the calculation in a separate line.

[matthew-dean]

@JamesDonnelly I've updated the changelog to reflect that this is an intentional change for at-rules to fix other issues regarded inline math for at-rules.

[matthew-dean]

@JamesDonnelly FYI I've reverted this change in operations for @media, so it'll work as it did before.

[matthew-dean]

Related to #1880