fix(theme): nested themes not being republished on outer theme changes (

#363)

src/__tests__/__snapshots__/theme-provider.js.snap

@@ -46,6 +46,32 @@ exports[`merges nested themes 1`] = `
 </div>
 `;
 
+exports[`propagates theme updates through nested ThemeProviders 1`] = `
+.glamor-0,
+[data-glamor-0] {
+  background-color: black;
+  color: red;
+}
+
+<ThemeProvider
+  theme={
+    Object {
+      "bg": "black",
+    }
+  }
+>
+  <ThemeProvider
+    theme={[Function]}
+  >
+    <glamorous(div)>
+      <div
+        className="glamor-0"
+      />
+    </glamorous(div)>
+  </ThemeProvider>
+</ThemeProvider>
+`;
+
 exports[`renders a component with theme 1`] = `
 .glamor-0,
 [data-glamor-0] {

src/__tests__/theme-provider.js

@@ -134,6 +134,29 @@ test('merges nested themes', () => {
   ).toMatchSnapshot()
 })
 
+test('propagates theme updates through nested ThemeProviders', () => {
+  const theme = {bg: 'white'}
+  const augment = outerTheme => Object.assign({}, outerTheme, {color: 'red'})
+  const update = {bg: 'black'}
+
+  const Child = glamorous.div(({theme: {bg, color}}) => ({
+    backgroundColor: bg,
+    color,
+  }))
+
+  const wrapper = mount(
+    <ThemeProvider theme={theme}>
+      <ThemeProvider theme={augment}>
+        <Child />
+      </ThemeProvider>
+    </ThemeProvider>,
+  )
+
+  wrapper.setProps({theme: Object.assign({}, theme, update)})
+
+  expect(wrapper).toMatchSnapshot()
+})
+
 test('renders if children are null', () => {
   expect(
     mount(

src/theme-provider.js

@@ -40,6 +40,11 @@ class ThemeProvider extends React.Component {
 
   setOuterTheme = theme => {
     this.outerTheme = theme
+    this.publishTheme()
+  }
+
+  publishTheme(theme) {
+    this.broadcast.setState(this.getTheme(theme))
   }
 
   componentDidMount() {
@@ -53,13 +58,12 @@ class ThemeProvider extends React.Component {
     // set broadcast state by merging outer theme with own
     if (this.context[CHANNEL]) {
       this.setOuterTheme(this.context[CHANNEL].getState())
-      this.broadcast.setState(this.getTheme())
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.theme !== nextProps.theme) {
-      this.broadcast.setState(this.getTheme(nextProps.theme))
+      this.publishTheme(nextProps.theme)
     }
   }