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"