css-zero icon indicating copy to clipboard operation
css-zero copied to clipboard

Export babel

Open gingur opened this issue 6 years ago • 1 comments

I haven't used your lib yet, but came across it looking for a zero runtime atomic css-in-js solution (similar to the one facebook just demoed @ React Conf, but have not released yet). Going to try it out next hackathon. In the meantime, here's just a quick PR to export babel so it can be simply added as css-zero/babel instead of css-zero/src/babel. I like the macro support, however I've never used it and would rather add the support via a generic .babelrc setup.

Cheers!

gingur avatar Nov 25 '19 19:11 gingur

@gingur Hey Troy, thanks for contributing!

I'm really glad to see you're interested in giving the lib a shot in your hackathon - let me know what you think!

One advantage of using the macro today is that unlike the underlying babel plugin, the macro already includes the capability to write a standalone css file per module and will include this file as an import for your module. If you're using create-react-app, this is all you will need to get up and running.

By contrast, the babel plugin (which is based on linaria's implementation), processes the files to extract the css and rewrite the usage (making it have no runtime dependency), but currently the collected CSS is not written anywhere. The intention of this design is to allow the decision about how to bundle the css to be controlled by the bundler tooling (likely either webpack or rollup).

I'm open to making the babel plugin optionally support writing extracted css files and optionally including an import for the css (to be used in conjunction with CSS-modules), but it's not something I've had a opportunity to implement yet..

CraigCav avatar Nov 26 '19 18:11 CraigCav