search

MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
536 stars 62 forks source link

Slow with lots of Rules and Declarations - Performance #15

Closed MadLittleMods closed 9 years ago

MadLittleMods commented 9 years ago

@ddprrt wrote this article, PostCSS misconceptions, which brought to light a huge performance issue. When running just the large Bootstrap codebase with a single variable substitution, it takes 14 seconds to compile(on my system, 5 seconds for @ddprrt). You can find the test bench that he created, here.

I investigated and found that I was foolishly cloning the the whole root and then flushing it node.clone().removeAll(). I made a ./lib/shallow-clone-node.js helper to fix this problem.

The testbench now runs at 840ms overall. And when I pre-compile the postcss-import step and then run another process transform with postcss-css-variables, it now only contributes 230ms. Still not a stellar performance but a great improvement.

I hope to refactor and rework this whole codebase with postcss-selector-parser which I believe will greatly increase clarity and reduce complexity. The refactor will also give me a fresh start to address performance.

aside: Thank you Stefan(@ddprrt), for putting some umpf into that performance demo and writing about PostCSS. I really enjoyed your article, PostCSS misconceptions, and I have always viewed PostCSS this way.

MadLittleMods commented 9 years ago

Fixed in v0.4.0 :grinning:

ddprrt commented 9 years ago

Wonderful! Great to hear that you could speed that up :+1: And yeah, PostCSS (plugin) authors are generally aware of the pros and cons ;-) Which is a good thing, I like that they communicate open about it