#212 - remove theming (#225)

* #212 - remove theming

- first pass

* Apply all classes for components as selectors

src/react/index.js

@@ -1,8 +1,6 @@
-import { Component, createElement as h } from 'react'
-import PropTypes from 'prop-types'
+import { createElement as h } from 'react'
 import { css } from '../index'
 import { map, omit, reduce, assign } from '../utils'
-import { CHANNEL } from './constants'
 
 export {
   flush,
@@ -25,106 +23,73 @@ export default function (tag, cls, objs, vars = [], content) {
 
   const componentTag = tag.displayName || tag.name || 'Component'
 
-  class Styled extends Component {
-    state = {
-      theme: {}
-    }
-
-    componentWillMount () {
-      if (this.context[CHANNEL]) {
-        this.setState({ theme: this.context[CHANNEL].getState() })
-      }
-    }
-
-    componentDidMount () {
-      if (this.context[CHANNEL]) {
-        this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme)
-      }
-    }
-
-    componentWillUnmount () {
-      if (typeof this.unsubscribe === 'function') {
-        this.unsubscribe()
-      }
-    }
-
-    render () {
-      const { props, state, context } = this
-      const mergedProps = assign({}, props, {
-        theme: state.theme
-      })
-
-      const getValue = v => {
-        if (v && typeof v === 'function') {
-          if (v.__emotion_class) {
-            return `& .${v.__emotion_class}`
-          }
-          return v(mergedProps, context)
+  function Styled (props, context) {
+    const getValue = v => {
+      if (v && typeof v === 'function') {
+        if (v.__emotion_class) {
+          return `& .${v.__emotion_class}`
         }
-
-        return v
+        return v(props, context)
       }
-      let localTag = tag
-
-      let finalObjs = []
 
-      if (tag.__emotion_spec) {
-        push(
-          finalObjs,
-          reduce(
-            tag.__emotion_spec,
-            (accum, spec) => {
-              push(accum, spec.objs)
-              if (spec.content) {
-                push(accum, spec.content.apply(null, map(spec.vars, getValue)))
-              }
-              return accum
-            },
-            []
-          )
+      return v
+    }
+    let localTag = tag
+
+    let finalObjs = []
+
+    if (tag.__emotion_spec) {
+      push(
+        finalObjs,
+        reduce(
+          tag.__emotion_spec,
+          (accum, spec) => {
+            push(accum, spec.objs)
+            if (spec.content) {
+              push(accum, spec.content.apply(null, map(spec.vars, getValue)))
+            }
+            push(accum, [spec.cls])
+            return accum
+          },
+          []
         )
-        localTag = tag.__emotion_spec[0].tag
-      }
-
-      push(finalObjs, objs)
-
-      push(finalObjs, [cls])
+      )
+      localTag = tag.__emotion_spec[0].tag
+    }
 
-      if (content) {
-        push(finalObjs, content.apply(null, map(vars, getValue)))
-      }
+    push(finalObjs, objs)
 
-      if (mergedProps.className) {
-        push(finalObjs, mergedProps.className.split(' '))
-      }
+    push(finalObjs, [cls])
 
-      const className = css(map(finalObjs, getValue))
+    if (content) {
+      push(finalObjs, content.apply(null, map(vars, getValue)))
+    }
 
-      return h(
-        localTag,
-        omit(
-          assign({}, mergedProps, {
-            ref: mergedProps.innerRef,
-            className
-          }),
-          ['innerRef', 'theme']
-        )
-      )
+    if (props.className) {
+      push(finalObjs, props.className.split(' '))
     }
 
-    setTheme = theme => this.setState({ theme })
-  }
+    const className = css(map(finalObjs, getValue))
 
-  Styled.contextTypes = {
-    [CHANNEL]: PropTypes.object
+    return h(
+      localTag,
+      omit(
+        assign({}, props, {
+          ref: props.innerRef,
+          className
+        }),
+        ['innerRef', 'theme']
+      )
+    )
   }
 
   Styled.displayName = `styled(${componentTag})`
   const spec = {
     vars,
     content,
     objs,
-    tag
+    tag,
+    cls
   }
   Styled.__emotion_spec = tag.__emotion_spec
     ? tag.__emotion_spec.concat(spec)

test/__snapshots__/react.test.js.snap

@@ -57,13 +57,21 @@ exports[`styled change theme 1`] = `
       }
     }
   >
-    <styled(Component)>
-      <div
-        className="glamor-0 glamor-1"
+    <WithTheme(styled(Component))>
+      <styled(Component)
+        theme={
+          Object {
+            "primary": "green",
+          }
+        }
       >
-        this will be green then pink
-      </div>
-    </styled(Component)>
+        <div
+          className="glamor-0 glamor-1"
+        >
+          this will be green then pink
+        </div>
+      </styled(Component)>
+    </WithTheme(styled(Component))>
   </ThemeProvider>
 </TestComponent>
 `;
@@ -88,13 +96,21 @@ exports[`styled change theme 2`] = `
       }
     }
   >
-    <styled(Component)>
-      <div
-        className="glamor-0 glamor-1"
+    <WithTheme(styled(Component))>
+      <styled(Component)
+        theme={
+          Object {
+            "primary": "pink",
+          }
+        }
       >
-        this will be green then pink
-      </div>
-    </styled(Component)>
+        <div
+          className="glamor-0 glamor-1"
+        >
+          this will be green then pink
+        </div>
+      </styled(Component)>
+    </WithTheme(styled(Component))>
   </ThemeProvider>
 </TestComponent>
 `;
@@ -177,13 +193,13 @@ exports[`styled component as selector function interpolation 1`] = `
 `;
 
 exports[`styled composes 1`] = `
-.glamor-1 {
+.glamor-2 {
   color: blue;
   font-size: 32px;
 }
 
 <h1
-  className="glamor-0 legacy__class glamor-1"
+  className="glamor-0 glamor-1 legacy__class glamor-2"
   scale={2}
 >
   hello world
@@ -216,7 +232,7 @@ exports[`styled composes based on props 2`] = `
 `;
 
 exports[`styled composes with objects 1`] = `
-.glamor-1 {
+.glamor-2 {
   color: #333;
   font-size: 32px;
   height: 64px;
@@ -227,21 +243,21 @@ exports[`styled composes with objects 1`] = `
     only screen and (-o-min-device-pixel-ratio: 1.5/1),
     only screen and (min-resolution: 144dpi),
     only screen and (min-resolution: 1.5dppx) {
-  .glamor-1 {
+  .glamor-2 {
     font-size: 1.4323121856191332em;
   }
 }
 
 <h1
-  className="glamor-0 legacy__class glamor-1"
+  className="glamor-0 glamor-1 legacy__class glamor-2"
   scale={2}
 >
   hello world
 </h1>
 `;
 
 exports[`styled composing components 1`] = `
-.glamor-1 {
+.glamor-3 {
   color: green;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -252,31 +268,31 @@ exports[`styled composing components 1`] = `
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="glamor-0 glamor-1 glamor-2 glamor-3"
 >
   hello world
 </button>
 `;
 
 exports[`styled composition 1`] = `
-.glamor-1 {
+.glamor-2 {
   font-size: 13.333333333333334px;
 }
 
 <h1
-  className="glamor-0 legacy__class glamor-1"
+  className="glamor-0 glamor-1 legacy__class glamor-2"
 >
   hello world
 </h1>
 `;
 
 exports[`styled function in expression 1`] = `
-.glamor-1 {
+.glamor-2 {
   font-size: 40px;
 }
 
 <h1
-  className="glamor-0 legacy__class glamor-1"
+  className="glamor-0 glamor-1 legacy__class glamor-2"
   scale={2}
 >
   hello world
@@ -297,6 +313,7 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
   z-index: 100;
   font-size: 18px;
   text-align: center;
+  border-left: blue;
 }
 
 <h1
@@ -307,7 +324,7 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 `;
 
 exports[`styled higher order component 1`] = `
-.glamor-1 {
+.glamor-2 {
   font-size: 20px;
   background-color: '#343a40';
   -webkit-box-orient: vertical;
@@ -317,7 +334,7 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="glamor-0 glamor-1 glamor-2"
 />
 `;
 
@@ -520,15 +537,15 @@ exports[`styled random object expression 1`] = `
 `;
 
 exports[`styled themes 1`] = `
-.glamor-1 {
+.glamor-3 {
   background-color: #ffd43b;
   color: #8c81d8;
   height: 64px;
   font-size: 32px;
 }
 
 <span
-  className="glamor-0 glamor-1"
+  className="glamor-0 glamor-1 glamor-2 glamor-3"
   scale={2}
 >
   hello world