A simple wrapper around Glamor and Classnames that gives you everything you need for simple styling.

css.js

import classnames from 'classnames'
import { css as glamor } from 'glamor'

/**
 * A thin wrapper around `glamor` to make it return class names.
 *
 * @param {Object} object
 * @return {String}
 */

function css(object) {
  return glamor(object).toString()
}

/**
 * A thin wrapper around `classnames` for convenience.
 *
 * @param {Mixed} ...args
 * @return {String}
 */

css.merge = (...args) => {
  return classnames(...args)
}

/**
 * A convenience method to pick truthy `props` from a dictionary of `styles`.
 *
 * @param {Object} props
 * @param {Object} styles
 * @return {String}
 */

css.pick = (styles, props) => {
  const array = []

  for (const key in styles) {
    if (props[key]) array.push(styles[key])
  }

  return classnames(array)
}

/**
 * A convenience method to glamor-ize an entire `styles` dictionary.
 *
 * @param {Object} styles
 * @return {Object}
 */

css.styles = (styles) => {
  const ret = {}

  for (const key in styles) {
    ret[key] = css(styles[key])
  }

  return ret
}

/**
 * Export.
 *
 * @type {Function}
 */

export default css

example.js

import React from 'react'
import css from './css'
import BRAND from './brand-constants'

/**
 * Component.
 *
 * @type {Component}
 */

class Text extends React.Component {

  static propTypes = {
    children: React.PropTypes.any,
    className: React.PropTypes.any,
    large: React.PropTypes.bool,
    primary: React.PropTypes.bool,
    small: React.PropTypes.bool,
    tertiary: React.PropTypes.bool,
  }

  static defaultProps = {
    className: '',
  }

  render = () => {
    const { children, className, ...props } = this.props
    const classes = css.merge(
      className,
      STYLES.text,
      css.pick(STYLES, props),
    )

    return (
      <span className={classes}>{children}</span>
    )
  }

}

/**
 * Styles.
 *
 * @type {Object}
 */

const STYLES = css.styles({

  text: {
    display: 'inline',
  },

  primary: {
    color: BRAND.black,
  },

  tertiary: {
    color: BRAND.gray,
  },

  small: {
    fontSize: '14px',
  },

  large: {
    fontSize: '18px',
  },

})

/**
 * Export.
 *
 * @type {Component}
 */

export default Text