How to get styled-jsx (with plugins) working with CRA

notes.md

1. Make a new CRA project like normal
2. yarn add babel-cli https://github.com/hamlim/styled-jsx-with-plugins.git https://github.com/hamlim/styled-jsx-sass-plugin.git

• the last two repos are (in order) a fork of Styled-JSX with plugin support merged, and a simple sass plugin

3. modify your package.json to add the following:

 "scripts": {
+    "build-styled-jsx": "babel src --out-dir src", // optionally change the input dir from `src` to anything else to keep the input clean
     "start": "react-scripts start",
 ...
 },
+  "babel": {
+    "plugins": [
+	[
+	  "styled-jsx/babel",
+	  {
+	    "plugins": [
+	      "styled-jsx-sass-plugin"
+	    ]
+	  }
+	]
+     ]
+   }

• This adds a command to compile the styled-jsx out to something CRA can use

4. Run yarn run build-styled-jsx
5. Run yarn start

The New way.md

https://github.com/timarney/react-app-rewired

// config-overrides.js


const babelLoader = function(conf) {
  if (!conf.loader) return false;
  return conf.loader.indexOf('babel-loader') > -1;
};

// Emotion
function rewireEmotion(config, env) {
  const babelrc = config.module.rules.find(babelLoader).options;
  babelrc.plugins = ['emotion/babel'].concat(babelrc.plugins || []);

  return config;
}
function rewireStyledJSX(config, env) {
  const babelrc = config.module.rules.find(babelLoader).options;
  babelrc.plugins = ['styled-jsx/babel'].concat(babelrc.plugins || []);

  return config;
}

module.exports = function override(config, env) {
  config = rewireEmotion(config, env);
  config = rewireStyledJSX(config, env);
  return config;
};

Just found out about this: https://github.com/timarney/react-app-rewired.

It might make this 10x easier than doing these manual compiles above.