Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Native CSS variable export #401

Closed
AndrewLeedham opened this issue Feb 17, 2018 · 6 comments

Comments

Projects
None yet
2 participants
@AndrewLeedham
Copy link
Contributor

commented Feb 17, 2018

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

This comment has been minimized.

Copy link
Owner

commented Feb 18, 2018

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2018

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

This comment has been minimized.

Copy link
Owner

commented Feb 18, 2018

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 added a commit that referenced this issue Feb 18, 2018

feat: add "during" hook & support export plugins
`after` should probably just become what `during` is, it's a breaking change but not terribly different in practice.

Plugins run as part of the `during` phase can add messages with a plugin name starting with `modular-css-export` and an `exports` key that will be merged into the file's exports.

Fixes #401 in a roundabout way by making it possible w/o a change to core.

This also makes the output module support non-array values because having to know that is just an awkward implementation detail that makes no sense for anyone but me.
@tivac

This comment has been minimized.

Copy link
Owner

commented Feb 18, 2018

@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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 21, 2018

Pulled it into my project, works as expected.

Thanks.

@tivac

This comment has been minimized.

Copy link
Owner

commented Feb 21, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.