Feature Request: Exporting values.

[AndrewLeedham]

It would be nice to reference @value variables in JavaScript similar to how CSS Modules handles this.

This would primarily be useful when setting default SVG colours for a React Icon system based on stored CSS colour values, as all the colours would be defined once in the CSS reducing duplicated code.

[tivac]

This seems totally reasonable to me & I have a confession: I assumed that was already happening for some reason 😞

modular-css/packages/core/processor.js

Line 134 in e75c7d6

file.exports = message(result, "classes");

Would need to be changed to:

file.exports = Object.assign(
    Object.create(null),
    message(result, "values"),
    message(result, "classes")
);

⚠️ Any @values that happen to have the same name as a class would be stomped (in order to preserve back-compat I think classes have to take priority over @values). ⚠️

Thoughts?

[AndrewLeedham]

I agree classes should definitely take priority. However would it be possible to "namespace" the variables, and add them to a names object so the following would occur:

@value main: #FF00FF;

.main{
    background: main;
}

Would export:

{
    "main": "j21b4ih__main",
    "values": {
        "main": "#FF00FF"
    }
}

[tivac]

I agree that's a nicer way to avoid collisions, but it's probably better to match CSS Modules in this case. I haven't tested it but based on the documentation it seems like their approach is also prone to collisions.

I should get CSSM set back up to test that assumption, I wonder if it's less broken on Windows yet...

[AndrewLeedham]

I had a dig around your codebase. I managed to get values exporting correctly, however those stored in the values attribute from post-css messages seem to be coming from values that are imported with import * from ./example.css not the actual value definitions themselves. So I used file.values instead which seemed to store defined values in the same structure.

I'm not particularly familiar with either post-css or your codebase, so there may be some unforeseen issues here, but I thought I'd get it working locally so I can start implementing the syntax in my current project and submit a PR in case I was on to something.