Create-react-app: styled-jsx support

[julien-f]

It seems that currently, even if imported from JS, the CSS classes are global, which, while easy to grasp, is not very fit for a component-oriented workflow. (It still is good for application wide styling, like color themes, etc.)

It think styled-jsx is a nice answer to this problem, it seems easy to set up (Babel integration), and provide better code-locality than CSS modules.

What's your opinion on this?

[gaearon]

I would like to see stability and wider adoption first.

[julien-f]

Sure, it's pretty new, but I've got the feeling it will take on ;)

[gaearon]

We'll see! It's not something I would recommend to React beginners, at least not yet. I also want to add at least some sort of component hot reloading before adding "special" support for "CSS in JS" libraries since editing styles in JS is a bit frustrating when you have to reload all the time.

[julien-f]

Makes sense.

Feel free to close this issue if the time is not right yet :)

[gaearon]

Yea. I'd like to hear about a couple of major projects using it in production first.

[corysimmons]

With Next.js 2's recent release, they're defaulting to styled-jsx. Might be worth re-opening this.

[julien-f]

After consideration, I think I prefer styled-components because it does not need special setup on the build side.

But I really think create-react-app should provide a way to add custom Babel transforms!

[gaearon]

Someday. 😄

[corysimmons]

I haven't dug into it, but react-scripts is just an obfuscation of Webpack right? I don't understand why it overpowers .babelrc or package.json's "babel" object. Couldn't we add a check for custom Babel configs and use, or just append, those?

[gaearon]

@corysimmons No, this is not currently planned for the next releases. You can find an explanation if you search for "custom babel config" in issues.

[corysimmons]

Read some. Read the reasons against it.

Happen to know if anyone forked CRA for this purpose though? CRA does save a lot of config time and I'm sure a lot of people wouldn't mind wrestling with babel bugs anyway.

[gaearon]

There's https://github.com/timarney/react-app-rewired by @timarney which might allow this (I'm not sure).

[timarney]

@corysimmons not sure what your trying to do but sounds like it will be possible . If your comfortable 'wrestling' the webpack config a bit.

react-app-rewired exposes the config i.e. @pasviegas setup a relay 'rewire'

const babelLoader = function (conf) {
  return conf.loader === 'babel';
};

function rewireRelay(config, env) {
  const babelrc = config.module.loaders.find(babelLoader).query;
  babelrc.plugins = ['react-relay'].concat(babelrc.plugins || []);

  return config;
}

module.exports = rewireRelay;

Note: there's webpack2 branch setup for the 0.10.0 release - https://github.com/timarney/react-app-rewired/tree/webpack2

Can discuss further on that repo if you like.

[corysimmons]

Thanks, looks perfect. I'll definitely keep my eye on it.

[pasviegas]

Yep, is definitely possible to create a rewire using react-app-rewired to add that. ;)

[khankuan]

@corysimmons Would recommend not using styled-jsx. https://github.com/zeit/styled-jsx/issues/172

[jjmasse]

After consideration, I think I prefer styled-components because it does not need special setup on the build side.

But I really think create-react-app should provide a way to add custom Babel transforms!

Wouldn't build time resolution of style be a hat tip toward a more performant application for client builds? Although native css modules, in an ideal sense, should be the best performance wise. IMHO it seems somewhat wasteful to have JS running along the rest of the application to resolve the appropriate CSS.