RFC - babel-macros

Code modifiers are becoming popular in the javascript ecosystem, via babel-plugins (eg - many css-in-js libs, relay, etc). This issue is to open discussion on a generic system to include them in CRA apps, but still honouring the zero-config philosophy.

The proposal here is to have a constrained form of babel-plugins, disguised to appear like regular libraries. A short writeup on what it would look like here - https://github.com/threepointone/babel-macros/blob/master/README.md

• modifiers/‘macros’ would be isolated in files with .macros.js suffixes
• there would no real trace of them in the final bundle stripping imports of all *.macros.js
• considering they’re localised and used on demand, I expect them to have little effect on build performance, so can be enabled in both dev/prod
• because there’s no dependence on webpack, it should still work with other js tooling like jest, etc.

I’m looking for feedback on the same before I start writing code for it, as well as possible first implementations (maybe a simple css-in-js lib?)

If this doesn’t belong here, feel free to close the issue. Thanks!

[kentcdodds]

Ok, so, check this out:

unmaintained-react-scripts-babel-macros diff:

(this would be implemented as part of babel-preset-react-app if it becomes official)

App.js

npm test

npm start

So that’s pretty rock solid awesome… 😄

[mxstbr]

We’re pretty close to merging a babel-macro-mode for styled-components. (https://github.com/styled-components/styled-components/pull/1256; import styled from 'styled-components/macro')

Would be awesome to be able to use that in create-react-app ootb to get nicer class names and proper minification just like that!