postcss-css-variables: variable --color-text-5 is undefined and used without a fallback

[cjy816618]

"postcss-css-variables": "^0.17.0",

Input:

:root {
  --color-text-5: red;
}
div {
  color: var(--color-text-5);
}

Output:

div {
  color: undefined;
}

Expected output:

div {
  color: red;
}

[MadLittleMods]

@cjy816618 Please provide your CSS input, what this plugin outputs, and what you expected the output to look like

Input:

...

Output:

...

Expected output:

...

[cjy816618]

css： plgin: package: output： I hope to be compatible with ie, I used this plugin, but it doesn't work in ie11

[MadLittleMods]

@cjy816618 Please update the issue description with a copy-pastable text version of a minimal reproduction case; input, output, expected output.

Ideally reproducible in the code playground: https://madlittlemods.github.io/postcss-css-variables/playground/

[cjy816618]

input:

:root{
  --color-text-5: red;
}
div{
  color: var(--color-text-5);
}

output:

div{
  color: undefined;
}

expected output:

div{
  color: red;
}

[MadLittleMods]

I can't reproduce in the code playground,

Input:

:root {
  --color-text-5: red;
}
div {
  color: var(--color-text-5);
}

Output looks as your expected result:

div {
  color: red;
}

[cjy816618]

Is it caused by scss? I wrote it through scss

[MadLittleMods]

It sounds like you haven't isolated the problem. You need to get the exact input going into the postcss-css-variables plugin. Comment out the postcss-css-variables plugin and all plugins after it (leave the plugins before), make a build and show the output (text form please).

[cjy816618]

This problem has been solved, and this method can be used