danny-andrews

const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;

const AppBody = ({ number }) => <div>Your number is: {number}!</div>;

const App = () => <LuckyNumber component={AppBody} />;

danny-andrews

Disclaimer: This article is in no way meant to belittle the react-css-modules project, or its author. Gajus is a smart dude and does a lot of great work for free for the JavaScript community to enjoy! ❤️ This is merely an evaluation of this particular library.

As with many popular libraries, I'm sure "react-css-modules" had a valid use-case at the time it was created, but at the present, it's drawbacks far outweigh its benefits. This article is meant to be a warning against picking it up without thinking about what you get from it.

tl;dr: Use "css-loader" over "react-css-modules"/"babel-plugin-react-css-modules" because the latter relies on side-effects, adds cognitive overhead (too much 🦄 ), causes React errors in your tests, requires complex webpack config, requires an additional dependency, is slower than css-loader, and doesn’t work with webpack/babel import aliases.

"PROs"*

**Throws error when trying to use an undefined class name.

danny-andrews

// With react-css-modules
import './styles.css';

<div className="global-class" styleName="local-class">Hi</div>;

// With css-loader
import styles from './styles.css';

<div className=`${styles.localClass} global-class`>Hi</div>;

danny-andrews

import styles from './styles.css';
import classnames from 'classnames';

<div className={classnames(styles.localClass, 'global-class')}>Hi</div>;

danny-andrews

// With css-loader
import styles from './styles.scss';

export default () => <div className={styles.myClass}>Hi</div>;

// With react-css-modules
import './styles.scss';

export default () => <div styleName="myClass">Hi</div>;

danny-andrews

{
  test: /\.(jsx?)$/,
  exclude: /node_modules/,
  use: [{
    loader: 'babel-loader',
    query: {
      plugins: [
        [
          'babel-plugin-react-css-modules',
          {

danny-andrews

const LuckyNumber = ({ render }) => render({ number: Math.random() });

const App = ({ message }) => (
  <LuckyNumber
    render={({number}) => <div>{message}: {number}!</div>}
  />
);

danny-andrews

const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;

const AppBody = ({number}) => <div>{message}: {number}!</div>;

// How do I get the message prop to AppBody? 🤔🤔🤔
const App = () => <LuckyNumber component={AppBody} />;

danny-andrews

const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;

// There's no general way to curry named parameters, so we have to do it
//   manually.
const AppBody = ({ message }) => ({ number }) => <div>{message}: {number}!</div>;

const App = ({ message }) => <LuckyNumber component={AppBody({ message })} />;

danny-andrews

const LuckyNumber = ({ component: Component, componentProps }) => <Component number={Math.random()} {...componentProps} />;

const AppBody = ({ message, number }) => <div>{message}: {number}!</div>;

const App = ({ message }) => <LuckyNumber componentProps={{ message }} component={AppBody} />;