diff --git a/.flowconfig b/.flowconfig
index d5ac5299b..3a3b01e6e 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -2,6 +2,10 @@
 .*/node_modules/flow-remove-types/.*
 .*/node_modules/react-native/.*
 .*/node_modules/rollup-plugin-flow/.*
+.*/node_modules/animated/.*
+.*/node_modules/react-sketchapp/.*
+.*/node_modules/react-native-web/.*
+.*/node_modules/babel-plugin-transform-react-remove-prop-types/.*
 .*/dist/.*
 .*/lib/.*
 .*/node_modules/babel-plugin-flow-react-proptypes/src/__test__/.*
diff --git a/.jest.primitives.json b/.jest.primitives.json
new file mode 100644
index 000000000..b25cbc253
--- /dev/null
+++ b/.jest.primitives.json
@@ -0,0 +1,10 @@
+{
+  "rootDir": ".",
+  "globals": {
+    "__DEV__": true
+  },
+  "testRegex": "./src/primitives/test/.*.js$",
+  "moduleFileExtensions": ["ios.js", "js"],
+  "preset": "react-native",
+  "testEnvironment": "jsdom"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6f7e2949..7a29c5535 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,13 @@ All notable changes to this project will be documented in this file. If a contri
 
 ## [Unreleased]
 
-- Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829))
+- Fixed `extend` not working with 3 or more inheritances, thanks to [@brunolemos](https://twitter.com/brunolemos). (see [#871](https://github.com/styled-components/styled-components/pull/871))
+- Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851))
+- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840))
+- Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876))
+- Remove dead code used previously for auto-prefixing. (see [#881](https://github.com/styled-components/styled-components/pull/881))
+- Added missing v2.0 APIs to TypeScript typings, thanks to [@patrick91](https://github.com/patrick91), [@igorbek](https://github.com/igorbek) (see [#837](https://github.com/styled-components/styled-components/pull/837), [#882](https://github.com/styled-components/styled-components/pull/882))
+- Added [`react-primitives`](https://github.com/lelandrichardson/react-primitives) target, thanks to [@mathieudutour](https://github.com/mathieudutour) (see [#904](https://github.com/styled-components/styled-components/pull/904)
 
 ## [v2.0.0] - 2017-05-25
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 25b832364..5ee22c382 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ Please also give the code of conduct a read.
   Also make sure that no one else is already working on it. We don't want you to be
   disappointed.
 
-2. Fork, then clone: `git clone httpsL://github.com/YOUR_USERNAME/styled-components.git`
+2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/styled-components.git`
 
 3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`
 
@@ -35,4 +35,3 @@ Run `npm install` and edit code in the `src/` folder. It's luckily very simple!
 When you commit our pre-commit hook will run, which executes `lint-staged`. It will run
 the linter automatically and warn you, if the code you've written doesn't comply with our
 code style.
-
diff --git a/README.md b/README.md
index 2478c8119..7e43a3ecb 100644
--- a/README.md
+++ b/README.md
@@ -10,10 +10,7 @@ npm install --save styled-components
 ```
 
 [![npm](https://img.shields.io/npm/v/styled-components.svg)](https://www.npmjs.com/package/styled-components)
-[![Travis Build Status](https://travis-ci.org/styled-components/styled-components.svg?branch=master)](https://travis-ci.org/styled-components/styled-components)
-[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/gruntjs/grunt?branch=master&svg=true)](https://ci.appveyor.com/project/mxstbr/styled-components)
-[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=styled-components)
-[![gitter](https://camo.githubusercontent.com/54dc79dc7da6b76b17bc8013342da9b4266d993c/68747470733a2f2f6261646765732e6769747465722e696d2f6d78737462722f72656163742d626f696c6572706c6174652e737667)](https://gitter.im/styled-components/styled-components)
+[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/styled-components)
 
 ![gzip size](http://img.badgesize.io/https://unpkg.com/styled-components/dist/styled-components.min.js?compression=gzip&label=gzip%20size)
 ![size](http://img.badgesize.io/https://unpkg.com/styled-components/dist/styled-components.min.js?label=size)
@@ -71,7 +68,9 @@ As soon as that PR is merged and a new version released, all you'll have to do i
 
 ### Visual Studio Code
 
-The [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) extension provides syntax highlighting inside your Javascript files. You can install it as usual from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components).
+[**@gandm**](https://github.com/gandm)'s language-babel has been ported to VSCode under the name [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel) by [Michael McDermott](https://twitter.com/_mgmcdermott). It provides the same all-in-one solution for Babel syntax highlighting with styled-components included.
+
+If you would like to keep your current JavaScript syntax highlighting, you can use the [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) extension to provide styled-components syntax highlighting inside your Javascript files. You can install it as usual from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components).
 
 ### VIM / NeoVim
 The [`vim-styled-components`](https://github.com/fleischie/vim-styled-components) plugin gives you syntax highlighting inside your Javascript files. Install it with your usual plugin manager like [Plug](https://github.com/junegunn/vim-plug), [Vundle](https://github.com/VundleVim/Vundle.vim), [Pathogen](https://github.com/tpope/vim-pathogen), etc.
@@ -102,6 +101,8 @@ We could use your help to get syntax highlighting support to other editors! If y
 - [grid-styled](https://github.com/jxnblk/grid-styled): Responsive grid system ([demo](http://jxnblk.com/grid-styled/))
 - [Hedron](http://github.com/jsbros/hedron): A no-frills flex-box grid system.
 - [styled-components-grid](https://github.com/jameslnewell/styled-components-grid): Responsive grid components for `styled-components`.
+- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html))
+- [react-flexa](https://github.com/aaronvanston/react-flexa): React grid system implementing the flexbox CSS API responsively.
 
 #### Helpers
 - [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demo](http://www.webpackbin.com/N1EKUqgvG))
@@ -110,12 +111,13 @@ We could use your help to get syntax highlighting support to other editors! If y
 - [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components.
 - [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s)
 - [react-create-component-from-tag-prop](https://github.com/jameslnewell/react-create-component-from-tag-prop): Create a react component from a tag prop. Lets your users to choose which HTML elements get styled by your 💅 styled-components.
+- [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};`
+- [styled-map](https://github.com/scf4/styled-map) - Super simple lib to map props to styles with `styled-components`
 
 ### Boilerplates
 - [react-redux-styled-hot-universal](https://github.com/krasevych/react-redux-styled-hot-universal) (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...)
 - [ARc](https://github.com/diegohaz/arc): Atomic React App boilerplate with styled components ([demo](https://diegohaz.github.io/arc))
 - [react-boilerplate](https://github.com/mxstbr/react-boilerplate): A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
-- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html))
 - [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate)
 - [Scalable React TypeScript Boilerplate](https://github.com/RyanCCollins/scalable-react-ts-boilerplate)
 - [Superstylin'](https://github.com/bntzio/gatsby-starter-superstylin): A Gatsby starter with styled-components 💅 ([demo](https://superstylin.netlify.com/))
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
index a1c7ef5af..b20cc1192 100644
--- a/docs/tips-and-tricks.md
+++ b/docs/tips-and-tricks.md
@@ -134,7 +134,7 @@ const Box = styled.div`
 
 And voila! 💅
 
-*Not clear on why `css` is needed in the above example? Check the article on [Tagged Template Literals](./tagged-template-literals.md)*
+*Not clear on why `css` is needed in the above example? Check the article on [Tagged Template Literals](https://www.styled-components.com/docs/advanced#tagged-template-literals)*
 
 ### Media Templates
 
diff --git a/flow-typed/inline-style-prefixer_vx.x.x.js b/flow-typed/inline-style-prefixer_vx.x.x.js
deleted file mode 100644
index 428e4b5d2..000000000
--- a/flow-typed/inline-style-prefixer_vx.x.x.js
+++ /dev/null
@@ -1,256 +0,0 @@
-// flow-typed signature: 2ab55e903767f1d4cde6a118971f3c19
-// flow-typed version: <<STUB>>/inline-style-prefixer_v2.0.4/flow_v0.34.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'inline-style-prefixer'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'inline-style-prefixer' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'inline-style-prefixer/dist/inline-style-prefix-all' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/dist/inline-style-prefix-all.min' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/dist/inline-style-prefixer' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/dist/inline-style-prefixer.min' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/calc' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/flex' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/flexboxIE' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/flexboxOld' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/grabCursor' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/gradient' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/sizing' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/transition' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/plugins/zoomCursor' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/Prefixer' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/prefixProps' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/calc' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/cursor' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/flex' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/flexboxIE' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/flexboxOld' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/gradient' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/sizing' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/plugins/transition' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/prefixAll' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/static/prefixProps' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/capitalizeString' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/getBrowserInformation' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/getPrefixedKeyframes' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/getPrefixedValue' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/isPrefixedValue' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/joinPrefixedValue' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/lib/utils/unprefixProperty' {
-  declare module.exports: any;
-}
-
-declare module 'inline-style-prefixer/static' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'inline-style-prefixer/dist/inline-style-prefix-all.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefix-all'>;
-}
-declare module 'inline-style-prefixer/dist/inline-style-prefix-all.min.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefix-all.min'>;
-}
-declare module 'inline-style-prefixer/dist/inline-style-prefixer.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefixer'>;
-}
-declare module 'inline-style-prefixer/dist/inline-style-prefixer.min.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefixer.min'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/calc.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/calc'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/flex.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/flex'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/flexboxIE.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/flexboxIE'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/flexboxOld.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/flexboxOld'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/grabCursor.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/grabCursor'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/gradient.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/gradient'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/sizing.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/sizing'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/transition.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/transition'>;
-}
-declare module 'inline-style-prefixer/lib/plugins/zoomCursor.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/zoomCursor'>;
-}
-declare module 'inline-style-prefixer/lib/Prefixer.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/Prefixer'>;
-}
-declare module 'inline-style-prefixer/lib/prefixProps.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/prefixProps'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/calc.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/calc'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/cursor.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/cursor'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/flex.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/flex'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/flexboxIE.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/flexboxIE'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/flexboxOld.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/flexboxOld'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/gradient.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/gradient'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/sizing.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/sizing'>;
-}
-declare module 'inline-style-prefixer/lib/static/plugins/transition.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/transition'>;
-}
-declare module 'inline-style-prefixer/lib/static/prefixAll.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/prefixAll'>;
-}
-declare module 'inline-style-prefixer/lib/static/prefixProps.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/static/prefixProps'>;
-}
-declare module 'inline-style-prefixer/lib/utils/capitalizeString.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/capitalizeString'>;
-}
-declare module 'inline-style-prefixer/lib/utils/getBrowserInformation.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/getBrowserInformation'>;
-}
-declare module 'inline-style-prefixer/lib/utils/getPrefixedKeyframes.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/getPrefixedKeyframes'>;
-}
-declare module 'inline-style-prefixer/lib/utils/getPrefixedValue.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/getPrefixedValue'>;
-}
-declare module 'inline-style-prefixer/lib/utils/isPrefixedValue.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/isPrefixedValue'>;
-}
-declare module 'inline-style-prefixer/lib/utils/joinPrefixedValue.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/joinPrefixedValue'>;
-}
-declare module 'inline-style-prefixer/lib/utils/unprefixProperty.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/lib/utils/unprefixProperty'>;
-}
-declare module 'inline-style-prefixer/static.js' {
-  declare module.exports: $Exports<'inline-style-prefixer/static'>;
-}
diff --git a/package.json b/package.json
index 616498314..566ea854c 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,15 @@
 {
   "name": "styled-components",
-  "version": "2.0.0",
+  "version": "2.0.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",
   "jsnext:main": "dist/styled-components.es.js",
   "module": "dist/styled-components.es.js",
   "scripts": {
-    "build": "npm run build:lib && npm run build:dist && npm run build:flow",
+    "build": "npm run build:lib && npm run build:dist",
     "prebuild:lib": "rimraf lib/*",
     "build:lib": "babel --out-dir lib src",
-    "build:flow": "flow-copy-source -v -i '{**/test/*.js,**/*.test.js}' src lib",
     "prebuild:dist": "rimraf dist/*",
     "build:dist": "rollup -c && rollup -c --environment ESBUNDLE && rollup -c --environment PRODUCTION",
     "build:watch": "npm run build:lib -- --watch",
@@ -19,11 +18,13 @@
     "test:web:watch": "npm run test:web -- --watch",
     "test:native": "jest -c .jest.native.json",
     "test:native:watch": "npm run test:native -- --watch",
+    "test:primitives": "jest -c .jest.primitives.json",
+    "test:primitives:watch": "npm run test:primitives -- --watch",
     "flow": "flow check",
     "flow:watch": "flow-watch",
     "lint": "eslint src",
     "tslint": "tslint typings/*.ts native/*.ts",
-    "typescript": "tsc ./typings/styled-components-test.tsx ./typings/styled-components-native-test.tsx ./typings/themed-tests/mytheme-styled-components-test.tsx --noEmit --jsx react --target es6 --module es2015 --moduleResolution node",
+    "typescript": "tsc --project ./typings/tests",
     "prepublish": "npm run build",
     "lint-staged": "lint-staged",
     "dev": "babel-node example/devServer.js"
@@ -33,7 +34,6 @@
     "url": "git+https://github.com/styled-components/styled-components.git"
   },
   "files": [
-    "native.js",
     "no-parser.js",
     "CONTRIBUTING.md",
     "CODE_OF_CONDUCT.md",
@@ -42,6 +42,7 @@
     "flow-typed",
     "lib",
     "native",
+    "primitives",
     "src",
     "typings"
   ],
@@ -62,16 +63,16 @@
     "css-to-react-native": "^2.0.3",
     "fbjs": "^0.8.9",
     "hoist-non-react-statics": "^1.2.0",
-    "inline-style-prefixer": "^2.0.5",
     "is-function": "^1.0.1",
     "is-plain-object": "^2.0.1",
     "prop-types": "^15.5.4",
-    "stylis": "^3.0.4",
+    "stylis": "^3.0.19",
     "supports-color": "^3.2.3"
   },
   "devDependencies": {
-    "@types/react": "^0.14.55",
-    "@types/react-native": "^0.37.5",
+    "@types/react": "^15.0.25",
+    "@types/react-dom": "^15.5.0",
+    "@types/react-native": "^0.44.4",
     "babel-cli": "^6.22.2",
     "babel-core": "^6.17.0",
     "babel-eslint": "^7.1.1",
@@ -96,7 +97,7 @@
     "eslint-plugin-jsx-a11y": "^2.0.2",
     "eslint-plugin-react": "^6.8.0",
     "express": "^4.14.1",
-    "flow-bin": "^0.43.1",
+    "flow-bin": "^0.47.0",
     "flow-copy-source": "^1.1.0",
     "flow-watch": "^1.1.1",
     "jest": "^19.0.2",
@@ -108,6 +109,7 @@
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.5.4",
     "react-native": "^0.39.2",
+    "react-primitives": "^0.4.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.37.0",
     "rollup-plugin-babel": "^2.7.1",
@@ -120,7 +122,7 @@
     "rollup-plugin-uglify": "^1.0.1",
     "rollup-plugin-visualizer": "^0.1.5",
     "tslint": "^4.3.1",
-    "typescript": "^2.1.5"
+    "typescript": "^2.3.3"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0-0"
@@ -130,7 +132,8 @@
       "<rootDir>/src/"
     ],
     "testPathIgnorePatterns": [
-      "<rootDir>/src/native"
+      "<rootDir>/src/native",
+      "<rootDir>/src/primitives"
     ]
   },
   "lint-staged": {
diff --git a/primitives/index.d.ts b/primitives/index.d.ts
new file mode 100644
index 000000000..e2f567d80
--- /dev/null
+++ b/primitives/index.d.ts
@@ -0,0 +1,33 @@
+import * as ReactPrimitives from "react-primitives";
+import * as React from "react";
+import { StatelessComponent, ComponentClass } from "react";
+
+export {
+  ThemeProps,
+  ThemeProvider,
+  Interpolation,
+  InterpolationValue,
+  InterpolationFunction,
+  OuterStyledProps,
+  StyledFunction,
+  BaseStyledInterface,
+  css,
+  withTheme,
+} from "..";
+
+import { StyledFunction, BaseStyledInterface } from "..";
+
+type Component<P> = ComponentClass<P> | StatelessComponent<P>;
+
+export type ReactPrimitivesStyledFunction<P> = StyledFunction<P>;
+
+export interface StyledInterface extends BaseStyledInterface {
+  Image: ReactPrimitivesStyledFunction<ReactPrimitives.Image>;
+  Text: ReactPrimitivesStyledFunction<ReactPrimitives.Text>;
+  Touchable: ReactPrimitivesStyledFunction<ReactPrimitives.Touchable>;
+  View: ReactPrimitivesStyledFunction<ReactPrimitives.View>;
+}
+
+declare const styled: StyledInterface;
+
+export default styled;
diff --git a/native.js b/primitives/index.js
similarity index 56%
rename from native.js
rename to primitives/index.js
index fc9b051fc..0908ee1fd 100644
--- a/native.js
+++ b/primitives/index.js
@@ -1,2 +1,2 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
-module.exports = require('./lib/native')
+module.exports = require('../lib/primitives')
diff --git a/src/models/InlineStyle.js b/src/models/InlineStyle.js
index 81a31cc87..62771b2e9 100644
--- a/src/models/InlineStyle.js
+++ b/src/models/InlineStyle.js
@@ -1,10 +1,9 @@
 // @flow
 /* eslint-disable import/no-unresolved */
-import { StyleSheet } from 'react-native'
 import transformDeclPairs from 'css-to-react-native'
 
 import hashStr from '../vendor/glamor/hash'
-import type { RuleSet } from '../types'
+import type { RuleSet, StyleSheet } from '../types'
 import flatten from '../utils/flatten'
 import parse from '../vendor/postcss-safe-parser/parse'
 
@@ -17,42 +16,46 @@ export const resetStyleCache = () => {
 /*
  InlineStyle takes arbitrary CSS and generates a flat object
  */
-export default class InlineStyle {
-  rules: RuleSet
+export default (styleSheet: StyleSheet) => {
+  class InlineStyle {
+    rules: RuleSet
 
-  constructor(rules: RuleSet) {
-    this.rules = rules
-  }
+    constructor(rules: RuleSet) {
+      this.rules = rules
+    }
 
-  generateStyleObject(executionContext: Object) {
-    const flatCSS = flatten(this.rules, executionContext).join('')
-    const hash = hashStr(flatCSS)
-    if (!generated[hash]) {
-      const root = parse(flatCSS)
-      const declPairs = []
-      root.each(node => {
-        if (node.type === 'decl') {
-          declPairs.push([node.prop, node.value])
-        } else {
-          /* eslint-disable no-console */
-          console.warn(`Node of type ${node.type} not supported as an inline style`)
-        }
-      })
-      // RN currently does not support differing values for the corner radii of Image
-      // components (but does for View). It is almost impossible to tell whether we'll have
-      // support, so we'll just disable multiple values here.
-      // https://github.com/styled-components/css-to-react-native/issues/11
-      const styleObject = transformDeclPairs(declPairs, [
-        'borderRadius',
-        'borderWidth',
-        'borderColor',
-        'borderStyle',
-      ])
-      const styles = StyleSheet.create({
-        generated: styleObject,
-      })
-      generated[hash] = styles.generated
+    generateStyleObject(executionContext: Object) {
+      const flatCSS = flatten(this.rules, executionContext).join('')
+      const hash = hashStr(flatCSS)
+      if (!generated[hash]) {
+        const root = parse(flatCSS)
+        const declPairs = []
+        root.each(node => {
+          if (node.type === 'decl') {
+            declPairs.push([node.prop, node.value])
+          } else {
+            /* eslint-disable no-console */
+            console.warn(`Node of type ${node.type} not supported as an inline style`)
+          }
+        })
+        // RN currently does not support differing values for the corner radii of Image
+        // components (but does for View). It is almost impossible to tell whether we'll have
+        // support, so we'll just disable multiple values here.
+        // https://github.com/styled-components/css-to-react-native/issues/11
+        const styleObject = transformDeclPairs(declPairs, [
+          'borderRadius',
+          'borderWidth',
+          'borderColor',
+          'borderStyle',
+        ])
+        const styles = styleSheet.create({
+          generated: styleObject,
+        })
+        generated[hash] = styles.generated
+      }
+      return generated[hash]
     }
-    return generated[hash]
   }
+
+  return InlineStyle
 }
diff --git a/src/models/StyleSheetManager.js b/src/models/StyleSheetManager.js
index b6b76469f..56834b6ec 100644
--- a/src/models/StyleSheetManager.js
+++ b/src/models/StyleSheetManager.js
@@ -10,8 +10,10 @@ class StyleSheetManager extends Component {
 
   render() {
     /* eslint-disable react/prop-types */
-    // $FlowFixMe
-    return React.Children.only(this.props.children)
+    // Flow v0.43.1 will report an error accessing the `children` property,
+    // but v0.47.0 will not. It is necessary to use a type cast instead of
+    // a "fixme" comment to satisfy both Flow versions.
+    return React.Children.only((this.props: any).children)
   }
 }
 
diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js
index 3d93d404f..238471cac 100644
--- a/src/models/StyledComponent.js
+++ b/src/models/StyledComponent.js
@@ -214,8 +214,23 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       }
 
       static get extend() {
-        const { displayName: _, componentId: __, ...optionsToCopy } = options
-        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledComponent }
+        const {
+          displayName: _,
+          componentId: __,
+          rules: rulesFromOptions,
+          ...optionsToCopy
+        } = options
+
+        const newRules = rulesFromOptions === undefined
+          ? rules
+          : rulesFromOptions.concat(rules)
+
+        const newOptions = {
+          ...optionsToCopy,
+          rules: newRules,
+          ParentComponent: StyledComponent,
+        }
+
         return constructWithOptions(createStyledComponent, target, newOptions)
       }
     }
diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js
index 4f03f20be..1f787d32b 100644
--- a/src/models/StyledNativeComponent.js
+++ b/src/models/StyledNativeComponent.js
@@ -9,10 +9,9 @@ import getComponentName from '../utils/getComponentName'
 import type { RuleSet, Target } from '../types'
 
 import { CHANNEL } from './ThemeProvider'
-import InlineStyle from './InlineStyle'
 import AbstractStyledComponent from './AbstractStyledComponent'
 
-export default (constructWithOptions: Function) => {
+export default (constructWithOptions: Function, InlineStyle: Function) => {
   class BaseStyledNativeComponent extends AbstractStyledComponent {
     static target: Target
     static styledComponentId: string
@@ -182,9 +181,28 @@ export default (constructWithOptions: Function) => {
       }
 
       static get extend() {
-        const { displayName: _, componentId: __, ...optionsToCopy } = options
-        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledNativeComponent }
-        return constructWithOptions(createStyledNativeComponent, target, newOptions)
+        const {
+          displayName: _,
+          componentId: __,
+          rules: rulesFromOptions,
+          ...optionsToCopy
+        } = options
+
+        const newRules = rulesFromOptions === undefined
+          ? rules
+          : rulesFromOptions.concat(rules)
+
+        const newOptions = {
+          ...optionsToCopy,
+          rules: newRules,
+          ParentComponent: StyledNativeComponent,
+        }
+
+        return constructWithOptions(
+          createStyledNativeComponent,
+          target,
+          newOptions,
+        )
       }
     }
 
diff --git a/src/native/index.js b/src/native/index.js
index ba017faa5..9dcda1735 100644
--- a/src/native/index.js
+++ b/src/native/index.js
@@ -3,6 +3,7 @@
 /* eslint-disable import/no-unresolved */
 import reactNative from 'react-native'
 
+import _InlineStyle from '../models/InlineStyle'
 import _StyledNativeComponent from '../models/StyledNativeComponent'
 import _constructWithOptions from '../constructors/constructWithOptions'
 
@@ -13,7 +14,8 @@ import withTheme from '../hoc/withTheme'
 import type { Target } from '../types'
 
 const constructWithOptions = _constructWithOptions(css)
-const StyledNativeComponent = _StyledNativeComponent(constructWithOptions)
+const InlineStyle = _InlineStyle(reactNative.StyleSheet)
+const StyledNativeComponent = _StyledNativeComponent(constructWithOptions, InlineStyle)
 const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag)
 
 /* React native lazy-requires each of these modules for some reason, so let's
diff --git a/src/native/test/native.test.js b/src/native/test/native.test.js
index d7ee1e180..775f5cbf9 100644
--- a/src/native/test/native.test.js
+++ b/src/native/test/native.test.js
@@ -55,6 +55,55 @@ describe('native', () => {
         }, undefined
       ])
     })
+
+    it('should combine styles of extending components in >= 3 inheritances', () => {
+      const GrandGrandParent = styled.View`background-color: red;`
+      const GrandParent = GrandGrandParent.extend`borderWidth: 10;`
+      const Parent = GrandParent.extend`opacity: 0.9;`
+      const Child = Parent.extend`padding: 10px;`
+
+      const grandGrandParent = shallow(<GrandGrandParent />)
+      const grandParent = shallow(<GrandParent />)
+      const parent = shallow(<Parent />)
+      const child = shallow(<Child />)
+
+      expect(grandGrandParent.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+        },
+        undefined,
+      ])
+
+      expect(grandParent.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+          borderWidth: 10,
+        },
+        undefined,
+      ])
+
+      expect(parent.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+          borderWidth: 10,
+          opacity: 0.9,
+        },
+        undefined,
+      ])
+
+      expect(child.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+          borderWidth: 10,
+          opacity: 0.9,
+          paddingTop: 10,
+          paddingRight: 10,
+          paddingBottom: 10,
+          paddingLeft: 10,
+        },
+        undefined,
+      ])
+    })
   })
 
   describe('attrs', () => {
diff --git a/src/primitives/index.js b/src/primitives/index.js
new file mode 100644
index 000000000..5167c9763
--- /dev/null
+++ b/src/primitives/index.js
@@ -0,0 +1,39 @@
+// @flow
+
+/* eslint-disable import/no-unresolved */
+import reactPrimitives from 'react-primitives'
+
+import _InlineStyle from '../models/InlineStyle'
+import _StyledNativeComponent from '../models/StyledNativeComponent'
+import _constructWithOptions from '../constructors/constructWithOptions'
+
+import css from '../constructors/css'
+import ThemeProvider from '../models/ThemeProvider'
+import withTheme from '../hoc/withTheme'
+
+import type { Target } from '../types'
+
+const constructWithOptions = _constructWithOptions(css)
+const InlineStyle = _InlineStyle(reactPrimitives.StyleSheet)
+const StyledNativeComponent = _StyledNativeComponent(
+  constructWithOptions,
+  InlineStyle,
+)
+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 = 'Image Text Touchable View '
+
+/* Define a getter for each alias which simply gets the reactNative component
+ * and passes it to styled */
+aliases.split(/\s+/m).forEach(alias => Object.defineProperty(styled, alias, {
+  enumerable: true,
+  configurable: false,
+  get() {
+    return styled(reactPrimitives[alias])
+  },
+}))
+
+export { css, ThemeProvider, withTheme }
+export default styled
diff --git a/src/primitives/test/primitives.test.js b/src/primitives/test/primitives.test.js
new file mode 100644
index 000000000..f8f37d892
--- /dev/null
+++ b/src/primitives/test/primitives.test.js
@@ -0,0 +1,272 @@
+import 'react-primitives'
+import React from 'react'
+
+import styled from '../index'
+import { shallow, mount } from 'enzyme'
+
+// NOTE: These tests are copy pasted from ../native/test/native.test.js
+
+describe('primitives', () => {
+  it('should not throw an error when called', () => {
+    styled.View``
+  })
+
+  it('should generate inline styles', () => {
+    const Comp = styled.View``
+    const wrapper = shallow(<Comp />)
+    const view = wrapper.find('View').first()
+
+    expect(view.prop('style')).toEqual([ {}, undefined ])
+  })
+
+  it('should combine inline styles and the style prop', () => {
+    const Comp = styled.View`
+      padding-top: 10;
+    `
+
+    const style = { opacity: 0.9 }
+    const wrapper = shallow(<Comp style={style} />)
+    const view = wrapper.find('View').first()
+
+    expect(view.prop('style')).toEqual([ { paddingTop: 10 }, style ])
+  })
+
+  describe('extending', () => {
+    it('should combine styles of extending components', () => {
+      const Parent = styled.View`opacity: 0.9;`
+      const Child = Parent.extend`padding: 10px;`
+
+      const parent = shallow(<Parent />)
+      const child = shallow(<Child />)
+
+      expect(parent.find('View').prop('style')).toEqual([
+        { opacity: 0.9 },
+        undefined
+      ])
+
+      expect(child.find('View').prop('style')).toEqual([
+        {
+          opacity: 0.9,
+          paddingTop: 10,
+          paddingRight: 10,
+          paddingBottom: 10,
+          paddingLeft: 10
+        }, undefined
+      ])
+    })
+
+    it('should combine styles of extending components in >= 3 inheritances', () => {
+      const GrandGrandParent = styled.View`background-color: red;`
+      const GrandParent = GrandGrandParent.extend`borderWidth: 10;`
+      const Parent = GrandParent.extend`opacity: 0.9;`
+      const Child = Parent.extend`padding: 10px;`
+
+      const grandGrandParent = shallow(<GrandGrandParent />)
+      const grandParent = shallow(<GrandParent />)
+      const parent = shallow(<Parent />)
+      const child = shallow(<Child />)
+
+      expect(grandGrandParent.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+        },
+        undefined,
+      ])
+
+      expect(grandParent.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+          borderWidth: 10,
+        },
+        undefined,
+      ])
+
+      expect(parent.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+          borderWidth: 10,
+          opacity: 0.9,
+        },
+        undefined,
+      ])
+
+      expect(child.find('View').prop('style')).toEqual([
+        {
+          backgroundColor: 'red',
+          borderWidth: 10,
+          opacity: 0.9,
+          paddingTop: 10,
+          paddingRight: 10,
+          paddingBottom: 10,
+          paddingLeft: 10,
+        },
+        undefined,
+      ])
+    })
+  })
+
+  describe('attrs', () => {
+    it('works fine with an empty object', () => {
+      const Comp = styled.View.attrs({})``
+      const wrapper = shallow(<Comp />)
+      const view = wrapper.find('View').first()
+
+      expect(view.props()).toEqual({
+        style: [ {}, undefined ]
+      })
+    })
+
+    it('passes simple props on', () => {
+      const Comp = styled.View.attrs({
+        test: true
+      })``
+
+      const wrapper = shallow(<Comp />)
+      const view = wrapper.find('View').first()
+
+      expect(view.props()).toEqual({
+        style: [ {}, undefined ],
+        test: true
+      })
+    })
+
+    it('calls an attr-function with context', () => {
+      const Comp = styled.View.attrs({
+        copy: props => props.test
+      })``
+
+      const test = 'Put that cookie down!'
+      const wrapper = shallow(<Comp test={test} />)
+      const view = wrapper.find('View').first()
+
+      expect(view.props()).toEqual({
+        style: [ {}, undefined ],
+        copy: test,
+        test,
+      })
+    })
+
+    it('merges multiple calls', () => {
+      const Comp = styled.View.attrs({
+        first: 'first',
+        test: '_'
+      }).attrs({
+        second: 'second',
+        test: 'test'
+      })``
+
+      const wrapper = shallow(<Comp />)
+      const view = wrapper.find('View').first()
+
+      expect(view.props()).toEqual({
+        style: [ {}, undefined ],
+        first: 'first',
+        second: 'second',
+        test: 'test',
+      })
+    })
+
+    it('merges attrs when inheriting SC', () => {
+      const Parent = styled.View.attrs({
+        first: 'first',
+      })``
+
+      const Child = Parent.extend.attrs({
+        second: 'second'
+      })``
+
+      const wrapper = shallow(<Child />)
+      const view = wrapper.find('View').first()
+
+      expect(view.props()).toEqual({
+        style: [ {}, undefined ],
+        first: 'first',
+        second: 'second',
+      })
+    })
+  })
+
+  describe('expanded API', () => {
+    it('should attach a displayName', () => {
+      const Comp = styled.View``
+      expect(Comp.displayName).toBe('Styled(View)')
+
+      const CompTwo = styled.View.withConfig({ displayName: 'Test' })``
+      expect(CompTwo.displayName).toBe('Test')
+    })
+
+    it('should allow multiple calls to be chained', () => {
+      const Comp = styled.View
+        .withConfig({ displayName: 'Test1' })
+        .withConfig({ displayName: 'Test2' })
+        ``
+
+      expect(Comp.displayName).toBe('Test2')
+    })
+  })
+
+  describe('innerRef', () => {
+    it('should pass the ref to the component', () => {
+      const Comp = styled.View``
+      const ref = jest.fn()
+
+      const wrapper = mount(<Comp innerRef={ref} />)
+      const view = wrapper.find('View').first()
+      const comp = wrapper.find(Comp).first()
+
+      // $FlowFixMe
+      expect(ref).toHaveBeenCalledWith(view.node)
+      expect(view.prop('innerRef')).toBeFalsy()
+      expect(comp.node.root).toBeTruthy()
+    })
+
+    class InnerComponent extends React.Component {
+      render() {
+        return null
+      }
+    }
+
+    it('should not leak the innerRef prop to the wrapped child', () => {
+      const OuterComponent = styled(InnerComponent)``
+      const ref = jest.fn()
+
+      const wrapper = mount(<OuterComponent innerRef={ref} />)
+      const innerComponent = wrapper.find(InnerComponent).first()
+      const outerComponent = wrapper.find(OuterComponent).first()
+
+      // $FlowFixMe
+      expect(ref).toHaveBeenCalledWith(innerComponent.node)
+      expect(innerComponent.prop('innerRef')).toBeFalsy()
+      expect(outerComponent.node.root).toBeTruthy()
+    })
+
+    it('should pass the innerRef to the wrapped styled component', () => {
+      const InnerComponent = styled.View``
+      const OuterComponent = styled(InnerComponent)``
+      const ref = jest.fn()
+
+      const wrapper = mount(<OuterComponent innerRef={ref} />)
+      const view = wrapper.find('View').first()
+      const innerComponent = wrapper.find(InnerComponent).first()
+      const outerComponent = wrapper.find(OuterComponent).first()
+
+      // $FlowFixMe
+      expect(ref).toHaveBeenCalledWith(view.node)
+      expect(outerComponent.node.root).toBeTruthy()
+    })
+
+    it('should pass innerRef instead of ref to a wrapped stateless functional component', () => {
+      const InnerComponent = () => null
+      const OuterComponent = styled(InnerComponent)``
+      // NOTE: A ref should always be passed, so we don't need to (setNativeProps feature)
+
+      const wrapper = mount(<OuterComponent />)
+      const outerComponent = wrapper.find(OuterComponent).first()
+      const innerComponent = wrapper.find(InnerComponent).first()
+
+      expect(innerComponent.prop('ref')).toBeFalsy()
+      expect(innerComponent.prop('innerRef')).toBeTruthy()
+      expect(outerComponent.node.root).toBeFalsy()
+    })
+  })
+})
diff --git a/src/test/css.test.js b/src/test/css.test.js
index 0a0a77dec..9a22cc0ab 100644
--- a/src/test/css.test.js
+++ b/src/test/css.test.js
@@ -29,7 +29,7 @@ describe('css features', () => {
     expectCSSMatches(`
       .sc-a {}
       .b {
-        display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+        display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
       }
     `)
   })
diff --git a/src/test/extending.test.js b/src/test/extending.test.js
index 1769cb178..e22a70bc9 100644
--- a/src/test/extending.test.js
+++ b/src/test/extending.test.js
@@ -138,6 +138,40 @@ describe('extending', () => {
     expect(Child.fetchData()).toEqual(1)
   })
 
+  it('should keep styles in >= 3 inheritances', () => {
+    const GrandGrandParent = styled.div`
+      background-color: red;
+    `
+
+    const GrandParent = GrandGrandParent.extend`
+      color: blue;
+    `
+
+    const Parent = GrandParent.extend`
+      border: 2px solid black;
+    `
+
+    const Child = Parent.extend`
+      border-width: 10;
+    `
+
+    shallow(<GrandGrandParent />)
+    shallow(<GrandParent />)
+    shallow(<Parent />)
+    shallow(<Child />)
+
+    expectCSSMatches(`
+      .sc-a { }
+      .e { background-color: red; }
+      .sc-b { }
+      .f { background-color: red; color: blue; }
+      .sc-c { }
+      .g { background-color: red; color: blue; border: 2px solid black; }
+      .sc-d { }
+      .h { background-color: red; color: blue; border: 2px solid black; border-width: 10; }
+    `)
+  })
+
   it('should allow changing component', () => {
     const Parent = styled.div`color: red;`
     const Child = Parent.withComponent('span')
@@ -158,4 +192,15 @@ describe('extending', () => {
       .sc-c {} .d { color: red; color: green; }
     `)
   })
+
+  it('should allow changing component and adding attributes', () => {
+    const Parent = styled.button`
+      color: red;
+    `
+    const Child = Parent.withComponent('a').extend.attrs({
+      href: '/test'
+    })``
+
+    expect(shallow(<Child />).html()).toEqual('<a href="/test" class="sc-c d"></a>')
+  })
 })
diff --git a/src/test/theme.test.js b/src/test/theme.test.js
index af042bfa7..499f72101 100644
--- a/src/test/theme.test.js
+++ b/src/test/theme.test.js
@@ -356,7 +356,7 @@ describe('theming', () => {
       },
     }
 
-    const Theme = ({ props }) => (
+    const Theme = props => (
       <ThemeProvider theme={{ color: 'green' }}>
         <Text {...props} />
       </ThemeProvider>
diff --git a/src/types.js b/src/types.js
index df88ab2e1..718f3f840 100644
--- a/src/types.js
+++ b/src/types.js
@@ -22,3 +22,7 @@ export type Stringifier = (
   selector: ?string,
   prefix: ?string
 ) => string
+
+export type StyleSheet = {
+  create: Function
+}
diff --git a/src/utils/autoprefix.js b/src/utils/autoprefix.js
deleted file mode 100644
index ec8259c94..000000000
--- a/src/utils/autoprefix.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// @flow
-import camelizeStyleName from 'fbjs/lib/camelizeStyleName'
-import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName'
-
-// eslint-disable-next-line
-import prefixAll from 'inline-style-prefixer/static'
-import type Container from '../vendor/postcss/container'
-
-export default (root: Container) => {
-  root.walkDecls(decl => {
-    /* No point even checking custom props */
-    if (/^--/.test(decl.prop)) return
-
-    const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }
-    const prefixed = prefixAll(objStyle)
-    Object.keys(prefixed).forEach(newProp => {
-      const newVals = prefixed[newProp]
-      const newValArray = Array.isArray(newVals) ? newVals : [newVals]
-      newValArray.forEach(newVal => {
-        decl.cloneBefore({
-          prop: hyphenateStyleName(newProp),
-          value: newVal,
-        })
-      })
-    })
-    decl.remove()
-  })
-}
diff --git a/src/utils/create-broadcast.js b/src/utils/create-broadcast.js
index e83609e27..28c38c897 100644
--- a/src/utils/create-broadcast.js
+++ b/src/utils/create-broadcast.js
@@ -7,7 +7,7 @@
 
 export type Broadcast = {
   publish: (value: mixed) => void,
-  subscribe: (listener: () => void) => () => void
+  subscribe: (listener: (currentValue: mixed) => void) => () => void
 }
 
 const createBroadcast = (initialValue: mixed): Broadcast => {
diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts
index 4c56cfc8d..16e80c677 100644
--- a/typings/styled-components.d.ts
+++ b/typings/styled-components.d.ts
@@ -1,6 +1,8 @@
 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> {
@@ -18,16 +20,30 @@ export type OuterStyledProps<P> = ThemedOuterStyledProps<P, any>;
 
 export type Interpolation<P> = FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P>>>;
 export type FlattenInterpolation<P> = InterpolationValue | InterpolationFunction<P>;
-export type InterpolationValue = string | number;
+export type InterpolationValue = string | number | StyledComponentClass<any, any>;
 export type SimpleInterpolation = InterpolationValue | ReadonlyArray<InterpolationValue | ReadonlyArray<InterpolationValue>>;
 export interface InterpolationFunction<P> {
   (props: P): Interpolation<P>;
 }
 
-export interface ThemedStyledFunction<P, T> {
-  (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): ComponentClass<ThemedOuterStyledProps<P, T>>;
-  <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): ComponentClass<ThemedOuterStyledProps<P & U, T>>;
+type Attrs<P, A extends Partial<P>, T> = {
+  [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K];
+};
+
+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(element: ComponentClass<P>): StyledComponentClass<P, T, O>;
 }
+
+export interface ThemedStyledFunction<P, T, O = P> {
+  (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T, O>;
+  <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P & U, T, O & U>;
+  attrs<U, A extends Partial<P & U> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>;
+}
+
 export type StyledFunction<P> = ThemedStyledFunction<P, any>;
 
 export type ThemedHtmlStyledFunction<E, T> = ThemedStyledFunction<React.HTMLProps<E>, T>;
@@ -36,150 +52,28 @@ 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>;
 
-export interface ThemedBaseStyledInterface<T> {
+type ThemedStyledComponentFactoriesHTML<T> = {
+    [K in keyof HTMLTags]: ThemedHtmlStyledFunction<HTMLTags[K], 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>;
 }
 export type BaseStyledInterface = ThemedBaseStyledInterface<any>;
 
+export type ThemedStyledInterface<T> = ThemedBaseStyledInterface<T>;
 export type StyledInterface = ThemedStyledInterface<any>;
-export interface ThemedStyledInterface<T> extends ThemedBaseStyledInterface<T> {
-  a: ThemedHtmlStyledFunction<HTMLAnchorElement, T>;
-  abbr: ThemedHtmlStyledFunction<HTMLElement, T>;
-  address: ThemedHtmlStyledFunction<HTMLElement, T>;
-  area: ThemedHtmlStyledFunction<HTMLAreaElement, T>;
-  article: ThemedHtmlStyledFunction<HTMLElement, T>;
-  aside: ThemedHtmlStyledFunction<HTMLElement, T>;
-  audio: ThemedHtmlStyledFunction<HTMLAudioElement, T>;
-  b: ThemedHtmlStyledFunction<HTMLElement, T>;
-  base: ThemedHtmlStyledFunction<HTMLBaseElement, T>;
-  bdi: ThemedHtmlStyledFunction<HTMLElement, T>;
-  bdo: ThemedHtmlStyledFunction<HTMLElement, T>;
-  big: ThemedHtmlStyledFunction<HTMLElement, T>;
-  blockquote: ThemedHtmlStyledFunction<HTMLElement, T>;
-  body: ThemedHtmlStyledFunction<HTMLBodyElement, T>;
-  br: ThemedHtmlStyledFunction<HTMLBRElement, T>;
-  button: ThemedHtmlStyledFunction<HTMLButtonElement, T>;
-  canvas: ThemedHtmlStyledFunction<HTMLCanvasElement, T>;
-  caption: ThemedHtmlStyledFunction<HTMLElement, T>;
-  cite: ThemedHtmlStyledFunction<HTMLElement, T>;
-  code: ThemedHtmlStyledFunction<HTMLElement, T>;
-  col: ThemedHtmlStyledFunction<HTMLTableColElement, T>;
-  colgroup: ThemedHtmlStyledFunction<HTMLTableColElement, T>;
-  data: ThemedHtmlStyledFunction<HTMLElement, T>;
-  datalist: ThemedHtmlStyledFunction<HTMLDataListElement, T>;
-  dd: ThemedHtmlStyledFunction<HTMLElement, T>;
-  del: ThemedHtmlStyledFunction<HTMLElement, T>;
-  details: ThemedHtmlStyledFunction<HTMLElement, T>;
-  dfn: ThemedHtmlStyledFunction<HTMLElement, T>;
-  dialog: ThemedHtmlStyledFunction<HTMLElement, T>;
-  div: ThemedHtmlStyledFunction<HTMLDivElement, T>;
-  dl: ThemedHtmlStyledFunction<HTMLDListElement, T>;
-  dt: ThemedHtmlStyledFunction<HTMLElement, T>;
-  em: ThemedHtmlStyledFunction<HTMLElement, T>;
-  embed: ThemedHtmlStyledFunction<HTMLEmbedElement, T>;
-  fieldset: ThemedHtmlStyledFunction<HTMLFieldSetElement, T>;
-  figcaption: ThemedHtmlStyledFunction<HTMLElement, T>;
-  figure: ThemedHtmlStyledFunction<HTMLElement, T>;
-  footer: ThemedHtmlStyledFunction<HTMLElement, T>;
-  form: ThemedHtmlStyledFunction<HTMLFormElement, T>;
-  h1: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
-  h2: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
-  h3: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
-  h4: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
-  h5: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
-  h6: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
-  head: ThemedHtmlStyledFunction<HTMLHeadElement, T>;
-  header: ThemedHtmlStyledFunction<HTMLElement, T>;
-  hgroup: ThemedHtmlStyledFunction<HTMLElement, T>;
-  hr: ThemedHtmlStyledFunction<HTMLHRElement, T>;
-  html: ThemedHtmlStyledFunction<HTMLHtmlElement, T>;
-  i: ThemedHtmlStyledFunction<HTMLElement, T>;
-  iframe: ThemedHtmlStyledFunction<HTMLIFrameElement, T>;
-  img: ThemedHtmlStyledFunction<HTMLImageElement, T>;
-  input: ThemedHtmlStyledFunction<HTMLInputElement, T>;
-  ins: ThemedHtmlStyledFunction<HTMLModElement, T>;
-  kbd: ThemedHtmlStyledFunction<HTMLElement, T>;
-  keygen: ThemedHtmlStyledFunction<HTMLElement, T>;
-  label: ThemedHtmlStyledFunction<HTMLLabelElement, T>;
-  legend: ThemedHtmlStyledFunction<HTMLLegendElement, T>;
-  li: ThemedHtmlStyledFunction<HTMLLIElement, T>;
-  link: ThemedHtmlStyledFunction<HTMLLinkElement, T>;
-  main: ThemedHtmlStyledFunction<HTMLElement, T>;
-  map: ThemedHtmlStyledFunction<HTMLMapElement, T>;
-  mark: ThemedHtmlStyledFunction<HTMLElement, T>;
-  menu: ThemedHtmlStyledFunction<HTMLElement, T>;
-  menuitem: ThemedHtmlStyledFunction<HTMLElement, T>;
-  meta: ThemedHtmlStyledFunction<HTMLMetaElement, T>;
-  meter: ThemedHtmlStyledFunction<HTMLElement, T>;
-  nav: ThemedHtmlStyledFunction<HTMLElement, T>;
-  noscript: ThemedHtmlStyledFunction<HTMLElement, T>;
-  object: ThemedHtmlStyledFunction<HTMLObjectElement, T>;
-  ol: ThemedHtmlStyledFunction<HTMLOListElement, T>;
-  optgroup: ThemedHtmlStyledFunction<HTMLOptGroupElement, T>;
-  option: ThemedHtmlStyledFunction<HTMLOptionElement, T>;
-  output: ThemedHtmlStyledFunction<HTMLElement, T>;
-  p: ThemedHtmlStyledFunction<HTMLParagraphElement, T>;
-  param: ThemedHtmlStyledFunction<HTMLParamElement, T>;
-  picture: ThemedHtmlStyledFunction<HTMLElement, T>;
-  pre: ThemedHtmlStyledFunction<HTMLPreElement, T>;
-  progress: ThemedHtmlStyledFunction<HTMLProgressElement, T>;
-  q: ThemedHtmlStyledFunction<HTMLQuoteElement, T>;
-  rp: ThemedHtmlStyledFunction<HTMLElement, T>;
-  rt: ThemedHtmlStyledFunction<HTMLElement, T>;
-  ruby: ThemedHtmlStyledFunction<HTMLElement, T>;
-  s: ThemedHtmlStyledFunction<HTMLElement, T>;
-  samp: ThemedHtmlStyledFunction<HTMLElement, T>;
-  script: ThemedHtmlStyledFunction<HTMLElement, T>;
-  section: ThemedHtmlStyledFunction<HTMLElement, T>;
-  select: ThemedHtmlStyledFunction<HTMLSelectElement, T>;
-  small: ThemedHtmlStyledFunction<HTMLElement, T>;
-  source: ThemedHtmlStyledFunction<HTMLSourceElement, T>;
-  span: ThemedHtmlStyledFunction<HTMLSpanElement, T>;
-  strong: ThemedHtmlStyledFunction<HTMLElement, T>;
-  style: ThemedHtmlStyledFunction<HTMLStyleElement, T>;
-  sub: ThemedHtmlStyledFunction<HTMLElement, T>;
-  summary: ThemedHtmlStyledFunction<HTMLElement, T>;
-  sup: ThemedHtmlStyledFunction<HTMLElement, T>;
-  table: ThemedHtmlStyledFunction<HTMLTableElement, T>;
-  tbody: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>;
-  td: ThemedHtmlStyledFunction<HTMLTableDataCellElement, T>;
-  textarea: ThemedHtmlStyledFunction<HTMLTextAreaElement, T>;
-  tfoot: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>;
-  th: ThemedHtmlStyledFunction<HTMLTableHeaderCellElement, T>;
-  thead: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>;
-  time: ThemedHtmlStyledFunction<HTMLElement, T>;
-  title: ThemedHtmlStyledFunction<HTMLTitleElement, T>;
-  tr: ThemedHtmlStyledFunction<HTMLTableRowElement, T>;
-  track: ThemedHtmlStyledFunction<HTMLTrackElement, T>;
-  u: ThemedHtmlStyledFunction<HTMLElement, T>;
-  ul: ThemedHtmlStyledFunction<HTMLUListElement, T>;
-  "var": ThemedHtmlStyledFunction<HTMLElement, T>;
-  video: ThemedHtmlStyledFunction<HTMLVideoElement, T>;
-  wbr: ThemedHtmlStyledFunction<HTMLElement, T>;
-
-  // SVG
-  circle: ThemedSvgStyledFunction<SVGCircleElement, T>;
-  clipPath: ThemedSvgStyledFunction<SVGClipPathElement, T>;
-  defs: ThemedSvgStyledFunction<SVGDefsElement, T>;
-  ellipse: ThemedSvgStyledFunction<SVGEllipseElement, T>;
-  g: ThemedSvgStyledFunction<SVGGElement, T>;
-  image: ThemedSvgStyledFunction<SVGImageElement, T>;
-  line: ThemedSvgStyledFunction<SVGLineElement, T>;
-  linearGradient: ThemedSvgStyledFunction<SVGLinearGradientElement, T>;
-  mask: ThemedSvgStyledFunction<SVGMaskElement, T>;
-  path: ThemedSvgStyledFunction<SVGPathElement, T>;
-  pattern: ThemedSvgStyledFunction<SVGPatternElement, T>;
-  polygon: ThemedSvgStyledFunction<SVGPolygonElement, T>;
-  polyline: ThemedSvgStyledFunction<SVGPolylineElement, T>;
-  radialGradient: ThemedSvgStyledFunction<SVGRadialGradientElement, T>;
-  rect: ThemedSvgStyledFunction<SVGRectElement, T>;
-  stop: ThemedSvgStyledFunction<SVGStopElement, T>;
-  svg: ThemedSvgStyledFunction<SVGSVGElement, T>;
-  text: ThemedSvgStyledFunction<SVGTextElement, T>;
-  tspan: ThemedSvgStyledFunction<SVGTSpanElement, T>;
-}
 
-export type ThemeProviderComponent<T> = ComponentClass<ThemeProps<T>>;
+export interface ThemeProviderProps<T> {
+  theme?: T | ((theme: T) => T);
+}
+export type ThemeProviderComponent<T> = ComponentClass<ThemeProviderProps<T>>;
 
 export interface ThemedCssFunction<T> {
   (strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): InterpolationValue[];
@@ -205,13 +99,19 @@ export function withTheme<P extends { theme?: T; }, T>(component: Component<P>):
 export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
 export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
 
-export const ThemeProvider: ThemeProviderComponent<any>;
+export const ThemeProvider: ThemeProviderComponent<object>;
+
+interface StylesheetComponentProps {
+  sheet: ServerStyleSheet;
+}
+
+export class StyleSheetManager extends React.Component<StylesheetComponentProps, {}> { }
 
 export class ServerStyleSheet {
-  collectStyles(children: ReactElement<any>): ReactElement<any>
-  getStyleTags(): string
-  getStyleElement(): ReactElement<any>[]
-  static create(): StyleSheet
+  collectStyles(tree: React.ReactNode): ReactElement<StylesheetComponentProps>;
+
+  getStyleTags(): string;
+  getStyleElement(): ReactElement<{}>[];
 }
 
 export default styled;
diff --git a/typings/tags.d.ts b/typings/tags.d.ts
new file mode 100644
index 000000000..296b06e06
--- /dev/null
+++ b/typings/tags.d.ts
@@ -0,0 +1,137 @@
+export interface HTMLTags {
+  a: HTMLAnchorElement;
+  abbr: HTMLElement;
+  address: HTMLElement;
+  area: HTMLAreaElement;
+  article: HTMLElement;
+  aside: HTMLElement;
+  audio: HTMLAudioElement;
+  b: HTMLElement;
+  base: HTMLBaseElement;
+  bdi: HTMLElement;
+  bdo: HTMLElement;
+  big: HTMLElement;
+  blockquote: HTMLElement;
+  body: HTMLBodyElement;
+  br: HTMLBRElement;
+  button: HTMLButtonElement;
+  canvas: HTMLCanvasElement;
+  caption: HTMLElement;
+  cite: HTMLElement;
+  code: HTMLElement;
+  col: HTMLTableColElement;
+  colgroup: HTMLTableColElement;
+  data: HTMLElement;
+  datalist: HTMLDataListElement;
+  dd: HTMLElement;
+  del: HTMLElement;
+  details: HTMLElement;
+  dfn: HTMLElement;
+  dialog: HTMLElement;
+  div: HTMLDivElement;
+  dl: HTMLDListElement;
+  dt: HTMLElement;
+  em: HTMLElement;
+  embed: HTMLEmbedElement;
+  fieldset: HTMLFieldSetElement;
+  figcaption: HTMLElement;
+  figure: HTMLElement;
+  footer: HTMLElement;
+  form: HTMLFormElement;
+  h1: HTMLHeadingElement;
+  h2: HTMLHeadingElement;
+  h3: HTMLHeadingElement;
+  h4: HTMLHeadingElement;
+  h5: HTMLHeadingElement;
+  h6: HTMLHeadingElement;
+  head: HTMLHeadElement;
+  header: HTMLElement;
+  hgroup: HTMLElement;
+  hr: HTMLHRElement;
+  html: HTMLHtmlElement;
+  i: HTMLElement;
+  iframe: HTMLIFrameElement;
+  img: HTMLImageElement;
+  input: HTMLInputElement;
+  ins: HTMLModElement;
+  kbd: HTMLElement;
+  keygen: HTMLElement;
+  label: HTMLLabelElement;
+  legend: HTMLLegendElement;
+  li: HTMLLIElement;
+  link: HTMLLinkElement;
+  main: HTMLElement;
+  map: HTMLMapElement;
+  mark: HTMLElement;
+  menu: HTMLElement;
+  menuitem: HTMLElement;
+  meta: HTMLMetaElement;
+  meter: HTMLElement;
+  nav: HTMLElement;
+  noscript: HTMLElement;
+  object: HTMLObjectElement;
+  ol: HTMLOListElement;
+  optgroup: HTMLOptGroupElement;
+  option: HTMLOptionElement;
+  output: HTMLElement;
+  p: HTMLParagraphElement;
+  param: HTMLParamElement;
+  picture: HTMLElement;
+  pre: HTMLPreElement;
+  progress: HTMLProgressElement;
+  q: HTMLQuoteElement;
+  rp: HTMLElement;
+  rt: HTMLElement;
+  ruby: HTMLElement;
+  s: HTMLElement;
+  samp: HTMLElement;
+  script: HTMLElement;
+  section: HTMLElement;
+  select: HTMLSelectElement;
+  small: HTMLElement;
+  source: HTMLSourceElement;
+  span: HTMLSpanElement;
+  strong: HTMLElement;
+  style: HTMLStyleElement;
+  sub: HTMLElement;
+  summary: HTMLElement;
+  sup: HTMLElement;
+  table: HTMLTableElement;
+  tbody: HTMLTableSectionElement;
+  td: HTMLTableDataCellElement;
+  textarea: HTMLTextAreaElement;
+  tfoot: HTMLTableSectionElement;
+  th: HTMLTableHeaderCellElement;
+  thead: HTMLTableSectionElement;
+  time: HTMLElement;
+  title: HTMLTitleElement;
+  tr: HTMLTableRowElement;
+  track: HTMLTrackElement;
+  u: HTMLElement;
+  ul: HTMLUListElement;
+  "var": HTMLElement;
+  video: HTMLVideoElement;
+  wbr: HTMLElement;
+}
+
+export interface SVGTags {
+  circle: SVGCircleElement;
+  clipPath: SVGClipPathElement;
+  defs: SVGDefsElement;
+  ellipse: SVGEllipseElement;
+  g: SVGGElement;
+  image: SVGImageElement;
+  line: SVGLineElement;
+  linearGradient: SVGLinearGradientElement;
+  mask: SVGMaskElement;
+  path: SVGPathElement;
+  pattern: SVGPatternElement;
+  polygon: SVGPolygonElement;
+  polyline: SVGPolylineElement;
+  radialGradient: SVGRadialGradientElement;
+  rect: SVGRectElement;
+  stop: SVGStopElement;
+  svg: SVGSVGElement;
+  text: SVGTextElement;
+  tspan: SVGTSpanElement;
+}
diff --git a/typings/tests/attrs-test.tsx b/typings/tests/attrs-test.tsx
new file mode 100644
index 000000000..b7d38a11b
--- /dev/null
+++ b/typings/tests/attrs-test.tsx
@@ -0,0 +1,19 @@
+import styled from "../..";
+
+const Input = styled.input.attrs({
+  // we can define static props
+  type: "password",
+
+  // or we can define dynamic ones
+  margin: (props: any) => props.size as string || "1em",
+  padding: (props: any) => props.size as string || "1em"
+})`
+	color: palevioletred;
+	font-size: 1em;
+	border: 2px solid palevioletred;
+	border-radius: 3px;
+
+	/* here we use the dynamically computed props */
+	margin: ${(props) => props.margin};
+	padding: ${(props)  => props.padding};
+`;
diff --git a/typings/tests/extend-test.tsx b/typings/tests/extend-test.tsx
new file mode 100644
index 000000000..01deafc91
--- /dev/null
+++ b/typings/tests/extend-test.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import styled from "../..";
+
+const Button = styled.button`
+  color: palevioletred;
+  font-size: 1em;
+  margin: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid palevioletred;
+  border-radius: 3px;
+`;
+
+// We're extending Button with some extra styles
+const TomatoButton = Button.extend`
+  color: tomato;
+  border-color: tomato;
+`;
diff --git a/typings/tests/function-themes-test.tsx b/typings/tests/function-themes-test.tsx
new file mode 100644
index 000000000..c29a89af5
--- /dev/null
+++ b/typings/tests/function-themes-test.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import styled, { ThemeProvider } from "../..";
+
+// Define our button, but with the use of props.theme this time
+const Button = styled.button`
+	color: ${props => props.theme.fg};
+	border: 2px solid ${props => props.theme.fg};
+	background: ${props => props.theme.bg};
+
+	font-size: 1em;
+	margin: 1em;
+	padding: 0.25em 1em;
+	border-radius: 3px;
+`;
+
+// Define our `fg` and `bg` on the theme
+const theme = {
+  fg: "palevioletred",
+  bg: "white"
+};
+
+// This theme swaps `fg` and `bg`
+const invertTheme = ({ fg, bg }: { fg: string, bg: string }) => ({
+  fg: bg,
+  bg: fg
+});
+
+const MyApp =
+  <ThemeProvider theme={theme}>
+    <div>
+      <Button>Default Theme</Button>
+
+      <ThemeProvider theme={invertTheme}>
+        <Button>Inverted Theme</Button>
+      </ThemeProvider>
+    </div>
+  </ThemeProvider>
+  ;
diff --git a/typings/styled-components-hoc-test.tsx b/typings/tests/hoc-test.tsx
similarity index 85%
rename from typings/styled-components-hoc-test.tsx
rename to typings/tests/hoc-test.tsx
index 5a1ea1396..1b0c94c25 100644
--- a/typings/styled-components-hoc-test.tsx
+++ b/typings/tests/hoc-test.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
 
-import styled from "..";
-import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ThemeProps } from "..";
-
+import styled from "../..";
+import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ThemeProps } from "../..";
 
 class MyComponent extends React.Component<ThemeProps<{}>, {}> {
   render() {
diff --git a/typings/styled-components-test.tsx b/typings/tests/main-test.tsx
similarity index 91%
rename from typings/styled-components-test.tsx
rename to typings/tests/main-test.tsx
index dc732a32b..78e57af87 100644
--- a/typings/styled-components-test.tsx
+++ b/typings/tests/main-test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
-import styled from "..";
-import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ServerStyleSheet } from "..";
+import styled from "../..";
+import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ServerStyleSheet } from "../..";
 
 // Create a <Title> react component that renders an <h1> which is
 // centered, palevioletred and sized at 1.5em
@@ -134,7 +134,7 @@ const cssWithFunc1 = css`
 `;
 const cssWithFunc2 = css`
   ${cssWithFunc1}
-  ${props => cssWithFunc2}
+  ${props => cssWithFunc1}
   ${[cssWithFunc1, cssWithValues1]}
 `;
 // such css can be used in styled components
@@ -155,10 +155,3 @@ const name = "hey";
 const ThemedButton = withTheme(MyButton);
 
 <ThemedButton name={name} />;
-
-// server-side rendering styles
-const sheet = new ServerStyleSheet();
-sheet.collectStyles(<ThemedButton name={name} />)
-const styleString = sheet.getStyleTags();
-const styleElement = sheet.getStyleElement();
-ServerStyleSheet.create();
diff --git a/typings/styled-components-native-test.tsx b/typings/tests/native-test.tsx
similarity index 80%
rename from typings/styled-components-native-test.tsx
rename to typings/tests/native-test.tsx
index 91ceea57b..8315267c5 100644
--- a/typings/styled-components-native-test.tsx
+++ b/typings/tests/native-test.tsx
@@ -1,5 +1,5 @@
-import * as React from "react-native";
-import styled from "../native";
+import * as React from "react";
+import styled from "../../native";
 
 const StyledView = styled.View`
   background-color: papayawhip;
diff --git a/typings/tests/nested-test.tsx b/typings/tests/nested-test.tsx
new file mode 100644
index 000000000..de982b780
--- /dev/null
+++ b/typings/tests/nested-test.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import styled, { css } from "../..";
+
+const Link = styled.a`
+    color: red;
+`;
+
+const AlternativeLink = styled.a`
+    color: blue;
+`;
+
+const freeStyles = css`
+    background-color: black;
+    color: white;
+    ${Link} {
+        color: blue;
+    }
+`;
+
+const Article = styled.section`
+    color: red;
+    ${freeStyles}
+    & > ${Link} {
+        color: green;
+    }
+    ${p => p.theme.useAlternativeLink ? AlternativeLink : Link} {
+        color: black
+    }
+`;
diff --git a/typings/tests/server-test.tsx b/typings/tests/server-test.tsx
new file mode 100644
index 000000000..a177e3e92
--- /dev/null
+++ b/typings/tests/server-test.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { renderToString } from "react-dom/server";
+import styled, { ServerStyleSheet, StyleSheetManager } from "../..";
+
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+const sheet = new ServerStyleSheet();
+const html = renderToString(sheet.collectStyles(<Title>Hello world</Title>));
+const css = sheet.getStyleTags();
+const styleElement = sheet.getStyleElement();
+
+const sheet2 = new ServerStyleSheet();
+const html2 = renderToString(
+  <StyleSheetManager sheet={sheet2}>
+    <Title>Hello world</Title>
+  </StyleSheetManager>
+);
+
+const css2 = sheet2.getStyleElement();
diff --git a/typings/themed-tests/mytheme-styled-components.tsx b/typings/tests/themed-tests/mytheme-styled-components.tsx
similarity index 80%
rename from typings/themed-tests/mytheme-styled-components.tsx
rename to typings/tests/themed-tests/mytheme-styled-components.tsx
index 69c4863d9..386907ea0 100644
--- a/typings/themed-tests/mytheme-styled-components.tsx
+++ b/typings/tests/themed-tests/mytheme-styled-components.tsx
@@ -1,5 +1,5 @@
-import * as styledComponents from "../..";
-import { ThemedStyledComponentsModule } from "../..";
+import * as styledComponents from "../../..";
+import { ThemedStyledComponentsModule } from "../../..";
 
 export interface MyTheme {
     primaryColor: string;
diff --git a/typings/themed-tests/mytheme-styled-components-test.tsx b/typings/tests/themed-tests/mytheme-test.tsx
similarity index 96%
rename from typings/themed-tests/mytheme-styled-components-test.tsx
rename to typings/tests/themed-tests/mytheme-test.tsx
index c70904b23..7d144001e 100644
--- a/typings/themed-tests/mytheme-styled-components-test.tsx
+++ b/typings/tests/themed-tests/mytheme-test.tsx
@@ -10,6 +10,11 @@ const Title = styled.h1`
   color: ${p => p.theme.primaryColor};
 `;
 
+const RedTitle = Title.extend`
+  color: red;
+  border-color: ${p => p.theme.primaryColor};
+`;
+
 // Create a <Wrapper> react component that renders a <section> with
 // some padding and a papayawhip background
 const Wrapper = styled.section`
diff --git a/typings/themed-tests/with-theme-test.tsx b/typings/tests/themed-tests/with-theme-test.tsx
similarity index 100%
rename from typings/themed-tests/with-theme-test.tsx
rename to typings/tests/themed-tests/with-theme-test.tsx
diff --git a/typings/tests/tsconfig.json b/typings/tests/tsconfig.json
new file mode 100644
index 000000000..f7c1edff4
--- /dev/null
+++ b/typings/tests/tsconfig.json
@@ -0,0 +1,53 @@
+{
+  "compilerOptions": {
+    /* Basic Options */                       
+    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+    "module": "es2015"  ,                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation:  */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": true,                           /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+                                              
+    /* Strict Type-Checking Options */        
+    "strict": true,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+                                              
+    /* Additional Checks */                   
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+                                              
+    /* Module Resolution Options */           
+    "moduleResolution": "node"                /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+                                              
+    /* Source Map Options */                  
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+                                              
+    /* Experimental Options */                
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  }
+}
\ No newline at end of file
diff --git a/typings/tests/with-component-test.tsx b/typings/tests/with-component-test.tsx
new file mode 100644
index 000000000..f39adabed
--- /dev/null
+++ b/typings/tests/with-component-test.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import styled from "../..";
+
+const H1 = styled.h1`
+  color: palevioletred;
+  font-size: 1em;
+`;
+
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+class Random extends React.Component<any, any> {
+  render() {
+    const i = getRandomInt(1, 6);
+
+    switch (i) {
+      case 1:
+        return <h1>Hello World</h1>;
+      case 2:
+        return <h2>Hello World</h2>;
+      case 3:
+        return <h3>Hello World</h3>;
+      case 4:
+        return <h4>Hello World</h4>;
+      case 5:
+        return <h5>Hello World</h5>;
+      case 6:
+        return <h6>Hello World</h6>;
+      default:
+        return null;
+    }
+  }
+}
+
+const H2 = H1.withComponent("h2");
+const a = H1.withComponent("a");
+const abbr = H1.withComponent("abbr");
+
+const RandomHeading = H1.withComponent(Random);
diff --git a/yarn.lock b/yarn.lock
index f83891f8b..58bb8e5bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,15 +2,21 @@
 # yarn lockfile v1
 
 
-"@types/react-native@^0.37.5":
-  version "0.37.13"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.37.13.tgz#65548f892ed6e55ef87add1ffeec72275b4152b7"
+"@types/react-dom@^15.5.0":
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.0.tgz#7f4fb9613d4051141773242f7b6b5f1a46b34bd9"
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^0.14.55":
-  version "0.14.57"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-0.14.57.tgz#1878a8654fafdd1d381b8457292b6433498c5b62"
+"@types/react-native@^0.44.4":
+  version "0.44.4"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.44.4.tgz#91ff838293f87f5b27827164fc1efe5e528b6f5a"
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^15.0.25":
+  version "15.0.25"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.25.tgz#d396949cccc9a90b61755def9781e5aced9b2261"
 
 abab@^1.0.3:
   version "1.0.3"
@@ -1114,10 +1120,6 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bowser@^1.0.0:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.1.tgz#9157e9498f456e937173a2918f3b2161e5353eb3"
-
 boxen@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.0.0.tgz#b2694baf1f605f708ff0177c12193b22f29aaaab"
@@ -2499,9 +2501,9 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-flow-bin@^0.43.1:
-  version "0.43.1"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.43.1.tgz#0733958b448fb8ad4b1576add7e87c31794c81bc"
+flow-bin@^0.47.0:
+  version "0.47.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.47.0.tgz#a2a08ab3e0d1f1cb57d17e27b30b118b62fda367"
 
 flow-copy-source@^1.1.0:
   version "1.1.0"
@@ -2918,10 +2920,6 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-hyphenate-style-name@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
-
 iconv-lite@0.4.11:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.11.tgz#2ecb42fd294744922209a2e7c404dac8793d8ade"
@@ -2983,13 +2981,6 @@ ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
-inline-style-prefixer@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
-  dependencies:
-    bowser "^1.0.0"
-    hyphenate-style-name "^1.0.1"
-
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -5645,9 +5636,9 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-stylis@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.4.tgz#fd7a0f6c10c09903704cc362bc23449afda33458"
+stylis@^3.0.19:
+  version "3.0.19"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.19.tgz#36013520bb19c209d374c629e97f190e8797a287"
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -5840,9 +5831,9 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@^2.1.5:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.0.tgz#2e63e09284392bc8158a2444c33e2093795c0418"
+typescript@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.3.tgz#9639f3c3b40148e8ca97fe08a51dd1891bb6be22"
 
 ua-parser-js@^0.7.9:
   version "0.7.12"