styled-components 2.1.1 → 2.2.1

package/src/models/StyledNativeComponent.js

@@ -1,5 +1,6 @@
 // @flow
-import { createElement } from 'react'
+import { Component, createElement } from 'react'
+import PropTypes from 'prop-types'
 
 import type { Theme } from './ThemeProvider'
 
@@ -8,11 +9,10 @@ import isStyledComponent from '../utils/isStyledComponent'
 import getComponentName from '../utils/getComponentName'
 import type { RuleSet, Target } from '../types'
 
-import { CHANNEL } from './ThemeProvider'
-import AbstractStyledComponent from './AbstractStyledComponent'
+import { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from './ThemeProvider'
 
 export default (constructWithOptions: Function, InlineStyle: Function) => {
-  class BaseStyledNativeComponent extends AbstractStyledComponent {
+  class BaseStyledNativeComponent extends Component {
     static target: Target
     static styledComponentId: string
     static attrs: Object
@@ -25,6 +25,15 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
       generatedStyles: undefined,
     }
 
+    unsubscribeId: number = -1
+
+    unsubscribeFromContext() {
+      if (this.unsubscribeId !== -1) {
+        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)
+      }
+    }
+
+
     buildExecutionContext(theme: any, props: any) {
       const { attrs } = this.constructor
       const context = { ...props, theme }
@@ -53,20 +62,24 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
       // If there is a theme in the context, subscribe to the event emitter. This
       // is necessary due to pure components blocking context updates, this circumvents
       // that by updating when an event is emitted
-      if (this.context[CHANNEL]) {
-        const subscribe = this.context[CHANNEL]
-        this.unsubscribe = subscribe(nextTheme => {
+      const styledContext = this.context[CHANNEL_NEXT]
+      if (styledContext !== undefined) {
+        const { subscribe } = styledContext
+        this.unsubscribeId = subscribe(nextTheme => {
           // This will be called once immediately
 
           // Props should take precedence over ThemeProvider, which should take precedence over
           // defaultProps, but React automatically puts defaultProps on props.
           const { defaultProps } = this.constructor
+          /* eslint-disable react/prop-types */
           const isDefaultTheme = defaultProps && this.props.theme === defaultProps.theme
           const theme = this.props.theme && !isDefaultTheme ? this.props.theme : nextTheme
+          /* eslint-enable */
           const generatedStyles = this.generateAndInjectStyles(theme, this.props)
           this.setState({ theme, generatedStyles })
         })
       } else {
+        // eslint-disable-next-line react/prop-types
         const theme = this.props.theme || {}
         const generatedStyles = this.generateAndInjectStyles(
           theme,
@@ -81,8 +94,10 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.
         const { defaultProps } = this.constructor
+        /* eslint-disable react/prop-types */
         const isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme
         const theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme
+        /* eslint-enable */
         const generatedStyles = this.generateAndInjectStyles(theme, nextProps)
 
         return { theme, generatedStyles }
@@ -90,9 +105,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
     }
 
     componentWillUnmount() {
-      if (this.unsubscribe) {
-        this.unsubscribe()
-      }
+      this.unsubscribeFromContext()
     }
 
     setNativeProps(nativeProps: Object) {
@@ -112,6 +125,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
     }
 
     onRef = (node: any) => {
+      // eslint-disable-next-line react/prop-types
       const { innerRef } = this.props
       this.root = node
 
@@ -121,6 +135,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
     }
 
     render() {
+      // eslint-disable-next-line react/prop-types
       const { children, style } = this.props
       const { generatedStyles } = this.state
       const { target } = this.constructor
@@ -171,6 +186,11 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
       static attrs = attrs
       static inlineStyle = inlineStyle
 
+      static contextTypes = {
+        [CHANNEL]: PropTypes.func,
+        [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
+      }
+
       // NOTE: This is so that isStyledComponent passes for the innerRef unwrapping
       static styledComponentId = 'StyledNativeComponent'
 

package/src/models/ThemeProvider.js

@@ -6,9 +6,17 @@ import isFunction from 'is-function'
 import isPlainObject from 'is-plain-object'
 import createBroadcast from '../utils/create-broadcast'
 import type { Broadcast } from '../utils/create-broadcast'
+import once from '../utils/once'
 
 // NOTE: DO NOT CHANGE, changing this is a semver major change!
 export const CHANNEL = '__styled-components__'
+export const CHANNEL_NEXT = `${CHANNEL}next__`
+
+export const CONTEXT_CHANNEL_SHAPE = PropTypes.shape({
+  getTheme: PropTypes.func,
+  subscribe: PropTypes.func,
+  unsubscribe: PropTypes.func,
+})
 
 export type Theme = {[key: string]: mixed}
 type ThemeProviderProps = {|
@@ -16,6 +24,11 @@ type ThemeProviderProps = {|
   theme: Theme | (outerTheme: Theme) => void,
 |}
 
+
+const warnChannelDeprecated = once(() => {
+  // eslint-disable-next-line no-console
+  console.error(`Warning: Usage of \`context.${CHANNEL}\` as a function is deprecated. It will be replaced with the object on \`.context.${CHANNEL_NEXT}\` in a future version.`)
+})
 /**
  * Provide a theme to an entire react component tree via context and event listeners (have to do
  * both context and event emitter as pure components block context updates)
@@ -23,9 +36,10 @@ type ThemeProviderProps = {|
 class ThemeProvider extends Component {
   getTheme: (theme?: Theme | (outerTheme: Theme) => void) => Theme
   outerTheme: Theme
-  unsubscribeToOuter: () => void
+  unsubscribeToOuterId: string
   props: ThemeProviderProps
   broadcast: Broadcast
+  unsubscribeToOuterId: number = -1
 
   constructor() {
     super()
@@ -35,9 +49,9 @@ class ThemeProvider extends Component {
   componentWillMount() {
     // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme
     // with the outer theme
-    if (this.context[CHANNEL]) {
-      const subscribe = this.context[CHANNEL]
-      this.unsubscribeToOuter = subscribe(theme => {
+    const outerContext = this.context[CHANNEL_NEXT]
+    if (outerContext !== undefined) {
+      this.unsubscribeToOuterId = outerContext.subscribe(theme => {
         this.outerTheme = theme
       })
     }
@@ -45,7 +59,21 @@ class ThemeProvider extends Component {
   }
 
   getChildContext() {
-    return { ...this.context, [CHANNEL]: this.broadcast.subscribe }
+    return {
+      ...this.context,
+      [CHANNEL_NEXT]: {
+        getTheme: this.getTheme,
+        subscribe: this.broadcast.subscribe,
+        unsubscribe: this.broadcast.unsubscribe,
+      },
+      [CHANNEL]: (subscriber) => {
+        warnChannelDeprecated()
+
+        // Patch the old `subscribe` provide via `CHANNEL` for older clients.
+        const unsubscribeId = this.broadcast.subscribe(subscriber)
+        return () => this.broadcast.unsubscribe(unsubscribeId)
+      },
+    }
   }
 
   componentWillReceiveProps(nextProps: ThemeProviderProps) {
@@ -53,8 +81,8 @@ class ThemeProvider extends Component {
   }
 
   componentWillUnmount() {
-    if (this.context[CHANNEL]) {
-      this.unsubscribeToOuter()
+    if (this.unsubscribeToOuterId !== -1) {
+      this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeToOuterId)
     }
   }
 
@@ -83,10 +111,11 @@ class ThemeProvider extends Component {
 }
 
 ThemeProvider.childContextTypes = {
-  [CHANNEL]: PropTypes.func.isRequired,
+  [CHANNEL]: PropTypes.func, // legacy
+  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
 }
 ThemeProvider.contextTypes = {
-  [CHANNEL]: PropTypes.func,
+  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
 }
 
 export default ThemeProvider

package/src/models/test/ThemeProvider.test.js

@@ -1,9 +1,8 @@
 // @flow
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import PropTypes from 'prop-types'
 import { shallow, render } from 'enzyme'
-import ThemeProvider, { CHANNEL } from '../ThemeProvider'
+import ThemeProvider, { CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE  } from '../ThemeProvider'
 
 describe('ThemeProvider', () => {
   it('should not throw an error when no children are passed', () => {
@@ -31,7 +30,7 @@ describe('ThemeProvider', () => {
     // Setup Child
     class Child extends React.Component {
       componentWillMount() {
-        this.context[CHANNEL](theme => {
+        this.context[CHANNEL_NEXT].subscribe(theme => {
           expect(theme).toEqual({ ...outerTheme, ...innerTheme })
           done()
         })
@@ -39,7 +38,7 @@ describe('ThemeProvider', () => {
       render() { return null }
     }
     Child.contextTypes = {
-      [CHANNEL]: PropTypes.object,
+      [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
     }
 
     render(
@@ -58,7 +57,7 @@ describe('ThemeProvider', () => {
     // Setup Child
     class Child extends React.Component {
       componentWillMount() {
-        this.context[CHANNEL](theme => {
+        this.context[CHANNEL_NEXT].subscribe(theme => {
           expect(theme).toEqual({ ...outerestTheme, ...outerTheme, ...innerTheme })
           done()
         })
@@ -66,7 +65,7 @@ describe('ThemeProvider', () => {
       render() { return null }
     }
     Child.contextTypes = {
-      [CHANNEL]: PropTypes.object,
+      [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
     }
 
     render(
@@ -89,7 +88,7 @@ describe('ThemeProvider', () => {
     // Setup Child
     class Child extends React.Component {
       componentWillMount() {
-        this.context[CHANNEL](theme => {
+        this.context[CHANNEL_NEXT].subscribe(theme => {
           // eslint-disable-next-line react/prop-types
           expect(theme).toEqual(themes[this.props.shouldHaveTheme])
           childRendered++ // eslint-disable-line no-plusplus
@@ -101,7 +100,7 @@ describe('ThemeProvider', () => {
       render() { return null }
     }
     Child.contextTypes = {
-      [CHANNEL]: PropTypes.object,
+      [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
     }
 
     render(

package/src/native/index.js

@@ -21,7 +21,7 @@ const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag)
 /* React native lazy-requires each of these modules for some reason, so let's
 *  assume it's for a good reason and not eagerly load them all */
 const aliases = `ActivityIndicator ActivityIndicatorIOS ART Button DatePickerIOS DrawerLayoutAndroid
- Image ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal Navigator NavigatorIOS
+ Image ImageBackground ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal Navigator NavigatorIOS
  Picker PickerIOS ProgressBarAndroid ProgressViewIOS ScrollView SegmentedControlIOS Slider
  SliderIOS SnapshotViewIOS Switch RecyclerViewBackedScrollView RefreshControl StatusBar
  SwipeableListView SwitchAndroid SwitchIOS TabBarIOS Text TextInput ToastAndroid ToolbarAndroid

package/src/native/test/native.test.js

@@ -32,6 +32,20 @@ describe('native', () => {
     expect(view.prop('style')).toEqual([ { paddingTop: 10 }, style ])
   })
 
+  it('should not console.warn if a comment is seen', () => {
+    const oldConsoleWarn = console.warn;
+    console.warn = jest.fn();
+    try {
+      styled.View`
+        /* this is a comment */
+      `
+
+      expect(console.warn).not.toHaveBeenCalled();
+    } finally {
+      console.warn = oldConsoleWarn;
+    }
+  })
+
   describe('extending', () => {
     it('should combine styles of extending components', () => {
       const Parent = styled.View`opacity: 0.9;`

package/src/test/__snapshots__/ssr.test.js.snap

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ssr should add a nonce to the stylesheet if webpack nonce is detected in the global scope 1`] = `"<h1 class=\\"sc-a b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"197727696\\">Hello SSR!</h1>"`;
+
+exports[`ssr should add a nonce to the stylesheet if webpack nonce is detected in the global scope 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\" nonce=\\"foo\\">/* sc-component-id: sc-global-2303210225 */
+body{background: papayawhip;}
+</style><style type=\\"text/css\\" data-styled-components=\\"b\\" data-styled-components-is-local=\\"true\\" nonce=\\"foo\\">/* sc-component-id: sc-a */
+.sc-a {}
+
+.b{color: red;}
+</style>"
+`;
+
+exports[`ssr should allow global styles to be injected during rendering 1`] = `"<h1 class=\\"PageOne a\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"2014320521\\">Camera One!</h1>"`;
+
+exports[`ssr should allow global styles to be injected during rendering 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-737874422 */
+html::before{content: 'Before both renders';}
+</style><style type=\\"text/css\\" data-styled-components=\\"a\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: PageOne */
+.PageOne {}
+
+.a{color: red;}
+</style><style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-2914197427 */
+html::before{content: 'During first render';}
+</style>"
+`;
+
+exports[`ssr should allow global styles to be injected during rendering 3`] = `"<h2 class=\\"PageTwo b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"2124224444\\">Camera Two!</h2>"`;
+
+exports[`ssr should allow global styles to be injected during rendering 4`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-737874422 */
+html::before{content: 'Before both renders';}
+</style><style type=\\"text/css\\" data-styled-components=\\"b\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: PageTwo */
+.PageTwo {}
+
+.b{color: blue;}
+</style><style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-2914197427 */
+html::before{content: 'During first render';}
+/* sc-component-id: sc-global-1207956261 */
+html::before{content: 'Between renders';}
+/* sc-component-id: sc-global-3990873394 */
+html::before{content: 'During second render';}
+</style>"
+`;
+
+exports[`ssr should dispatch global styles to each ServerStyleSheet 1`] = `"<h1 class=\\"Header a\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"1829114759\\"></h1>"`;
+
+exports[`ssr should dispatch global styles to each ServerStyleSheet 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-2303210225 */
+body{background: papayawhip;}
+</style><style type=\\"text/css\\" data-styled-components=\\"a\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: Header */
+.Header {}
+
+.a{-webkit-animation:keyframe_0 1s both;animation:keyframe_0 1s both;}
+/* sc-component-id: sc-keyframes-keyframe_0 */
+@-webkit-keyframes keyframe_0{0%{opacity: 0;}}@keyframes keyframe_0{0%{opacity: 0;}}
+</style>"
+`;
+
+exports[`ssr should extract both global and local CSS 1`] = `"<h1 class=\\"sc-a b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"197727696\\">Hello SSR!</h1>"`;
+
+exports[`ssr should extract both global and local CSS 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-2303210225 */
+body{background: papayawhip;}
+</style><style type=\\"text/css\\" data-styled-components=\\"b\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: sc-a */
+.sc-a {}
+
+.b{color: red;}
+</style>"
+`;
+
+exports[`ssr should extract the CSS in a simple case 1`] = `"<h1 class=\\"sc-a b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"197727696\\">Hello SSR!</h1>"`;
+
+exports[`ssr should extract the CSS in a simple case 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"b\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: sc-a */
+.sc-a {}
+
+.b{color: red;}
+</style>"
+`;
+
+exports[`ssr should render CSS in the order the components were defined, not rendered 1`] = `"<div data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"275982144\\"><h2 class=\\"TWO a\\" data-reactid=\\"2\\"></h2><h1 class=\\"ONE b\\" data-reactid=\\"3\\"></h1></div>"`;
+
+exports[`ssr should render CSS in the order the components were defined, not rendered 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"a b\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: ONE */
+.ONE {}
+
+.b{color: red;}
+/* sc-component-id: TWO */
+.TWO {}
+
+.a{color: blue;}
+</style>"
+`;
+
+exports[`ssr should return a generated React style element 1`] = `
+Object {
+  "dangerouslySetInnerHTML": Object {
+    "__html": "/* sc-component-id: sc-global-2303210225 */
+body{background: papayawhip;}
+",
+  },
+  "data-styled-components": "",
+  "data-styled-components-is-local": "false",
+  "type": "text/css",
+}
+`;
+
+exports[`ssr should return a generated React style element 2`] = `
+Object {
+  "dangerouslySetInnerHTML": Object {
+    "__html": "/* sc-component-id: sc-a */
+.sc-a {}
+
+.b{color: red;}
+",
+  },
+  "data-styled-components": "b",
+  "data-styled-components-is-local": "true",
+  "type": "text/css",
+}
+`;
+
+exports[`ssr should share global styles but keep renders separate 1`] = `"<h1 class=\\"PageOne a\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"2014320521\\">Camera One!</h1>"`;
+
+exports[`ssr should share global styles but keep renders separate 2`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-2303210225 */
+body{background: papayawhip;}
+</style><style type=\\"text/css\\" data-styled-components=\\"a\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: PageOne */
+.PageOne {}
+
+.a{color: red;}
+</style>"
+`;
+
+exports[`ssr should share global styles but keep renders separate 3`] = `"<h2 class=\\"PageTwo b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"2124224444\\">Camera Two!</h2>"`;
+
+exports[`ssr should share global styles but keep renders separate 4`] = `
+"<style type=\\"text/css\\" data-styled-components=\\"\\" data-styled-components-is-local=\\"false\\">/* sc-component-id: sc-global-2303210225 */
+body{background: papayawhip;}
+</style><style type=\\"text/css\\" data-styled-components=\\"b\\" data-styled-components-is-local=\\"true\\">/* sc-component-id: PageTwo */
+.PageTwo {}
+
+.b{color: blue;}
+</style>"
+`;

package/src/test/expanded-api.test.js

@@ -62,6 +62,30 @@ describe('expanded api', () => {
       expect(Comp2.styledComponentId).toBe('Comp2-OMGLOL')
       expect(shallow(<Comp2 />).prop('className')).toMatch(/Comp2-OMGLOL/)
     })
+
+    it('should work with `.extend`', () => {
+      const Comp = styled.div.withConfig({ displayName: 'Comp', componentId: 'LOLOMG' })`
+        color: blue;
+      `
+      const Comp2 = Comp.extend`
+        color: ${'red'};
+        background: ${props => props.bg};
+      `
+      expect(Comp.styledComponentId).toBe('Comp-LOLOMG')
+      expect(shallow(<Comp />).prop('className')).toMatch(/Comp-LOLOMG/)
+      expect(Comp2.styledComponentId).toBe('LOLOMG-Comp-a')
+      expect(shallow(<Comp2 bg="red" />).prop('className')).toMatch(/LOLOMG-Comp-a/)
+    })
+
+    it('should work with `.withComponent`', () => {
+      const Dummy = () => null
+      const Comp = styled.div.withConfig({ displayName: 'Comp', componentId: 'OMGLOL' })``.withComponent('h1')
+      const Comp2 = styled.div.withConfig({ displayName: 'Comp2', componentId: 'OMFG' })``.withComponent(Dummy)
+      expect(Comp.styledComponentId).toBe('Comp-OMGLOL-h1')
+      expect(shallow(<Comp />).prop('className')).toMatch(/Comp-OMGLOL-h1/)
+      expect(Comp2.styledComponentId).toBe('Comp2-OMFG-Dummy')
+      expect(shallow(<Comp2 />).prop('className')).toMatch(/Comp2-OMFG-Dummy/)
+    })
   })
 
   describe('chaining', () => {

package/src/test/props.test.js

@@ -19,10 +19,21 @@ describe('props', () => {
     expectCSSMatches('.sc-a {} .b { color: black; }')
   })
   it('should execute interpolations and inject props', () => {
+    const Comp = styled.div`color: ${props => props.fg || 'black'};`
+    shallow(<Comp fg="red" />)
+    expectCSSMatches('.sc-a {} .b { color: red; }')
+  })
+  it('should ignore non-0 falsy object interpolations', () => {
     const Comp = styled.div`
-      color: ${props => props.fg || 'black'};
+      ${() => ({
+        borderWidth: 0,
+        colorA: null,
+        colorB: false,
+        colorC: undefined,
+        colorD: '',
+      })};
     `
-    shallow(<Comp fg="red"/>)
-    expectCSSMatches('.sc-a {} .b { color: red; }')
+    shallow(<Comp fg="red" />)
+    expectCSSMatches('.sc-a {} .b { border-width: 0; ; ; }')
   })
 })