Styled-components: Bundlesize and runtime postCSS

Created on 14 Mar 2017  路  3Comments  路  Source: styled-components/styled-components

We're attempting to finally sort out our styles and styled-components looks good. But the bundle size is very large, bigger than the UI components framework we're using even. Looking over the source it appears like it's shipping postCSS for runtime parsing which is unfortunate.

Csjs, styled-jsx and a couple of others allow for this to happen compile-time via Babel (for instance babel-plugin-csjs-postcss) with zero added bulk or cpu consumption. I know @mxstbr stance on postCSS but would it be OK if it's limited to the basic needs of styled-comps, basically allowing users to offload the work that's now being handled runtime to Babel?

Most helpful comment

@k15a @drcmda there's another thing on the to do list that will slightly improve runtime performance and shrink the bundle size even more, which will hopefully land in v2: CSS preprocessing.

I'm currently working on a preprocessor that processes the css in our babel plugin and thus eliminates the need for stylis, if you opt in.

All 3 comments

In v2 we are switching from PostCSS to Stylis which will cut the bundle size in half. I don't know if there is much more we could improve to shrink the bundle size more.

@k15a @drcmda there's another thing on the to do list that will slightly improve runtime performance and shrink the bundle size even more, which will hopefully land in v2: CSS preprocessing.

I'm currently working on a preprocessor that processes the css in our babel plugin and thus eliminates the need for stylis, if you opt in.

Thanks a lot @k15a , that's more than i could have hoped for!

@philpl Awesome! Normally we have about zero use for a runtime parser even if it's just a couple of kb and until now it was the only thing keeping us worried.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

smooJitter picture smooJitter  路  3Comments

ekfuhrmann picture ekfuhrmann  路  3Comments

redroot picture redroot  路  3Comments

robbue picture robbue  路  3Comments

garmjs picture garmjs  路  3Comments