diff --git a/performance/index.js b/performance/index.js
index cfd8467a..7f375f01 100644
--- a/performance/index.js
+++ b/performance/index.js
@@ -5,6 +5,7 @@ import jss from './src/jss';
import reactNative from './src/react-native';
import reactNativeStyleSheet from './src/react-native-stylesheet';
import styledComponents from './src/styled-components';
+import styletron from './src/styletron';
import xp from './src/reactxp';
import renderDeepTree from './tests/renderDeepTree';
@@ -28,12 +29,14 @@ const coreTests = [
* Optionally run tests using other libraries
*/
const extraTests = [
+ () => renderDeepTree('styletron', styletron),
+ () => renderWideTree('styletron', styletron),
() => renderDeepTree('aphrodite', aphrodite),
() => renderWideTree('aphrodite', aphrodite),
() => renderDeepTree('glamor', glamor),
() => renderWideTree('glamor', glamor),
- () => renderDeepTree('jss', jss),
- () => renderWideTree('jss', jss),
+ () => renderDeepTree('react-jss', jss),
+ () => renderWideTree('react-jss', jss),
() => renderDeepTree('reactxp', xp),
() => renderWideTree('reactxp', xp),
() => renderDeepTree('styled-components', styledComponents),
diff --git a/performance/package.json b/performance/package.json
index bff511d4..b88e7900 100644
--- a/performance/package.json
+++ b/performance/package.json
@@ -8,7 +8,9 @@
"marky": "^1.2.0",
"react-jss": "^6.1.1",
"reactxp": "^0.34.3",
- "styled-components": "2.0.0-15"
+ "styled-components": "2.0.0-15",
+ "styletron-client": "^2.5.1",
+ "styletron-utils": "^2.5.4"
},
"devDependencies": {
"css-loader": "^0.28.0",
diff --git a/performance/src/components/Box/styletron.js b/performance/src/components/Box/styletron.js
new file mode 100644
index 00000000..dd465197
--- /dev/null
+++ b/performance/src/components/Box/styletron.js
@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import { injectStylePrefixed } from 'styletron-utils';
+import React from 'react';
+import View, { styletron } from '../View/styletron';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+
+);
+
+const styles = {
+ outer: injectStylePrefixed(styletron, {
+ padding: '4px'
+ }),
+ row: injectStylePrefixed(styletron, {
+ flexDirection: 'row'
+ }),
+ color0: injectStylePrefixed(styletron, {
+ backgroundColor: '#222'
+ }),
+ color1: injectStylePrefixed(styletron, {
+ backgroundColor: '#666'
+ }),
+ color2: injectStylePrefixed(styletron, {
+ backgroundColor: '#999'
+ }),
+ color3: injectStylePrefixed(styletron, {
+ backgroundColor: 'blue'
+ }),
+ color4: injectStylePrefixed(styletron, {
+ backgroundColor: 'orange'
+ }),
+ color5: injectStylePrefixed(styletron, {
+ backgroundColor: 'red'
+ }),
+ fixed: injectStylePrefixed(styletron, {
+ width: '20px',
+ height: '20px'
+ })
+};
+
+module.exports = Box;
diff --git a/performance/src/components/View/styletron.js b/performance/src/components/View/styletron.js
new file mode 100644
index 00000000..586bfdf9
--- /dev/null
+++ b/performance/src/components/View/styletron.js
@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import Styletron from 'styletron-client';
+import { injectStylePrefixed } from 'styletron-utils';
+import React from 'react';
+
+export const styletron = new Styletron();
+
+const View = ({ style, ...other }) =>
;
+
+const viewStyle = injectStylePrefixed(styletron, {
+ alignItems: 'stretch',
+ borderWidth: '0px',
+ borderStyle: 'solid',
+ boxSizing: 'border-box',
+ display: 'flex',
+ flexBasis: 'auto',
+ flexDirection: 'column',
+ flexShrink: '0',
+ margin: '0px',
+ padding: '0px',
+ position: 'relative',
+ // fix flexbox bugs
+ minHeight: '0px',
+ minWidth: '0px'
+});
+
+export default View;
diff --git a/performance/src/styletron.js b/performance/src/styletron.js
new file mode 100644
index 00000000..645380d5
--- /dev/null
+++ b/performance/src/styletron.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/styletron';
+import View from './components/View/styletron';
+
+export default {
+ Box,
+ View
+};
diff --git a/performance/yarn.lock b/performance/yarn.lock
index d50faed5..602424ca 100644
--- a/performance/yarn.lock
+++ b/performance/yarn.lock
@@ -408,7 +408,7 @@ inherits@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-inline-style-prefixer@^2.0.5:
+inline-style-prefixer@^2.0.1, 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:
@@ -1028,6 +1028,22 @@ styled-components@2.0.0-15:
stylis "^2.0.0"
supports-color "^3.2.3"
+styletron-client@^2.5.1:
+ version "2.5.1"
+ resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-2.5.1.tgz#df0b6fd65965b035d2ff58df61b422aa80e23577"
+ dependencies:
+ styletron-core "^2.5.1"
+
+styletron-core@^2.5.1:
+ version "2.5.1"
+ resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-2.5.1.tgz#bf9e8aebc41461b81fdd22b1062f6e25862286fd"
+
+styletron-utils@^2.5.4:
+ version "2.5.4"
+ resolved "https://registry.yarnpkg.com/styletron-utils/-/styletron-utils-2.5.4.tgz#f08cca7d58ee0338ce85e408cb32900e65620240"
+ dependencies:
+ inline-style-prefixer "^2.0.1"
+
stylis@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-2.0.3.tgz#054b0ad1f636181664246c103adf506c84b502e7"