feat: Native CSS variable export

[AndrewLeedham]

Would be nice to have the ability for native CSS variables to be exported in the same way that @value values are; however, they should not be removed from the output CSS file.

CSS variables are scoped to a container, so I would imagine it would be easier to ignore this if they are imported elsewhere.

This may be more appropriate as a plugin for PostCSS that passes a message to modular-css, but could also work as an optional native feature. Any thoughts @tivac.

[tivac]

What's your use-case? I'm not against the idea but I feel like it's a little strange to be treating CSS vars like @values.

[AndrewLeedham]

It is a very specific use-case to be fair. I'm using CSS variables to define colours across my Electron/React app in both CSS and JS, the advantage with CSS variables is that I can change their value at runtime in CSS for changing themes.

[tivac]

I think instead of baking this into core it'd be more practical to investigate how it could be easier for custom postcss plugins to add items to the exports. It's technically very feasible and it makes any thing like this possible without requiring more work in the core.

[tivac]

@AndrewLeedham Check out the branch I just pushed, it supports a new lifecyle hook called during that will let you add PostCSS plugins that can provide exports for a file.

during : [ (css, result) => {
    result.messages.push({
        plugin  : "modular-css-exporter",
        exports : {
            a : true,
            b : false
        }
    });
} ]

[AndrewLeedham]

Pulled it into my project, works as expected.

Thanks.

[tivac]

Great, I'll try to cut an 8.1.0 release with that tonight.