diff --git a/packages/benchmarks/README.md b/packages/benchmarks/README.md
index ca89dcd1..6249a3d5 100644
--- a/packages/benchmarks/README.md
+++ b/packages/benchmarks/README.md
@@ -53,6 +53,7 @@ Other libraries
 | `styletron-react@3.0.3`               |  `23.55` `±05.14` |  `34.26` `±07.58` |   `10.39` `±02.94` |
 | `react-fela@5.0.0`                    |  `27.58` `±04.26` |  `39.54` `±05.46` |   `10.93` `±01.69` |
 | `react-jss@8.2.1`                     |  `27.31` `±07.87` |  `40.74` `±10.67` | - |
+| `styled-jsx@2.2.1`                    |  `27.46` `±07.85` |  `41.47` `±11.53` |   `29.16` `±09.98` |
 | `styled-components@2.4.0`             |  `43.89` `±06.99` |  `63.26` `±09.02` |   `16.17` `±03.71` |
 | `reactxp@0.51.0-alpha.9`              |  `51.86` `±07.21` |  `78.80` `±11.85` |   `15.04` `±03.92` |
 | `radium@0.21.0`                       | `101.06` `±13.00` | `144.46` `±16.94` |   `17.44` `±03.59` |
diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json
index 8fbd1aaf..c39f1640 100644
--- a/packages/benchmarks/package.json
+++ b/packages/benchmarks/package.json
@@ -22,6 +22,7 @@
     "react-native-web": "^0.3.2",
     "reactxp": "0.51.0-alpha.9",
     "styled-components": "2.4.0",
+    "styled-jsx": "2.2.1",
     "styletron-client": "3.0.2",
     "styletron-react": "3.0.3"
   },
diff --git a/packages/benchmarks/src/implementations/styled-jsx/Box.js b/packages/benchmarks/src/implementations/styled-jsx/Box.js
new file mode 100644
index 00000000..9186b05e
--- /dev/null
+++ b/packages/benchmarks/src/implementations/styled-jsx/Box.js
@@ -0,0 +1,46 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import React from 'react';
+import View from './View';
+
+const getColor = color => {
+  switch (color) {
+    case 0:
+      return '#14171A';
+    case 1:
+      return '#AAB8C2';
+    case 2:
+      return '#E6ECF0';
+    case 3:
+      return '#FFAD1F';
+    case 4:
+      return '#F45D22';
+    case 5:
+      return '#E0245E';
+    default:
+      return 'transparent';
+  }
+};
+
+const Box = props => {
+  const { className, children: styles } = (
+    <scope className={classnames('Box', props.fixed && 'fixed')}>
+      <style jsx>{`
+        .Box {
+          align-self: flex-start;
+          flex-direction: ${props.layout === 'column' ? 'column' : 'row'};
+          padding: ${props.outer ? '4px' : '0'};
+          background-color: ${getColor(props.color)};
+        }
+        .fixed {
+          height: 6px;
+          width: 6px;
+        }
+      `}</style>
+    </scope>
+  ).props;
+
+  return <View className={className}>{[props.children, styles]}</View>;
+};
+
+export default Box;
diff --git a/packages/benchmarks/src/implementations/styled-jsx/Dot.js b/packages/benchmarks/src/implementations/styled-jsx/Dot.js
new file mode 100644
index 00000000..e460a4f3
--- /dev/null
+++ b/packages/benchmarks/src/implementations/styled-jsx/Dot.js
@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import View from './View';
+
+const Dot = props => {
+  const { className, children: styles } = (
+    <scope className="Dot">
+      <style jsx>{`
+        .Dot {
+          position: absolute;
+          cursor: pointer;
+          width: 0;
+          height: 0;
+          border-color: transparent;
+          border-style: solid;
+          border-top-width: 0;
+          transform: translate(50%, 50%);
+        }
+      `}</style>
+      <style jsx>{`
+        .Dot {
+          margin-left: ${props.x}px;
+          margin-top: ${props.y}px;
+          border-right-width: ${props.size / 2}px;
+          border-bottom-width: ${props.size / 2}px;
+          border-left-width: ${props.size / 2}px;
+          border-bottom-color: ${props.color};
+        }
+      `}</style>
+    </scope>
+  ).props;
+
+  return <View className={className}>{[props.children, styles]}</View>;
+};
+
+export default Dot;
diff --git a/packages/benchmarks/src/implementations/styled-jsx/Provider.js b/packages/benchmarks/src/implementations/styled-jsx/Provider.js
new file mode 100644
index 00000000..864fc43a
--- /dev/null
+++ b/packages/benchmarks/src/implementations/styled-jsx/Provider.js
@@ -0,0 +1,2 @@
+import View from './View';
+export default View;
diff --git a/packages/benchmarks/src/implementations/styled-jsx/View.js b/packages/benchmarks/src/implementations/styled-jsx/View.js
new file mode 100644
index 00000000..fcee8b34
--- /dev/null
+++ b/packages/benchmarks/src/implementations/styled-jsx/View.js
@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+class View extends React.Component {
+  render() {
+    const { children, className, ...props } = this.props;
+    return (
+      <div {...props} className={`initial ${className}`}>
+        {children}
+        <style jsx>{`
+          .initial {
+            align-items: stretch;
+            border-width: 0;
+            border-style: solid;
+            box-sizing: border-box;
+            display: flex;
+            flex-basis: auto;
+            flex-direction: column;
+            flex-shrink: 0;
+            margin: 0;
+            padding: 0;
+            position: relative;
+            min-height: 0;
+            min-width: 0;
+          }
+        `}</style>
+      </div>
+    );
+  }
+}
+
+export default View;
diff --git a/packages/benchmarks/src/implementations/styled-jsx/index.js b/packages/benchmarks/src/implementations/styled-jsx/index.js
new file mode 100644
index 00000000..f32ff155
--- /dev/null
+++ b/packages/benchmarks/src/implementations/styled-jsx/index.js
@@ -0,0 +1,11 @@
+import Box from './Box';
+import Dot from './Dot';
+import Provider from './Provider';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  Provider,
+  View
+};
diff --git a/packages/benchmarks/webpack.config.js b/packages/benchmarks/webpack.config.js
index 7aed2724..58dc7cee 100644
--- a/packages/benchmarks/webpack.config.js
+++ b/packages/benchmarks/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = {
           options: {
             cacheDirectory: false,
             presets: babelPreset,
-            plugins: ['react-native-web']
+            plugins: ['react-native-web', 'styled-jsx/babel']
           }
         }
       }
diff --git a/yarn.lock b/yarn.lock
index 0ee0639f..922280a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1056,7 +1056,7 @@ babel-plugin-syntax-function-bind@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
 
-babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.5.0, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.5.0, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -1669,7 +1669,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@6.26.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -2459,7 +2459,7 @@ conventional-recommended-bump@^1.0.1:
     meow "^3.3.0"
     object-assign "^4.0.1"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0:
+convert-source-map@1.5.1, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -7706,16 +7706,16 @@ source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
+source-map@0.6.1, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -7816,7 +7816,7 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-string-hash@^1.1.3:
+string-hash@1.1.3, string-hash@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
 
@@ -7950,6 +7950,18 @@ styled-components@2.4.0:
     stylis "^3.4.0"
     supports-color "^3.2.3"
 
+styled-jsx@2.2.1, styled-jsx@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
+  dependencies:
+    babel-plugin-syntax-jsx "6.18.0"
+    babel-types "6.26.0"
+    convert-source-map "1.5.1"
+    source-map "0.6.1"
+    string-hash "1.1.3"
+    stylis "3.4.5"
+    stylis-rule-sheet "0.0.7"
+
 styletron-client@3.0.2, styletron-client@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-3.0.2.tgz#9b2853e8b94e6e94d70166b8403f27ab2d10c514"
@@ -7983,11 +7995,15 @@ styletron-utils@^3.0.2:
   dependencies:
     inline-style-prefixer "^4.0.0"
 
+stylis-rule-sheet@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
+
 stylis-rule-sheet@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
 
-stylis@^3.3.2, stylis@^3.4.0:
+stylis@3.4.5, stylis@^3.3.2, stylis@^3.4.0:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"