3.0.0 CSS Variable hyphen compiling change

[drwpow]

Take 2 CSS variables:

:root {
  --space: 32px;
  --space-075: 24px;
}

In both 2.9.x and 3.0.0, the variables compile correctly when used by themselves. However, something interesting happens when you try and invert those values:

2.9.x

margin-left: -var(--space); // -32px
margin-bottom: -var(--space-075); // -24px

3.0.0

margin-left: -var(--space); // -32px
margin-bottom: -var(--space-075); // 24px !!!

I rolled back my version to double-test, and confirmed it’s compiling differently with 3.0.0. Am I missing something? Are hyphens not part of the variable spec? Is it bad practice to prepend/append CSS variables?

[MoOx]

Please provide correct examples.
I guess you are providing this

:root {
  --space: 32px;
  --space-075: 24px;
}

body {
  margin-left: -var(--space);
  margin-bottom: -var(--space-075);
}

and expect this

body {
  margin-left: -32px;
  margin-bottom: -24px;
}

If that's the case (cause I don't understand the -075 purpose otherwise), it's working this way on the playground http://cssnext.io/playground/

[drwpow]

@MoOx I did. Good catch. The playground is using 3.0.0?

[MoOx]

Playground is using the version you can see below the logo

So yes :)

[drwpow]

Cool. I’m consistently getting the compiled results I stated, and the version bump affects it. But I am running it through vue-loader. Again, weirdly, changing the cssnext version in package.json is the deciding factor between it compiling correctly or not, but it might be some obscure interaction with vue-loader that’s the issue. I’ll investigate more and open another issue if it’s applicable to this repo.

Thanks for your time! 🍻

[tranan89]

@DangoDev Did you find what it was? We are having the same issue after upgrading cssnext and webpack to 3. We don't use vue

[Pelsin]

@MoOx @DangoDev I am having the same issue, although the problem arise when using var in combination with calc. Manage to reproduce in playground.

:root {
 --marginLeft: calc(12 / 10)px;
 --marginRight: 10px;
}

div {
  margin-left: -var(--marginLeft);
  margin-right: -var(--marginRight);
}

Result:

div {
  margin-left: 1.2px;
  margin-right: -10px;
}

I guess this falls on postcss-calc plugin.

[MoOx]

calc(12 / 10)px is not valid in the first place

[Pelsin]

Alright! That is good to know, will change in my implementation 👍

Although i'm not sure how that affects the hyphen.
As this produces same result in playground:

:root {
 --marginLeft: calc(2px * 2);
}

div {
  margin-left: -var(--marginLeft);
}

Even unit-less produces without the hyphen.

[MoOx]

Indeed that's a postcss-calc bug. I opened this MoOx/reduce-css-calc#30

[drwpow]

Did you find what it was?

@tranan89 No; I’ve just been dancing around the issue introduced in 3.0.0. It’s still a problem for me. But for some reason I had trouble recreating the bug in the playground, so I was thinking it was something bizarre happening in the stack somewhere.

I’m glad others were able to reproduce it! I just haven’t had the time to isolate the bug and follow up.