title: CSS Module composition
body: <p>I've got a question about composition I'm hoping someone can help me with.
  I'm using <code>react-css-modules</code> with Sass, and I'd like to know the best way to compose things for one of our basic bottom-level components.</p>
  
  <p>Here's our component:</p>
  
  <pre><code>import React, {PropTypes} from 'react'
  import cssModules from 'react-css-modules'
  import styles from './style.sass'
  
  const Button = ({children = 'Submit', ...props}) =&gt; {
    const align = props.align ? `-${props.align}` : ''
    const type = props.type ? `-${props.type}` : ''
    const styleName = `button${type}${align}`
  
    return (
      &lt;button onClick={props.onClick} {...props} styleName={styleName}&gt;
        {children}
      &lt;/button&gt;
    )
  }
  
  Button.propTypes = {
    align: PropTypes.string,
    onClick: PropTypes.func.isRequired,
    type: PropTypes.string,
  }
  
  export default cssModules(Button, styles)
  </code></pre>
  
  <p>And here's the stylesheet so far:</p>
  
  <pre><code>@import "~components/styles/variables"
  
  .button
    color: $button-default
    background-color: transparent
    font-family: $font-family
    font-size: $default-font-size
    font-weight: $font-regular
    line-height: $default-button-height
    margin: 0 $pad 0 0
    outline: none
    padding: 0 $pad*2
  
  .left
    float: left
  
  .right
    float: right
  
  .primary
    color: $background-interaction
    background-color: $button-default
  
  .button-left
    composes: button, left
  
  .button-right
    composes: button, right
  
  .button-primary
    composes: button, primary
  
  .button-primary-left
    composes: button, primary, left
  
  .button-primary-right
    composes: button, primary, right
  </code></pre>
  
  <p>Right now, it's pretty painful. Every configurable prop we add exponentially increases the number of composed classes we have to provide. We can currently configure <code>align</code> and <code>type</code>, and since both can be null we have 6 possible combinations, so 5 composed classes to create in addition to the base <code>.button</code>.
  If we added just one more prop, say just a boolean <code>bold</code>, we now have to add a whole bunch of new composed class names: <code>.button-bold, .button-left-bold, .button-right-bold, .button-primary-bold, .button-primary-left-bold, .button-primary-right-bold</code>.</p>
  
  <p>I know with <code>react-css-modules</code> we can just enable the <code>allowMultiple</code> setting to allow us to specify multiple modules to apply to an element, but my understanding is that is against best practices. I feel like we <strong>have</strong> to be missing something here. What are we doing wrong?</p>