var computed as undefined

[tomkel]

I have a main.css that looks like

@import './variables.css'
@import './other.css'

variables.css

:root {
  --some-var: 0;
}

other.css

.select {
  width: var(--some-var);
}

And the output looks like

.select {
  width: undefined;
}

[MadLittleMods]

@tomkel Please post your full PostCSS setup and plugin order.

You probably need to run postcss-import before postcss-css-variables.

[tomkel]

OK, so I narrowed down the bug a little more. It's not really due to @import, but may be a design decision of this library. The bug happens when a rule has a var statement that is not connected to the var definition in any way. like so:

.selector1 {
  --my-var: 0;
}

.selector2 {
  height: var(--my-var);
}

In this case, the var statement is computed as undefined.

[MadLittleMods]

@tomkel That output is as expected. postcss-css-variables has no knowledge of the DOM and only statically compiles out selectors that match.

[cmnstmntmn]

@MadLittleMods how can this be solved?

@tomkel i'm having the same issue using parcel bundler; how did you solve it?

[MadLittleMods]

@cmnstmntmn There is no solution given the example here. The plugin is behaving as expected.

If you want the variable to flow, you need to be explicit with the relationship. Please create a separate issue if you still have questions. The following example

Input

.selector1 {
  --my-var: 0;
}

.selector1 .selector2 {
  height: var(--my-var);
}

Output

.selector1 .selector2 {
  height: 0;
}