Confused about importFrom and the expected output

[morganfeeney]

Hi Jonathan, I'm trying to work out what I should expect the output CSS to look like once it has received some more CSS via importFrom, and been processed.
I created a reduced test case which you can see here.

This is what I am expecting when I use importFrom: I import the contents of this file with some custom properties assigned to :root, e.g.:

:root {
  --test: green;
}

When I reference the imported custom properties like I do in this file, e.g.

h2 {
  color: var(--test);
}

I expect the resulting CSS to also include the rules that assign the custom properties to :root, e.g.

:root {
  --test: green;
}

h2 {
  color: green;
  color: var(--test);
}

...but that doesn't happen, I do however get the transpiled value of green, which you can see in this file, and the preserved custom property, which seems useless (unless the values are supposed to be passed in to other custom properties?) because its value has not been set, e.g.

h2 {
  color: green;
  color: var(--test);
}

So... is this expected, if not, what am I doing wrong?

[morganfeeney]

After doing some further searching it looks as though what I expect to happen, will not. It looks like I need to use exportTo to get the imported custom properties into :root.

[jonathantneal]

Yes, you need to use exportTo if you also want to export your CSS Custom Properties. This is done to keep things in alignment with what would be expected in modern browsers supporting Custom Properties.

[morganfeeney]

Thanks.

By the way, in the documentation where you provide a code sample of how to use postcssPresetEnv in a gruntfile I'm not sure whether use actually does anything, I had to use processors, e.g.: see this line