babel-plugin-css-modules-react

Babel Plugin CSS Modules React

What's the Problem?

webpack css-loader itself has several disadvantages:

• You have to use camelCase CSS class names.
• Mixing CSS Modules and global CSS classes is cumbersome.
• Reference to an undefined CSS Module resolves to undefined without a warning.

Babel Plugin React CSS Modules make all work for you

Use classes as usual

import styles from './styles.css'

class Button extends React.Component {
  render() {
    return <button styleName='button size-m'>{ this.props.children }</button>
  }
}

Will be converted into:

import styles from './styles.css'

class Button extends React.Component {
  render() {
    return <button className={ styles['button'] + styles['size-m'] }>{ this.props.children }</button>
  }
}

Easy use global CSS

import styles from './styles.css'

const Button = ({ children }) => (
  <button styleName='local' className='global'>{ children }</button>
)

Get warnings when you are mistaken

import styles from './styles.css'

const Button = ({ children }) => (
  <button styleName='erroneous-class'>{ children }</button> // Warning: Class .erroneous-class is not specified in your css file
)

Requirements

You must keep your classes map inside styles variable

Future plans

Load styles with decorator syntax

@modulize('./styles.css')
class Button extends React.Component {
  render() {
    return <button styleName='button'>{ this.props.children }</button>
  }
}