CSS-IN-JS-Benchmarks icon indicating copy to clipboard operation
CSS-IN-JS-Benchmarks copied to clipboard

Dynamic class generation cases for emotion, cxs and aphrodite

Open jfrej opened this issue 6 years ago • 2 comments

Fixes #41 This PR adds test cases for dynamic class generation for emotion (css-mode), cxs and aphrodite. Essentially, each existing case has been split into dynamic and inline styles version.

I intentionally didn't include the updated results table. Please let me know if it should be included. Or I can create a separate PR for that.

Once this is merged it would be good to upgrade packages to the latest versions.

jfrej avatar Apr 21 '18 13:04 jfrej

Just out of curiosity, how did those libs perform?

streamich avatar Apr 21 '18 17:04 streamich

@streamich Here are the results: https://github.com/jfrej/CSS-IN-JS-Benchmarks/blob/fairer-tests-results/RESULT.md

emotion and cxs still doing well

I'll have to rerun it, though. Some tests returned NaN Also, these are not the latest lib versions.

If you're interested in other benchmarks, these look interesting: https://necolas.github.io/react-native-web/benchmarks/ https://github.com/hellofresh/css-in-js-perf-tests (I might submit a PR to add emotion to this one)

jfrej avatar Apr 21 '18 21:04 jfrej