support nested theme objects

src/components/themr.js

@@ -1,6 +1,16 @@
 import React, { Component, PropTypes } from 'react'
 import invariant from 'invariant'
 
+/**
+ * @typedef {Object.<string, TReactCSSThemrTheme>} TReactCSSThemrTheme
+ */
+
+/**
+ * @typedef {{}} TReactCSSThemrOptions
+ * @property {String|Boolean} [composeTheme=COMPOSE_DEEPLY]
+ * @property {Boolean} [withRef=false]
+ */
+
 const COMPOSE_DEEPLY = 'deeply'
 const COMPOSE_SOFTLY = 'softly'
 const DONT_COMPOSE = false
@@ -14,6 +24,13 @@ const THEMR_CONFIG = typeof Symbol !== 'undefined' ?
  Symbol('THEMR_CONFIG') :
  '__REACT_CSS_THEMR_CONFIG__'
 
+/**
+ * Themr decorator
+ * @param {String|Number|Symbol} componentName - Component name
+ * @param {TReactCSSThemrTheme} localTheme - Base theme
+ * @param {{}} options - Themr options
+ * @returns {function(ThemedComponent:Function):Function} - ThemedComponent
+ */
 export default (componentName, localTheme, options = {}) => (ThemedComponent) => {
  const { composeTheme: optionComposeTheme, withRef: optionWithRef } = { ...DEFAULT_OPTIONS, ...options }
  validateComposeOption(optionComposeTheme)
@@ -116,13 +133,52 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
  return Themed
 }
 
-export function themeable(style = {}, theme) {
- if (!theme) return style
- return Object.keys(theme).reduce((result, key) => ({
- ...result, [key]: style[key] ? `${style[key]} ${theme[key]}` : theme[key]
- }), style)
+/**
+ * Merges two themes by concatenating values with the same keys
+ * @param {TReactCSSThemrTheme} original - Original theme object
+ * @param {TReactCSSThemrTheme} mixin - Mixing theme object
+ * @returns {TReactCSSThemrTheme} - Merged resulting theme
+ */
+export function themeable(original = {}, mixin) {
+ //don't merge if no mixin is passed
+ if (!mixin) return original
+
+ //merge themes by concatenating values with the same keys
+ return Object.keys(mixin).reduce(
+
+ //merging reducer
+ (result, key) => {
+ const originalValue = original[key]
+ const mixinValue = mixin[key]
+
+ let newValue
+
+ //check if values are nested objects
+ if (typeof originalValue === 'object' && typeof mixinValue === 'object') {
+ //go recursive
+ newValue = themeable(originalValue, mixinValue)
+ } else {
+ //either concat or take mixin value
+ newValue = originalValue ? `${originalValue} ${mixinValue}` : mixinValue
+ }
+
+ return {
+ ...result,
+ [key]: newValue
+ }
+ },
+
+ //use original theme as an acc
+ original
+ )
 }
 
+/**
+ * Validates compose option
+ * @param {String|Boolean} composeTheme - Compose them option
+ * @throws
+ * @returns {undefined}
+ */
 function validateComposeOption(composeTheme) {
  if ([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ].indexOf(composeTheme) === -1) {
  throw new Error(
@@ -133,6 +189,12 @@ function validateComposeOption(composeTheme) {
  }
 }
 
+/**
+ * Removes namespace from key
+ * @param {String} key - Key
+ * @param {String} themeNamespace - Theme namespace
+ * @returns {String} - Key
+ */
 function removeNamespace(key, themeNamespace) {
  const capitalized = key.substr(themeNamespace.length)
  return capitalized.slice(0, 1).toLowerCase() + capitalized.slice(1)

test/components/themr.spec.js

@@ -1,7 +1,7 @@
 import expect from 'expect'
 import React, { Children, PropTypes, Component } from 'react'
 import TestUtils from 'react-addons-test-utils'
-import { themr } from '../../src/index'
+import { themr, themeable } from '../../src/index'
 
 describe('Themr decorator function', () => {
  class Passthrough extends Component {
@@ -409,3 +409,35 @@ describe('Themr decorator function', () => {
  })
  })
 })
+
+describe('themeable function', () => {
+ it('should support merging nested objects', () => {
+ const themeA = {
+ test: 'test',
+ nested: {
+ foo: 'foo',
+ bar: 'bar'
+ }
+ }
+
+ const themeB = {
+ test: 'test2',
+ nested: {
+ foo: 'foo2',
+ test: 'test'
+ }
+ }
+
+ const expected = {
+ test: 'test test2',
+ nested: {
+ foo: 'foo foo2',
+ bar: 'bar',
+ test: 'test'
+ }
+ }
+
+ const result = themeable(themeA, themeB)
+ expect(result).toEqual(expected)
+ })
+})