styled-components 2.1.1 → 2.2.1

package/src/test/ssr.test.js

@@ -1,11 +1,18 @@
+/**
+ * @jest-environment node
+ */
+
 import React from 'react'
-import { renderToString } from  'react-dom/server'
+import { renderToString } from 'react-dom/server'
 import ServerStyleSheet from '../models/ServerStyleSheet'
-import { resetStyled, stripWhitespace, nameGenerator } from './utils'
+import { resetStyled } from './utils'
 import _injectGlobal from '../constructors/injectGlobal'
 import _keyframes from '../constructors/keyframes'
 import stringifyRules from '../utils/stringifyRules'
 import css from '../constructors/css'
+
+jest.mock('../utils/nonce')
+
 const injectGlobal = _injectGlobal(stringifyRules, css)
 
 let index = 0
@@ -13,13 +20,11 @@ const keyframes = _keyframes(() => `keyframe_${index++}`, stringifyRules, css)
 
 let styled
 
-const format = css => stripWhitespace(css)
-  .replace(/ {/g, "{")
-  .replace(/(\*\/|[}>])/g, "$1\n")
-  .replace(/\n\s+/g, "\n")
-
 describe('ssr', () => {
   beforeEach(() => {
+    // eslint-disable-next-line
+    require('../utils/nonce').mockReset()
+
     styled = resetStyled(true)
   })
 
@@ -30,17 +35,10 @@ describe('ssr', () => {
 
     const sheet = new ServerStyleSheet()
     const html = renderToString(sheet.collectStyles(<Heading>Hello SSR!</Heading>))
-    const css = format(sheet.getStyleTags())
-
-    expect(html).toEqual('<h1 class="sc-a b" data-reactroot="" data-reactid="1" data-react-checksum="197727696">Hello SSR!</h1>')
-    expect(css).toEqual(format(`
-      <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">
-      /* sc-component-id: sc-a */
-      .sc-a {}
-      .b { color: red; }
+    const css = sheet.getStyleTags()
 
-      </style>
-    `))
+    expect(html).toMatchSnapshot()
+    expect(css).toMatchSnapshot()
   })
 
   it('should extract both global and local CSS', () => {
@@ -53,22 +51,29 @@ describe('ssr', () => {
 
     const sheet = new ServerStyleSheet()
     const html = renderToString(sheet.collectStyles(<Heading>Hello SSR!</Heading>))
-    const css = format(sheet.getStyleTags())
+    const css = sheet.getStyleTags()
 
-    expect(html).toEqual('<h1 class="sc-a b" data-reactroot="" data-reactid="1" data-react-checksum="197727696">Hello SSR!</h1>')
-    expect(css).toEqual(format(`
-      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
-      /* sc-component-id: sc-global-2303210225 */
+    expect(html).toMatchSnapshot()
+    expect(css).toMatchSnapshot()
+  })
+
+  it('should add a nonce to the stylesheet if webpack nonce is detected in the global scope', () => {
+    // eslint-disable-next-line
+    require('../utils/nonce').mockImplementation(() => 'foo')
+
+    injectGlobal`
       body { background: papayawhip; }
+    `
+    const Heading = styled.h1`
+      color: red;
+    `
 
-      </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; }
+    const sheet = new ServerStyleSheet()
+    const html = renderToString(sheet.collectStyles(<Heading>Hello SSR!</Heading>))
+    const css = sheet.getStyleTags()
 
-      </style>
-    `))
+    expect(html).toMatchSnapshot()
+    expect(css).toMatchSnapshot()
   })
 
   it('should render CSS in the order the components were defined, not rendered', () => {
@@ -86,20 +91,10 @@ describe('ssr', () => {
         <ONE/>
       </div>
     ))
-    const css = format(sheet.getStyleTags())
-
-    expect(html).toEqual('<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>')
-    expect(css).toEqual(format(`
-      <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>
-    `))
+    const css = sheet.getStyleTags()
+
+    expect(html).toMatchSnapshot()
+    expect(css).toMatchSnapshot()
   })
 
   it('should share global styles but keep renders separate', () => {
@@ -115,37 +110,16 @@ describe('ssr', () => {
 
     const sheetOne = new ServerStyleSheet()
     const htmlOne = renderToString(sheetOne.collectStyles(<PageOne>Camera One!</PageOne>))
-    const cssOne = format(sheetOne.getStyleTags())
+    const cssOne = sheetOne.getStyleTags()
 
     const sheetTwo = new ServerStyleSheet()
     const htmlTwo = renderToString(sheetTwo.collectStyles(<PageTwo>Camera Two!</PageTwo>))
-    const cssTwo = format(sheetTwo.getStyleTags())
+    const cssTwo = sheetTwo.getStyleTags()
 
-    expect(htmlOne).toEqual('<h1 class="PageOne a" data-reactroot="" data-reactid="1" data-react-checksum="2014320521">Camera One!</h1>')
-    expect(cssOne).toEqual(format(`
-      <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>
-    `))
-
-    expect(htmlTwo).toEqual('<h2 class="PageTwo b" data-reactroot="" data-reactid="1" data-react-checksum="2124224444">Camera Two!</h2>')
-    expect(cssTwo).toEqual(format(`
-      <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>
-    `))
+    expect(htmlOne).toMatchSnapshot()
+    expect(cssOne).toMatchSnapshot()
+    expect(htmlTwo).toMatchSnapshot()
+    expect(cssTwo).toMatchSnapshot()
   })
 
   it('should allow global styles to be injected during rendering', () => {
@@ -160,54 +134,21 @@ describe('ssr', () => {
     const sheetOne = new ServerStyleSheet()
     const htmlOne = renderToString(sheetOne.collectStyles(<PageOne>Camera One!</PageOne>))
     injectGlobal`html::before { content: 'During first render'; }`
-    const cssOne = format(sheetOne.getStyleTags())
+    const cssOne = sheetOne.getStyleTags()
 
     injectGlobal`html::before { content: 'Between renders'; }`
 
     const sheetTwo = new ServerStyleSheet()
     injectGlobal`html::before { content: 'During second render'; }`
     const htmlTwo = renderToString(sheetTwo.collectStyles(<PageTwo>Camera Two!</PageTwo>))
-    const cssTwo = format(sheetTwo.getStyleTags())
+    const cssTwo = sheetTwo.getStyleTags()
 
     injectGlobal`html::before { content: 'After both renders'; }`
 
-    expect(htmlOne).toEqual('<h1 class="PageOne a" data-reactroot="" data-reactid="1" data-react-checksum="2014320521">Camera One!</h1>')
-    expect(cssOne).toEqual(format(`
-      <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>
-    `))
-
-    expect(htmlTwo).toEqual('<h2 class="PageTwo b" data-reactroot="" data-reactid="1" data-react-checksum="2124224444">Camera Two!</h2>')
-    expect(cssTwo).toEqual(format(`
-      <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>
-    `))
+    expect(htmlOne).toMatchSnapshot()
+    expect(cssOne).toMatchSnapshot()
+    expect(htmlTwo).toMatchSnapshot()
+    expect(cssTwo).toMatchSnapshot()
   })
 
   it('should dispatch global styles to each ServerStyleSheet', () => {
@@ -222,21 +163,47 @@ describe('ssr', () => {
     const html = renderToString(sheet.collectStyles(
       <Header animation={keyframes`0% { opacity: 0; }`}/>
     ))
-    const css = format(sheet.getStyleTags())
+    const css = sheet.getStyleTags()
+
+    expect(html).toMatchSnapshot()
+    expect(css).toMatchSnapshot()
+  })
+
+  it('should return a generated React style element', () => {
+    injectGlobal`
+      body { background: papayawhip; }
+    `
+    const Heading = styled.h1`
+      color: red;
+    `
+
+    const sheet = new ServerStyleSheet()
+    const html = renderToString(sheet.collectStyles(<Heading>Hello SSR!</Heading>))
+    const elements = sheet.getStyleElement()
+
+    expect(elements).toHaveLength(2);
+
+    expect(elements[0].props).toMatchSnapshot()
+    expect(elements[1].props).toMatchSnapshot()
+  })
+
+  it('should return a generated React style element with nonce if webpack nonce is preset in the global scope', () => {
+    // eslint-disable-next-line
+    require('../utils/nonce').mockImplementation(() => 'foo')
 
-    expect(html).toEqual('<h1 class="Header a" data-reactroot="" data-reactid="1" data-react-checksum="1829114759"></h1>')
-    expect(css).toEqual(format(`
-      <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
-      /* sc-component-id: sc-global-2303210225 */
+    injectGlobal`
       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>
-    `))
+    `
+    const Heading = styled.h1`
+      color: red;
+    `
+
+    const sheet = new ServerStyleSheet()
+    const html = renderToString(sheet.collectStyles(<Heading>Hello SSR!</Heading>))
+    const elements = sheet.getStyleElement()
+
+    expect(elements).toHaveLength(2);
+    expect(elements[0].props.nonce).toBe('foo');
+    expect(elements[1].props.nonce).toBe('foo');
   })
 })

package/src/test/styles.test.js

@@ -2,7 +2,14 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
+import * as nonce from '../utils/nonce';
 import { resetStyled, expectCSSMatches } from './utils'
+import _injectGlobal from '../constructors/injectGlobal'
+import stringifyRules from '../utils/stringifyRules'
+import css from '../constructors/css'
+const injectGlobal = _injectGlobal(stringifyRules, css)
+
+jest.mock('../utils/nonce')
 
 let styled
 
@@ -169,4 +176,49 @@ describe('with styles', () => {
         }
       `)
   })
+
+  it('should add a webpack nonce to the style tags if one is available in the global scope', () => {
+    jest.spyOn(nonce, 'default').mockImplementation(() => 'foo')
+
+    const rule = 'color: blue;'
+    const Comp = styled.div`
+        ${rule}
+      `
+    shallow(<Comp />)
+    expectCSSMatches(`
+        .sc-a {}
+        .b {
+          color: blue;
+        }
+      `)
+
+    Array.from(document.querySelectorAll('style')).forEach(el => expect(el.getAttribute('nonce')).toBe('foo'))
+  })
+
+  it('should add a webpack nonce to the global style tags if one is available in the global scope', () => {
+    // eslint-disable-next-line no-underscore-dangle
+    window.__webpack_nonce__ = 'foo'
+
+    injectGlobal`
+        html {
+          background: red;
+        }
+      `
+    const rule = 'color: blue;'
+    const Comp = styled.div`
+        ${rule}
+      `
+    shallow(<Comp />)
+    expectCSSMatches(`
+        html {
+          background: red;
+        }
+        .sc-a {}
+        .b {
+          color: blue;
+        }
+      `)
+
+    Array.from(document.querySelectorAll('style')).forEach(el => expect(el.getAttribute('nonce')).toBe('foo'))
+  })
 })

package/src/test/utils.js

@@ -23,8 +23,11 @@ const classNames = () => seededClassnames.shift() || String.fromCodePoint(97 + i
 
 export const seedNextClassnames = (names: Array<string>) => seededClassnames = names
 export const resetStyled = (isServer: boolean = false) => {
-  if (!document.head) throw new Error("Missing document <head>")
-  document.head.innerHTML = ''
+  if (!isServer) {
+    if (!document.head) throw new Error("Missing document <head>")
+    document.head.innerHTML = ''
+  }
+
   StyleSheet.reset(isServer)
   index = 0
 

package/src/utils/create-broadcast.js

@@ -7,29 +7,43 @@
 
 export type Broadcast = {
   publish: (value: mixed) => void,
-  subscribe: (listener: (currentValue: mixed) => void) => () => void
+  subscribe: (listener: (currentValue: mixed) => void) => number,
+  unsubscribe: (number) => void,
 }
 
-const createBroadcast = (initialValue: mixed): Broadcast => {
-  let listeners = []
-  let currentValue = initialValue
+const createBroadcast = (initialState: mixed): Broadcast => {
+  const listeners = {}
+  let id = 0
+  let state = initialState
 
-  return {
-    publish(value: mixed) {
-      currentValue = value
-      listeners.forEach(listener => listener(currentValue))
-    },
-    subscribe(listener) {
-      listeners.push(listener)
+  function publish(nextState: mixed) {
+    state = nextState
 
-      // Publish to this subscriber once immediately.
-      listener(currentValue)
-
-      return () => {
-        listeners = listeners.filter(item => item !== listener)
+     // eslint-disable-next-line guard-for-in, no-restricted-syntax
+    for (const key in listeners) {
+      const listener = listeners[key]
+      if (listener === undefined) {
+        // eslint-disable-next-line no-continue
+        continue
       }
-    },
+
+      listener(state)
+    }
+  }
+
+  function subscribe(listener) {
+    const currentId = id
+    listeners[currentId] = listener
+    id += 1
+    listener(state)
+    return currentId
   }
+
+  function unsubscribe(unsubID: number) {
+    listeners[unsubID] = undefined
+  }
+
+  return { publish, subscribe, unsubscribe }
 }
 
 export default createBroadcast

package/src/utils/domElements.js

@@ -66,6 +66,7 @@ export default [
   'main',
   'map',
   'mark',
+  'marquee',
   'menu',
   'menuitem',
   'meta',

package/src/utils/flatten.js

@@ -5,13 +5,23 @@ import isPlainObject from 'is-plain-object'
 import type { Interpolation } from '../types'
 
 export const objToCss = (obj: Object, prevKey?: string): string => {
-  const css = Object.keys(obj).map(key => {
-    if (isPlainObject(obj[key])) return objToCss(obj[key], key)
-    return `${hyphenate(key)}: ${obj[key]};`
-  }).join(' ')
-  return prevKey ? `${prevKey} {
+  const css = Object.keys(obj)
+    .filter(key => {
+      const chunk = obj[key]
+      return (
+        chunk !== undefined && chunk !== null && chunk !== false && chunk !== ''
+      )
+    })
+    .map(key => {
+      if (isPlainObject(obj[key])) return objToCss(obj[key], key)
+      return `${hyphenate(key)}: ${obj[key]};`
+    })
+    .join(' ')
+  return prevKey
+    ? `${prevKey} {
   ${css}
-}` : css
+}`
+    : css
 }
 
 const flatten = (chunks: Array<Interpolation>, executionContext: ?Object): Array<Interpolation> => (

package/src/utils/generateAlphabeticName.js

@@ -10,7 +10,7 @@ const generateAlphabeticName = (code: number): string => {
   for (
     x = code;
     x > charsLength;
-    x = Math.floor(x / chars.length)
+    x = Math.floor(x / charsLength)
   ) {
     name = chars[x % charsLength] + name
   }

package/src/utils/nonce.js

@@ -0,0 +1,6 @@
+// @flow
+/* eslint-disable camelcase, no-undef */
+
+declare var __webpack_nonce__: string
+
+export default () => typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null

package/src/utils/once.js

@@ -0,0 +1,12 @@
+// @flow
+// Helper to call a given function, only once
+export default (cb: () => any) => {
+  let called = false
+
+  return () => {
+    if (!called) {
+      called = true
+      cb()
+    }
+  }
+}

package/typings/styled-components.d.ts

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { StatelessComponent, ComponentClass, PureComponent, ReactElement } from "react";
 
-import { HTMLTags, SVGTags } from "./tags";
-
 type Component<P> = ComponentClass<P> | StatelessComponent<P>;
 
 export interface ThemeProps<T> {
@@ -33,8 +31,7 @@ type Attrs<P, A extends Partial<P>, T> = {
 export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<O, T>> {
   extend: ThemedStyledFunction<P, T, O>;
 
-  withComponent<K extends keyof HTMLTags>(tag: K): StyledComponentClass<React.HTMLProps<HTMLTags[K]>, T, O>;
-  withComponent<K extends keyof SVGTags>(tag: K): StyledComponentClass<React.SVGAttributes<SVGTags[K]>, T, O>;
+  withComponent<K extends keyof JSX.IntrinsicElements>(tag: K): StyledComponentClass<JSX.IntrinsicElements[K], T, O>;
   withComponent(element: ComponentClass<P>): StyledComponentClass<P, T, O>;
 }
 
@@ -46,24 +43,16 @@ export interface ThemedStyledFunction<P, T, O = P> {
 
 export type StyledFunction<P> = ThemedStyledFunction<P, any>;
 
-export type ThemedHtmlStyledFunction<E, T> = ThemedStyledFunction<React.HTMLProps<E>, T>;
-export type HtmlStyledFunction<E> = ThemedHtmlStyledFunction<E, any>;
-
-export type ThemedSvgStyledFunction<E extends SVGElement, T> = ThemedStyledFunction<React.SVGAttributes<E>, T>;
-export type SvgStyledFunction<E extends SVGElement> = ThemedSvgStyledFunction<E, any>;
-
-type ThemedStyledComponentFactoriesHTML<T> = {
-    [K in keyof HTMLTags]: ThemedHtmlStyledFunction<HTMLTags[K], T>;
+type ThemedStyledComponentFactories<T> = {
+    [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<JSX.IntrinsicElements[TTag], T>;
 };
 
-type ThemedStyledComponentFactoriesSVG<T> = {
-    [K in keyof SVGTags]: ThemedSvgStyledFunction<SVGTags[K], T>;
-};
-
-type ThemedStyledComponentFactories<T> = ThemedStyledComponentFactoriesHTML<T> & ThemedStyledComponentFactoriesSVG<T>;
-
 export interface ThemedBaseStyledInterface<T> extends ThemedStyledComponentFactories<T> {
-  <P>(component: Component<P>): ThemedStyledFunction<P, T>;
+  <P, TTag extends keyof JSX.IntrinsicElements>(tag: TTag): ThemedStyledFunction<P, T, P & JSX.IntrinsicElements[TTag]>;
+  <P, O>(component: StyledComponentClass<P, T, O>): ThemedStyledFunction<P, T, O>;
+  <P extends { theme: T; }>(component: React.ComponentClass<P>): ThemedStyledFunction<P, T, WithOptionalTheme<P, T>>;
+  <P>(component: React.ComponentClass<P>): ThemedStyledFunction<P, T>;
+  <P extends { [prop: string]: any; theme?: T; }>(component: React.StatelessComponent<P>): ThemedStyledFunction<P, T, WithOptionalTheme<P, T>>;
 }
 export type BaseStyledInterface = ThemedBaseStyledInterface<any>;
 
@@ -80,13 +69,18 @@ export interface ThemedCssFunction<T> {
   <P>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): FlattenInterpolation<ThemedStyledProps<P, T>>[];
 }
 
+// Helper type operators
+type Diff<T extends string, U extends string> = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T];
+type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
+type WithOptionalTheme<P extends { theme?: T; }, T> = Omit<P, "theme"> & { theme?: T; };
+
 export interface ThemedStyledComponentsModule<T> {
   default: ThemedStyledInterface<T>;
 
   css: ThemedCssFunction<T>;
   keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
   injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
-  withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
+  withTheme<P extends { theme?: T; }>(component: Component<P>): ComponentClass<WithOptionalTheme<P, T>>;
 
   ThemeProvider: ThemeProviderComponent<T>;
 }
@@ -94,7 +88,7 @@ export interface ThemedStyledComponentsModule<T> {
 declare const styled: StyledInterface;
 
 export const css: ThemedCssFunction<any>;
-export function withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
+export function withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<WithOptionalTheme<P, T>>;
 
 export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
 export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;