Babel Macro?

[martdavidson]

Hey, we're using create-react-app 2 which supports babel plugins without ejecting, using https://github.com/kentcdodds/babel-plugin-macros

Is this library compatible? I might look into creating a macro if not. Thanks!

[nvanselow]

We haven't created a macro yet, but it is something I looked at. If you'd like to do that, it would be an awesome addition. I'm not very familiar with the constraints on macros so I can't say with certainty everything we've done in this plugin will work.

[martdavidson]

Hey, thanks for the response. I ended up rewiring a bit to continue to use CRA and also add this as a regular babel plugin, so I won't be working on the macro. But thanks for the great plugin!

[nvanselow]

I'm glad you are all set. I'm going to leave the issue open because wrapping this in a macro is definitely something we should get to.

[nvanselow]

I have started to investigate a macro, but it isn't as straight forward as I hoped, particularly with how it might integrate with the existing styled-component macro. It probably won't make it into the final version 1 of this plugin.

[NoPhaseNoKill]

@martdavidson how did you get around this issue? Currently I'm using create-react-app, and don't want to eject. My .babelrc file contains the following:

{ "plugins": [ [ "@quickbaseoss/babel-plugin-styled-components-css-namespace", {"cssNamespace": "&&&"} ], "babel-plugin-styled-components" ] }

And unfortunately the specificity isn't being passed through. My use case is that I'm wanting to use semantic-ui-react components with default styling, and then override them styled-components. Specificity has become an issue when trying to do this, and I'm currently looking for a workaround. @nvanselow do you have any ideas?

[NoPhaseNoKill]

For anyone that stumbles across this issue, I have fixed it with the following workaround:

Majority of these steps can be found through an article I found (but I've listed below steps also): https://medium.com/manato/introduce-babel-new-plugins-to-create-react-app-ea55f56c3811

1) Installed react-app-rewired and customize-cra as dev dependencies (yarn add -D react-app-rewired customize-cra) 2) Added 'config-overrides.js' file to base directory 3) Added the following code to the config-overrides.js file

/* config-overrides.js */ const { useBabelRc, override, useEslintRc } = require("customize-cra") module.exports = override( useBabelRc(), useEslintRc() )

4) Add react-app-rewired prefix to all of your scripts. e.g. /* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" }

5) Make sure .babelrc has correct plug-ins (please note: if using 'babel-plugin-styled-components ', this needs to come AFTER '/babel-plugin-styled-components-css-namespace' /* .babelrc */ { "plugins": [ [ "@quickbaseoss/babel-plugin-styled-components-css-namespace", {"cssNamespace": "&&&"} ], "babel-plugin-styled-components" ] }

edit: formatting