Global variables not being complied in dist

[nicolemors]

I am pretty sure this is an issue with postcss-cssnext... but I can't figure it out. I even tried their glitter chat.

I am using Drizzle for a project and variables just stopped working, I also downloaded a fresh instance of Drizzle and I had the same issue 😑 :

When I comment out @use postcss-cssnext; its business as usual, but no cssnext goodness 😑 :

[erikjung]

I am using Drizzle for a project and variables just stopped working

@nicolemors Can you expand on that a bit? PostCSS uses this plugin to handle custom properties: https://github.com/postcss/postcss-custom-properties

The expected output would not have your :root definitions in it (unless you configured the plugin using the preserve option). The main function of the plugin is to replace the property references with their corresponding values:

Input

:root {
  --myColor: red;
}

body {
  color: var(--myColor);
}

Output

body {
  color: red;
}

If you add color(--color-red) to your html selector, what shows up in the output?

This?

html {
  color: #ff4136;
  line-height: 1.5;
}

or this?

html {
  color: color(--color-red);
  line-height: 1.5;
}

[nicolemors]

Okay, I guess my real problem is that it's not watching/running when I make changes. The variables are actually converting, but I have to manually run gulp to see any changes I am making. PS: thanks for a speedy reply... on saturday

[nicolemors]

I figured this out! Closing this issue.

[tylersticka]

I figured this out! Closing this issue.

@nicolemors What was it, out of curiosity?

[nicolemors]

I ran updates on my machine, I ended up just using my werk machine which I had not updated yet... ooooh apple thanks for wasting my day.