preserve: false dosen't work

[pldg]

CSS variable are preserved even if preserve: false. This happen only for variables imported from another folder. A minimal test repository (with two temporary solutions): test-postcss-custom-properties

[jonathantneal]

The issue is that you are transforming the file without access to the variable, so it’s like you never imported another file at all. Unresolved custom properties are always preserved.

[pldg]

I'm not sure I understand.

I've two variables in style.css

• --text-color: red is from src/style.css itself
• --bg-color: lightblue is imported from another file inside another folder: src/partials/var.css.

Both variables are used inside body selector. For what I understand preserve: false should transform both variables to their original value but as you can see in the bundle dist/main.css only --text-color is transformed to red.

Why --bg-color is not transformed to lightblue?

Why using postcss-import solve the problem?

[jonathantneal]

--bg-color is imported from another file inside another folder: partials/var.css.

It is never imported at the time postcss runs. I don’t know why. That is why the property using var() is neither transformed or removed.

[pldg]

It's strange. Do you think it's a postcss-loader's bug?

[jonathantneal]

Yes, or some kind of Webpack plugin ordering issue.