While Tachyons is light-weight by default, using css-in-js will result in increased css performance as you don't send unused styles down the wire.
I was wondering about this statement and did a bit of research. When building a page we either only need tachyons.min.css or we need the setup for styled-system, emotion and the theme itself.
CSS-based setup
tachyons.min.css is 10.9kB (minified+gzipped) or 71.8kB (minified).
CSS-in-JS setup
emotion-theming is 1.8kB (minified+gzipped) or 5kB (minified).
@emotion/core is 6.4kB (minified+gzipped) or 17.2kB (minified).
@emotion/styled is 4.9kB (minified+gzipped) or 11kB (minified).
styled-system is 3.3kB (minified+gzipped) or 11kB (minified).
So to do a fair comparison we'd have to compare tachyons.min.css at 10.9kB vs the rest at 16.4kB. So in terms of payload we are actually shipping ~6kB more. This comparison is excluding the size of the elements definitions and the theme itself.
Not related to create-react-app, but relevant when used with static prerendering (e.g. with react-snap or in Gatsby): Using css-in-js setup ( styled-system and emotion) enables inlining critical CSS which avoids the flash of unstyled content seen when using plain CSS.
The downside is that the critical CSS is loaded "twice" then: once as the critical inlined CSS and once through the JS bundle (theme etc).
Both solutions are coming in pretty lightweight and a 6kb difference won't matter for most connection speeds. So the most promising aspect to me is that we can enable avoiding the flash-of-unstyled-content with this css-in-js setup.
I did not confirm the theories stated above but wanted to share my ramblings. I'll close this again as I don't want to do anything else besides sharing some thoughts. Thanks for coming to my TED talk.
I was wondering about this statement and did a bit of research. When building a page we either only need
tachyons.min.cssor we need the setup for styled-system, emotion and the theme itself.tachyons.min.cssis 10.9kB (minified+gzipped) or 71.8kB (minified).emotion-themingis 1.8kB (minified+gzipped) or 5kB (minified).@emotion/coreis 6.4kB (minified+gzipped) or 17.2kB (minified).@emotion/styledis 4.9kB (minified+gzipped) or 11kB (minified).styled-systemis 3.3kB (minified+gzipped) or 11kB (minified).So to do a fair comparison we'd have to compare
tachyons.min.cssat 10.9kB vs the rest at 16.4kB. So in terms of payload we are actually shipping ~6kB more. This comparison is excluding the size of theelementsdefinitions and thethemeitself.Not related to
create-react-app, but relevant when used with static prerendering (e.g. withreact-snapor in Gatsby): Using css-in-js setup (styled-systemandemotion) enables inlining critical CSS which avoids the flash of unstyled content seen when using plain CSS.The downside is that the critical CSS is loaded "twice" then: once as the critical inlined CSS and once through the JS bundle (theme etc).
Both solutions are coming in pretty lightweight and a 6kb difference won't matter for most connection speeds. So the most promising aspect to me is that we can enable avoiding the flash-of-unstyled-content with this css-in-js setup.
I did not confirm the theories stated above but wanted to share my ramblings. I'll close this again as I don't want to do anything else besides sharing some thoughts. Thanks for coming to my TED talk.