Add PostCSS benchmark
bmeurer opened this issue · 13 comments
@sokra mentioned that postcss is a very popular loader for webpack as well, and we should cover that in this benchmark suite.
There seems to be a synchronous API for postcss that just consumes string inputs. We also need to find representative inputs, ideally such that we get a similar runs/sec as the other tests.
@alopezsanchez That's awesome! Issue #19 might be an easier start, since it's just about extending an existing benchmark. An even easier first PR would be to npm update all libraries under test and bump the version of the benchmark. Wanna pick that up?
Yes, of course. Count me in! I'll do it in the next few days.
Hello! I'll take a look at this. Any guidance is welcomed!
Cool. Unfortunately I don't know anything about postcss, except that people use it a lot. Maybe you can check some popular packages using it to see which core workloads are important. Maybe @sokra can share some of his thoughts here.
Any pointers, @ai?
Hi. It is a good idea. Right now PostCSS has more downloads than Babel, webpack and ESLint:
http://www.npmtrends.com/postcss-vs-node-sass-vs-less-vs-react-vs-babel-vs-eslint-vs-webpack
Here is our internal benchmark. You can copy ideas from it:
https://github.com/postcss/benchmark/blob/master/preprocessors.js
My recommendation is to take Bootstrap CSS and some nesting rules and call Autoprefixer with postcss-nested.
Hi @ai. I see that you use the compiled version of Bootstrap (https://github.com/postcss/benchmark/blob/master/gulpfile.js#L30) for the benchmarks, which is already prefixed.
Sorry if this is a silly question, but would not it be better to use a file without compilation? Would not it be more realistic?
Thank you!
@alopezsanchez run Autoprefixer with browsers: [] to clean prefixes and that run Autoprefixer in benchmark to add prefixes 😄.
Note, that you should select exact browsers versions for Autoprefixer (chrome 50, firefox 50 instead of last 1 chrome version) to be sure in same result in the future.
@ai Ah, okey, perfect. Similar think with nested rules I guess.
I have a doubt. Should we call postcss.process in the benchmark, right?
postcss(plugins).process(css).then(result => {
result.css
})But you can use sync version (just process(css).css), but most of PostCSS runners call async version.
Don't forget to call .css because if lazy loading. It will start processing.
Promise based APIs might not work with the web-tooling-benchmark. Last time I tried this (with rollup), it didn't work properly across the various JS shells (I think jsc at least had trouble). This might have been resolved meanwhile.