styled-components 2.1.1 → 2.2.1

package/lib/utils/generateAlphabeticName.js

@@ -9,7 +9,7 @@ var generateAlphabeticName = function generateAlphabeticName(code) {
   var name = '';
   var x = void 0;
 
-  for (x = code; x > charsLength; x = Math.floor(x / chars.length)) {
+  for (x = code; x > charsLength; x = Math.floor(x / charsLength)) {
     name = chars[x % charsLength] + name;
   }
 

package/lib/utils/nonce.js

@@ -0,0 +1,10 @@
+'use strict';
+
+exports.__esModule = true;
+
+exports.default = function () {
+  return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
+};
+/* eslint-disable camelcase, no-undef */
+
+module.exports = exports['default'];

package/lib/utils/once.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+
+// Helper to call a given function, only once
+exports.default = function (cb) {
+  var called = false;
+
+  return function () {
+    if (!called) {
+      called = true;
+      cb();
+    }
+  };
+};
+
+module.exports = exports["default"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
   "main": "lib/index.js",
   "typings": "typings/styled-components.d.ts",
@@ -9,7 +9,7 @@
   "scripts": {
     "build": "npm run build:lib && npm run build:dist",
     "prebuild:lib": "rimraf lib/*",
-    "build:lib": "babel --out-dir lib src",
+    "build:lib": "babel --out-dir lib --ignore \"*.test.js\" src",
     "prebuild:dist": "rimraf dist/*",
     "build:dist": "rollup -c && rollup -c --environment ESBUNDLE && rollup -c --environment PRODUCTION",
     "build:watch": "npm run build:lib -- --watch",
@@ -71,9 +71,9 @@
     "supports-color": "^3.2.3"
   },
   "devDependencies": {
-    "@types/react": "^15.0.25",
-    "@types/react-dom": "^15.5.0",
-    "@types/react-native": "^0.44.4",
+    "@types/react": "^15.0.37",
+    "@types/react-dom": "^15.5.1",
+    "@types/react-native": "^0.46.0",
     "babel-cli": "^6.22.2",
     "babel-core": "^6.17.0",
     "babel-eslint": "^7.1.1",
@@ -87,7 +87,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.1",
     "babel-preset-env": "^1.4.0",
     "babel-preset-react": "^6.22.0",
-    "bundlesize": "^0.5.5",
+    "bundlesize": "^0.13.2",
     "chokidar": "^1.6.0",
     "danger": "^0.16.0",
     "enzyme": "^2.8.2",
@@ -100,18 +100,17 @@
     "eslint-plugin-react": "^6.8.0",
     "express": "^4.14.1",
     "flow-bin": "^0.47.0",
-    "flow-copy-source": "^1.1.0",
     "flow-watch": "^1.1.1",
-    "jest": "^19.0.2",
+    "jest": "^20.0.4",
     "jsdom": "^9.10.0",
     "lint-staged": "^3.3.0",
     "node-watch": "^0.4.1",
     "pre-commit": "^1.2.2",
     "react": "^15.5.4",
-    "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.5.4",
     "react-native": "^0.39.2",
     "react-primitives": "^0.4.2",
+    "react-test-renderer": "^15.6.1",
     "rimraf": "^2.6.1",
     "rollup": "0.43.0",
     "rollup-plugin-babel": "^2.7.1",
@@ -124,12 +123,13 @@
     "rollup-plugin-uglify": "^1.0.1",
     "rollup-plugin-visualizer": "^0.1.5",
     "tslint": "^4.3.1",
-    "typescript": "^2.3.3"
+    "typescript": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">= 0.14.0 < 17.0.0-0"
   },
   "jest": {
+    "clearMocks": true,
     "roots": [
       "<rootDir>/src/"
     ],

package/src/hoc/withTheme.js

@@ -4,7 +4,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import hoistStatics from 'hoist-non-react-statics'
-import { CHANNEL } from '../models/ThemeProvider'
+import { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from '../models/ThemeProvider'
 import _isStyledComponent from '../utils/isStyledComponent'
 
 const wrapWithTheme = (Component: ReactClass<any>) => {
@@ -24,24 +24,31 @@ const wrapWithTheme = (Component: ReactClass<any>) => {
 
     static contextTypes = {
       [CHANNEL]: PropTypes.func,
+      [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
     };
 
     state: { theme?: ?Object } = {};
-    unsubscribe: () => void;
+    unsubscribeId: number = -1
 
     componentWillMount() {
-      if (!this.context[CHANNEL]) {
-        throw new Error('[withTheme] Please use ThemeProvider to be able to use withTheme')
+      const styledContext = this.context[CHANNEL_NEXT]
+      if (styledContext === undefined) {
+        // eslint-disable-next-line no-console
+        console.error('[withTheme] Please use ThemeProvider to be able to use withTheme')
+        return
       }
 
-      const subscribe = this.context[CHANNEL]
-      this.unsubscribe = subscribe(theme => {
+
+      const { subscribe } = styledContext
+      this.unsubscribeId = subscribe(theme => {
         this.setState({ theme })
       })
     }
 
     componentWillUnmount() {
-      if (typeof this.unsubscribe === 'function') this.unsubscribe()
+      if (this.unsubscribeId !== -1) {
+        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)
+      }
     }
 
     render() {

package/src/models/BrowserStyleSheet.js

@@ -1,4 +1,5 @@
 // @flow
+/* eslint-disable no-underscore-dangle */
 /*
  * Browser Style Sheet with Rehydration
  *
@@ -16,6 +17,7 @@
  * Note: replace · with * in the above snippet.
  * */
 import extractCompsFromCSS from '../utils/extractCompsFromCSS'
+import getNonce from '../utils/nonce'
 import type { Tag } from './StyleSheet'
 import StyleSheet, { SC_ATTR, LOCAL_ATTR } from './StyleSheet'
 
@@ -69,6 +71,12 @@ class BrowserTag implements Tag {
       const existingNames = this.el.getAttribute(SC_ATTR)
       this.el.setAttribute(SC_ATTR, existingNames ? `${existingNames} ${name}` : name)
     }
+
+    const nonce = getNonce()
+
+    if (nonce) {
+      this.el.setAttribute('nonce', nonce)
+    }
   }
 
   toHTML() {

package/src/models/ComponentStyle.js

@@ -3,6 +3,24 @@ import hashStr from '../vendor/glamor/hash'
 
 import type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'
 import StyleSheet from './StyleSheet'
+import isStyledComponent from '../utils/isStyledComponent'
+
+const isStaticRules = (rules: RuleSet): boolean => {
+  for (let i = 0; i < rules.length; i += 1) {
+    const rule = rules[i]
+
+    // recursive case
+    if (Array.isArray(rule) && !isStaticRules(rule)) {
+      return false
+    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {
+      // functions are allowed to be static if they're just being
+      // used to get the classname of a nested styled copmonent
+      return false
+    }
+  }
+
+  return true
+}
 
 /*
  ComponentStyle is all the CSS-specific stuff, not
@@ -12,9 +30,13 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
   class ComponentStyle {
     rules: RuleSet
     componentId: string
+    isStatic: boolean
+    lastClassName: ?string
+
 
     constructor(rules: RuleSet, componentId: string) {
       this.rules = rules
+      this.isStatic = isStaticRules(rules)
       this.componentId = componentId
       if (!StyleSheet.instance.hasInjectedComponent(this.componentId)) {
         const placeholder = process.env.NODE_ENV !== 'production' ? `.${componentId} {}` : ''
@@ -28,16 +50,34 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
      * Returns the hash to be injected on render()
      * */
     generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {
+      const { isStatic, lastClassName } = this
+      if (isStatic && lastClassName !== undefined) {
+        return lastClassName
+      }
+
       const flatCSS = flatten(this.rules, executionContext)
       const hash = hashStr(this.componentId + flatCSS.join(''))
 
       const existingName = styleSheet.getName(hash)
-      if (existingName) return existingName
+      if (existingName !== undefined) {
+        if (styleSheet.stylesCacheable) {
+          this.lastClassName = existingName
+        }
+        return existingName
+      }
 
       const name = nameGenerator(hash)
-      if (styleSheet.alreadyInjected(hash, name)) return name
+      if (styleSheet.stylesCacheable) {
+        this.lastClassName = existingName
+      }
+      if (styleSheet.alreadyInjected(hash, name)) {
+        return name
+      }
 
       const css = `\n${stringifyRules(flatCSS, `.${name}`)}`
+      // NOTE: this can only be set when we inject the class-name.
+      // For some reason, presumably due to how css is stringifyRules behaves in
+      // differently between client and server, styles break.
       styleSheet.inject(this.componentId, true, css, hash, name)
       return name
     }

package/src/models/InlineStyle.js

@@ -33,7 +33,7 @@ export default (styleSheet: StyleSheet) => {
         root.each(node => {
           if (node.type === 'decl') {
             declPairs.push([node.prop, node.value])
-          } else {
+          } else if (node.type !== 'comment') {
             /* eslint-disable no-console */
             console.warn(`Node of type ${node.type} not supported as an inline style`)
           }

package/src/models/ServerStyleSheet.js

@@ -1,8 +1,10 @@
 // @flow
+/* eslint-disable no-underscore-dangle */
 import React from 'react'
 import type { Tag } from './StyleSheet'
 import StyleSheet, { SC_ATTR, LOCAL_ATTR, clones } from './StyleSheet'
 import StyleSheetManager from './StyleSheetManager'
+import getNonce from '../utils/nonce'
 
 class ServerTag implements Tag {
   isLocal: boolean
@@ -27,6 +29,10 @@ class ServerTag implements Tag {
     this.size += 1
   }
 
+  concatenateCSS() {
+    return Object.keys(this.components).reduce((styles, k) => (styles + this.components[k].css), '')
+  }
+
   inject(componentId: string, css: string, name: ?string) {
     const comp = this.components[componentId]
 
@@ -39,28 +45,37 @@ class ServerTag implements Tag {
   }
 
   toHTML() {
-    const namesAttr = `${SC_ATTR}="${this.names.join(' ')}"`
-    const localAttr = `${LOCAL_ATTR}="${this.isLocal ? 'true' : 'false'}"`
-    const css = Object.keys(this.components)
-      .map(key => this.components[key].css)
-      .join('')
+    const attrs = [
+      'type="text/css"',
+      `${SC_ATTR}="${this.names.join(' ')}"`,
+      `${LOCAL_ATTR}="${this.isLocal ? 'true' : 'false'}"`,
+    ]
+
+    const nonce = getNonce()
+
+    if (nonce) {
+      attrs.push(`nonce="${nonce}"`)
+    }
 
-    return `<style type="text/css" ${namesAttr} ${localAttr}>\n${css}\n</style>`
+    return `<style ${attrs.join(' ')}>${this.concatenateCSS()}</style>`
   }
 
   toReactElement(key: string) {
-    const attributes = {
+    const attrs: Object = {
       [SC_ATTR]: this.names.join(' '),
       [LOCAL_ATTR]: this.isLocal.toString(),
     }
-    const css = Object.keys(this.components)
-      .map(k => this.components[k].css)
-      .join('')
+
+    const nonce = getNonce()
+
+    if (nonce) {
+      attrs.nonce = nonce
+    }
 
     return (
       <style
-        key={key} type="text/css" {...attributes}
-        dangerouslySetInnerHTML={{ __html: css }}
+        key={key} type="text/css" {...attrs}
+        dangerouslySetInnerHTML={{ __html: this.concatenateCSS() }}
       />
     )
   }

package/src/models/StyleSheet.js

@@ -30,6 +30,14 @@ export default class StyleSheet {
   hashes: { [string]: string } = {}
   deferredInjections: { [string]: string } = {}
   componentTags: { [string]: Tag }
+  // helper for `ComponentStyle` to know when it cache static styles.
+  // staticly styled-component can not safely cache styles on the server
+  // without all `ComponentStyle` instances saving a reference to the
+  // the styleSheet instance they last rendered with,
+  // or listening to creation / reset events. otherwise you might create
+  // a component with one stylesheet and render it another api response
+  // with another, losing styles on from your server-side render.
+  stylesCacheable = typeof document !== 'undefined'
 
   constructor(tagConstructor: (boolean) => Tag,
     tags: Array<Tag> = [],
@@ -146,6 +154,7 @@ export default class StyleSheet {
     return (isServer ? ServerStyleSheet : BrowserStyleSheet).create()
   }
 
+
   static clone(oldSheet: StyleSheet) {
     const newSheet = new StyleSheet(
       oldSheet.tagConstructor,

package/src/models/StyledComponent.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { createElement } from 'react'
+import { Component, createElement } from 'react'
 import PropTypes from 'prop-types'
 
 import type { Theme } from './ThemeProvider'
@@ -12,17 +12,20 @@ import isStyledComponent from '../utils/isStyledComponent'
 import getComponentName from '../utils/getComponentName'
 import type { RuleSet, Target } from '../types'
 
-import AbstractStyledComponent from './AbstractStyledComponent'
-import { CHANNEL } from './ThemeProvider'
+import { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from './ThemeProvider'
 import StyleSheet, { CONTEXT_KEY } from './StyleSheet'
 
 const escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g
 const multiDashRegex = /--+/g
 
+// HACK for generating all static styles without needing to allocate
+// an empty execution context every single time...
+const STATIC_EXECUTION_CONTEXT = {}
+
 export default (ComponentStyle: Function, constructWithOptions: Function) => {
   /* We depend on components having unique IDs */
   const identifiers = {}
-  const generateId = (_displayName: string) => {
+  const generateId = (_displayName: string, parentComponentId: string) => {
     const displayName = typeof _displayName !== 'string' ?
       'sc' : _displayName
         .replace(escapeRegex, '-') // Replace all possible CSS selectors
@@ -32,10 +35,13 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     identifiers[displayName] = nr
 
     const hash = ComponentStyle.generateName(displayName + nr)
-    return `${displayName}-${hash}`
+    const componentId = `${displayName}-${hash}`
+    return parentComponentId !== undefined
+      ? `${parentComponentId}-${componentId}`
+      : componentId
   }
 
-  class BaseStyledComponent extends AbstractStyledComponent {
+  class BaseStyledComponent extends Component {
     static target: Target
     static styledComponentId: string
     static attrs: Object
@@ -47,6 +53,13 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       theme: null,
       generatedClassName: '',
     }
+    unsubscribeId: number = -1
+
+    unsubscribeFromContext() {
+      if (this.unsubscribeId !== -1) {
+        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)
+      }
+    }
 
     buildExecutionContext(theme: any, props: any) {
       const { attrs } = this.constructor
@@ -66,34 +79,55 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     }
 
     generateAndInjectStyles(theme: any, props: any) {
-      const { componentStyle, warnTooManyClasses } = this.constructor
-      const executionContext = this.buildExecutionContext(theme, props)
+      const { attrs, componentStyle, warnTooManyClasses } = this.constructor
       const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.instance
-      const className = componentStyle.generateAndInjectStyles(executionContext, styleSheet)
 
-      if (warnTooManyClasses !== undefined) warnTooManyClasses(className)
+      // staticaly styled-components don't need to build an execution context object,
+      // and shouldn't be increasing the number of class names
+      if (componentStyle.isStatic && attrs === undefined) {
+        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet)
+      } else {
+        const executionContext = this.buildExecutionContext(theme, props)
+        const className = componentStyle.generateAndInjectStyles(executionContext, styleSheet)
+
+        if (warnTooManyClasses !== undefined) warnTooManyClasses(className)
 
-      return className
+        return className
+      }
     }
 
     componentWillMount() {
+      const { componentStyle } = this.constructor
+      const styledContext = this.context[CHANNEL_NEXT]
+
+      // If this is a staticaly-styled component, we don't need to the theme
+      // to generate or build styles.
+      if (componentStyle.isStatic) {
+        const generatedClassName = this.generateAndInjectStyles(
+          STATIC_EXECUTION_CONTEXT,
+          this.props,
+        )
+        this.setState({ generatedClassName })
       // 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 => {
+      } else 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 generatedClassName = this.generateAndInjectStyles(theme, this.props)
           this.setState({ theme, generatedClassName })
         })
       } else {
+        // eslint-disable-next-line react/prop-types
         const theme = this.props.theme || {}
         const generatedClassName = this.generateAndInjectStyles(
           theme,
@@ -104,12 +138,21 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     }
 
     componentWillReceiveProps(nextProps: { theme?: Theme, [key: string]: any }) {
+      // If this is a staticaly-styled component, we don't need to listen to
+      // props changes to update styles
+      const { componentStyle } = this.constructor
+      if (componentStyle.isStatic) {
+        return
+      }
+
       this.setState((oldState) => {
         // 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 generatedClassName = this.generateAndInjectStyles(theme, nextProps)
 
         return { theme, generatedClassName }
@@ -117,12 +160,11 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     }
 
     componentWillUnmount() {
-      if (this.unsubscribe) {
-        this.unsubscribe()
-      }
+      this.unsubscribeFromContext()
     }
 
     render() {
+      // eslint-disable-next-line react/prop-types
       const { innerRef } = this.props
       const { generatedClassName } = this.state
       const { styledComponentId, target } = this.constructor
@@ -130,6 +172,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       const isTargetTag = isTag(target)
 
       const className = [
+        // eslint-disable-next-line react/prop-types
         this.props.className,
         styledComponentId,
         this.attrs.className,
@@ -175,7 +218,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
   ) => {
     const {
       displayName = isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`,
-      componentId = generateId(options.displayName),
+      componentId = generateId(options.displayName, options.parentComponentId),
       ParentComponent = BaseStyledComponent,
       rules: extendingRules,
       attrs,
@@ -185,7 +228,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       `${options.displayName}-${options.componentId}` : componentId
 
     let warnTooManyClasses
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production') {
       warnTooManyClasses = createWarnTooManyClasses(displayName)
     }
 
@@ -197,6 +240,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     class StyledComponent extends ParentComponent {
       static contextTypes = {
         [CHANNEL]: PropTypes.func,
+        [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,
         [CONTEXT_KEY]: PropTypes.instanceOf(StyleSheet),
       }
 
@@ -208,26 +252,37 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       static target = target
 
       static withComponent(tag) {
-        const { displayName: _, componentId: __, ...optionsToCopy } = options
-        const newOptions = { ...optionsToCopy, ParentComponent: StyledComponent }
+        const { componentId: previousComponentId, ...optionsToCopy } = options
+
+        const newComponentId =
+          previousComponentId &&
+          `${previousComponentId}-${isTag(tag) ? tag : getComponentName(tag)}`
+
+        const newOptions = {
+          ...optionsToCopy,
+          componentId: newComponentId,
+          ParentComponent: StyledComponent,
+        }
+
         return createStyledComponent(tag, newOptions, rules)
       }
 
       static get extend() {
         const {
-          displayName: _,
-          componentId: __,
           rules: rulesFromOptions,
+          componentId: parentComponentId,
           ...optionsToCopy
         } = options
 
-        const newRules = rulesFromOptions === undefined
-          ? rules
-          : rulesFromOptions.concat(rules)
+        const newRules =
+          rulesFromOptions === undefined
+            ? rules
+            : rulesFromOptions.concat(rules)
 
         const newOptions = {
           ...optionsToCopy,
           rules: newRules,
+          parentComponentId,
           ParentComponent: StyledComponent,
         }