Use babel-macros to get around CRA ejecting

[d-pollard]

I wonder if we can skirt around having to eject from create react app by using

https://github.com/kentcdodds/babel-plugin-macros

[matvp91]

This would surely work as an addition to the babel plugin, but we'd still have to figure out how the cache could be extracted to a static file, which is what the webpack plugin does. I'll give this some thought.

[d-pollard]

@matvp91 - https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/macro/index.js

Styled components macro

[matvp91]

Reading babel-macros and I bumped upon the following statement which confirms my gut feeling:

Explicit is often a better pattern than implicit because it requires others to understand how things are globally configured. This is in this spirit are babel-plugin-macros designed. However, some things do need to be implicit, and those kinds of babel plugins can't be turned into macros.

Replacing the stylesheet is only one part of the equation. For styled-components, this works well because it ships a bit of runtime code to add & update <style> tags at runtime. This is not how stylemug works, as it strips all CSS related code to a hashmap of class names, there's literally no CSS rules left in the JS bundle when Babel finished compiling.

The second part is extraction,babel-macros does not offer us a way to run code after babel has finished transpiling (hence the implicit behavior described above), and this is exactly what we need in order to extract the stylesheet from the cached atomic CSS rules.

Compilation in a macro is totally doable, extraction with a macro unfortunately isn't.

I was actually pretty excited about babel-macros but this is a bit of a bummer. Unless I'm missing something.

[d-pollard]

drat; I really dislike ejecting from CRA so I hope we can find a way around this; I'll keep looking.

[matvp91]

@d-pollard I'll have a play with this really soon, I have a few idea's that I'd like to verify whether they work or not. As long as I can't hook in babelPlugin.post by babel-plugin-macros, I guess it will somewhat feel dirty anyways.

I agree, it would be really cool to provide CRA support without ejecting.