Merge pull request styled-components#809 from styled-components/v2

Merge v2 back into master

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "env",
+    ["env", { "loose": true }],
     "react"
   ],
   "plugins": [

.jest.native.json

@@ -0,0 +1,9 @@
+{
+  "rootDir": ".",
+  "globals": {
+    "__DEV__": true
+  },
+  "testRegex": "./src/native/test/.*.js$",
+  "preset": "react-native",
+  "testEnvironment": "jsdom"
+}

CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file. If a contri
 
 *The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).*
 
+## [Upcoming Major Release]
+
+- Update css-to-react-native - you'll now need to add units to your React Native styles (see [css-to-react-native](https://github.com/styled-components/css-to-react-native/issues/20), [code mod](https://github.com/styled-components/styled-components-native-code-mod))
+- Update stylis to latest version (see [#496](https://github.com/styled-components/styled-components/pull/496)).
+- Added per-component class names (see [#227](https://github.com/styled-components/styled-components/pull/227)).
+- Added the ability to override one component's styles from another.
+- Injecting an empty class for each instance of a component in development.
+- Added `attrs` constructor for passing extra attributes to the underlying element
+- Added warnings for components generating a lot of classes, thanks to [@vdanchenkov](https://github.com/vdanchenkov). (see [#268](https://github.com/styled-components/styled-components/pull/268))
+- Standardised `styled(Comp)` to work the same in all cases, rather than a special extension case where `Comp` is another Styled Component. `Comp.extend` now covers that case. (see [#518](https://github.com/styled-components/styled-components/pull/518)).
+- Added a separate `no-parser` entrypoint for preprocessed CSS, which doesn't depend on stylis. The preprocessing is part of our babel plugin. (see [babel-plugin-styled-components/#26](https://github.com/styled-components/babel-plugin-styled-components/pull/26))
+- Fix defaultProps used instead of ThemeProvider on first render [@k15a](https://github.com/k15a), restored.
+- Refactor StyledComponent for performance optimization.
+- Prevent leakage of the `innerRef` prop to wrapped child; under the hood it is converted into a normal React `ref`. (see [#592](https://github.com/styled-components/styled-components/issues/592))
+- Pass `innerRef` through to wrapped Styled Components, so that it refers to the actual DOM node. (see [#629](https://github.com/styled-components/styled-components/issues/629))
+- Added a dedicated Server-Side-Rendering API, with optimised rehydration on the client. Keys are now sequential.
+- Add hoisting static (non-React) properties for withTheme HOC, thanks to [@brunolemos](https://github.com/brunolemos). (See [#712](https://github.com/styled-components/styled-components/pull/712))
+- Add `innerRef` support to `withTheme` HOC. (see [#710](https://github.com/styled-components/styled-components/pull/710))
+- Switch to babel-preset-env. (see [#717](https://github.com/styled-components/styled-components/pull/717))
+- Update StyledNativeComponent to match StyledComponent implementation.
+- Fix Theme context for StyledComponent for IE <10. (see [#807](https://github.com/styled-components/styled-components/pull/807))
+- Restore `setNativeProps` in StyledNativeComponent, thanks to [@MatthieuLemoine](https://github.com/MatthieuLemoine). (see [#764](https://github.com/styled-components/styled-components/pull/764))
+
 ## [v1.4.6] - 2017-05-02
 
 ### Added
@@ -131,6 +154,7 @@ All notable changes to this project will be documented in this file. If a contri
 
 ### Added
 
+- Expose API for Server Side rendering: `styleSheet.reset()` and `styleSheet.getCSS()`, thanks to [@thisguychris](https://github.com/thisguychris), (see [#214](https://github.com/styled-components/styled-components/pull/214)) fixes [#124](https://github.com/styled-components/styled-components/issues/124)
 - Added support for deeply nested styles in ReactNative (e.g. `transform`), thanks [@jacobp100](https://github.com/jacobp100). (see [#139](https://github.com/styled-components/styled-components/pull/139))
 - Added support for camelized style properties in ReactNative (e.g. `fontWeight`), thanks [@jacobp100](https://github.com/jacobp100). (see [#145](https://github.com/styled-components/styled-components/pull/145))
 - Properly expose `flow` typings by adding a `flow:build` step and `flow` support docs, thanks to [@ryyppy](https://github.com/ryyppy). (see [#219](https://github.com/styled-components/styled-components/pull/219))

README.md

@@ -146,7 +146,43 @@ export default Button;
   </a>
 </div>
 
-### Overriding component styles
+#### Styling Components instead of Elements
+
+`styled` also works perfectly for styling your own or third-party components, like a `react-router` `<Link />`!
+
+```JS
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+const StyledLink = styled(Link)`
+  color: palevioletred;
+  display: block;
+  margin: 0.5em 0;
+  font-family: Helvetica, Arial, sans-serif;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+```
+
+```JSX
+<Link to="/">Standard, unstyled Link</Link>
+<StyledLink to="/">This Link is styled!</StyledLink>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/NJFAAC4SM">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/JJw4MdX.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
+>
+> You can also pass tag names into the `styled()` call, like so: `styled('div')`. In fact, the styled.tagname helpers are just aliases of `styled('tagname')`!
+
+### Extending styles
 
 Taking the `Button` component from above and removing the primary rules, this is what we're left with – just a normal button:
 
@@ -168,7 +204,7 @@ export default Button;
 
 Let's say someplace else you want to use your button component, but just in this one case you want the color and border color to be `tomato` instead of `palevioletred`. Now you _could_ pass in an interpolated function and change them based on some props, but that's quite a lot of effort for overriding the styles once.
 
-To do this in an easier way you can call `styled` as a function and pass in the previous component. You style that like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
+To do this in an easier way you can call `extend` on the component to generate another. You style it like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
 
 ```JSX
 // TomatoButton.js
@@ -178,7 +214,7 @@ import styled from 'styled-components';
 
 import Button from './Button';
 
-const TomatoButton = styled(Button)`
+const TomatoButton = Button.extend`
   color: tomato;
   border-color: tomato;
 `;
@@ -197,42 +233,6 @@ This is what our `TomatoButton` looks like, even though we have only specified t
 
 <br />
 
-> **Note:** You can also pass tag names into the `styled()` call, like so: `styled('div')`. In fact, the styled.tagname helpers are just aliases of `styled('tagname')`!
-
-#### Third-party components
-
-The above also works perfectly for styling third-party components, like a `react-router` `<Link />`!
-
-```JS
-import styled from 'styled-components';
-import { Link } from 'react-router';
-
-const StyledLink = styled(Link)`
-  color: palevioletred;
-  display: block;
-  margin: 0.5em 0;
-  font-family: Helvetica, Arial, sans-serif;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-```
-
-```JSX
-<Link to="/">Standard, unstyled Link</Link>
-<StyledLink to="/">This Link is styled!</StyledLink>
-```
-
-<div align="center">
-  <a href="https://www.webpackbin.com/bins/-KeeaQG9JUQqZa4UYbFv">
-    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/JJw4MdX.jpg" />
-    <div><em>Live demo</em></div>
-  </a>
-</div>
-
-> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. Likewise, third-party react native components must attach the passed in `style` prop. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
-
 ### Animations
 
 CSS animations with `@keyframes` aren't scoped to a single component but you still don't want them to be global. This is why we export a `keyframes` helper which will generate a unique name for your keyframes. You can then use that unique name throughout your app.
@@ -304,9 +304,9 @@ We also support more complex styles (like `transform`), which would normally be
 ```JS
 const RotatedBox = styled.View`
   transform: rotate(90deg);
-  text-shadow-offset: 10 5;
+  text-shadow-offset: 10px 5px;
   font-variant: small-caps;
-  margin: 5 7 2;
+  margin: 5px 7px 2px;
 `
 ```
 

example/devServer.js

@@ -3,6 +3,14 @@ const exec = require('child_process').exec
 const Express = require('express')
 const watch = require('node-watch')
 
+import fs from 'fs'
+import React from 'react'
+import { renderToString } from  'react-dom/server'
+import { ServerStyleSheet } from '../dist/styled-components'
+import getExample from "./example"
+
+const HTML = fs.readFileSync(__dirname + '/index.html').toString()
+
 const srcPath = __dirname.split('/example')[0] + '/src';
 
 const hotBuild = () => exec('npm run build:dist', (err, stdout, stderr) => {
@@ -23,13 +31,27 @@ watch(srcPath, (filename) => {
 const app = new Express()
 const port = 3000
 
+app.use(Express.static(__dirname))
 app.use(Express.static('dist'))
 
 app.get('/with-perf.html', (req, res) => {
   res.sendFile(path.join(__dirname, 'with-perf.html'))
 })
 
-app.get('/*', (req, res) => {
+app.get('/ssr.html', (req, res) => {
+  const Example = getExample()
+
+  const sheet = new ServerStyleSheet()
+  const html = renderToString(sheet.collectStyles(<Example/>))
+  const css = sheet.getStyleTags()
+  res.send(
+    HTML
+      .replace(/<!-- SSR:HTML -->/, html)
+      .replace(/<!-- SSR:CSS -->/, css)
+  )
+})
+
+app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, 'index.html'))
 })
 

example/example.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import styled, { injectGlobal, keyframes } from '../dist/styled-components'
+
+export default () => {
+  injectGlobal`
+    body {
+      font-family: sans-serif;
+    }
+  `
+
+  // Create a <Title> react component that renders an <h1> which is
+  // centered, palevioletred and sized at 1.5em
+  const Title = styled.h1`
+    font-size: 1.5em;
+    text-align: center;
+    color: palevioletred;
+    animation: ${keyframes`from { opacity: 0; }`} 1s both;
+  `;
+
+  // Create a <Wrapper> react component that renders a <section> with
+  // some padding and a papayawhip background
+  const Wrapper = styled.section`
+    padding: 4em;
+    background: papayawhip;
+  `;
+
+  return class Example extends React.Component {
+    render() {
+      return (
+        <Wrapper>
+          <Title>Hello World, this is my first styled component!</Title>
+        </Wrapper>
+      )
+    }
+  }
+}

example/index.html

@@ -3,29 +3,39 @@
   <head>
     <meta charset="utf-8">
     <title>Basic Example</title>
+    <!-- SSR:CSS -->
   </head>
   <body>
     <h1>Basic Example</h1>
-    <div id="container"></div>
+    <div id="container"><!-- SSR:HTML --></div>
     <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/react-dom-server.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
     <script src="/styled-components.js"></script>
     <script type="text/babel">
-    // Create a <Title> react component that renders an <h1> which is
-    // centered, palevioletred and sized at 1.5em
-    const Title = styled.default.h1`
-      font-size: 1.5em;
-      text-align: center;
-      color: palevioletred;
-    `;
+      styled.injectGlobal`
+    body {
+      font-family: sans-serif;
+    }
+  `
+
+      // Create a <Title> react component that renders an <h1> which is
+      // centered, palevioletred and sized at 1.5em
+      const Title = styled.default.h1`
+    font-size: 1.5em;
+    text-align: center;
+    color: palevioletred;
+    animation: ${styled.keyframes`from { opacity: 0; }`} 1s both;
+  `;
+
+      // Create a <Wrapper> react component that renders a <section> with
+      // some padding and a papayawhip background
+      const Wrapper = styled.default.section`
+    padding: 4em;
+    background: papayawhip;
+  `;
 
-    // Create a <Wrapper> react component that renders a <section> with
-    // some padding and a papayawhip background
-    const Wrapper = styled.default.section`
-      padding: 4em;
-      background: papayawhip;
-    `;
       class Example extends React.Component {
         render() {
           return (