import in 1.0.0 seems to be lot slower than 0.6.x

[MoOx]

@magsout reported to me that we got a x7 times.
I need to take a look to that.

---

Edit: not that much :)

[MoOx]

@magsout result

before 1.0 (cssnext 0.6.6)

[16:40:54] Finished 'stylesheets' after 4.99 s

after 1.0

[16:17:45] Finished 'stylesheets' after 37 s

[MoOx]

I just added a simple benchmarks.js script to see which feature is slow (runned on a very simple test/fixtures/cases/example.css file.
EDIT: THIS BENCH IS SHIT

❯ node benchmarks.js
customProperties takes 0.20704s
calc takes 0.03314s
customMedia takes 0.01792s
mediaQueriesRange takes 0.00871s
customSelectors takes 0.00889s
colorRebeccapurple takes 0.07094s
colorHwb takes 0.07437s
colorGray takes 0.09796s
colorHexAlpha takes 0.07138s
colorFunction takes 0.11102s
fontVariant takes 0.00786s
filter takes 0.08778s
rem takes 0.01469s
autoprefixer takes 1.04424s

autoprefixer seems responsible :/

@ai any idea ?

[ai]

Yeap, Autoprefixer has too difficult logic inside. I canceled many issues, because they will make Autoprefixer slower, but anyway we have too many checks and look backs.

But I will start optimization process.

BTW, anyway Autoprefixer is the fastest prefix solution right now :D.

[ai]

Task about optimization: postcss/autoprefixer#406

[MoOx]

My previous bench was buggy.

Here is a more relevant

❯ node benchmarks.js
Each features is tested on a 2MB input (>100 000 lines)

customProperties takes 1.320512s
calc takes 1.073848s
customMedia takes 0.967321s
mediaQueriesRange takes 0.514548s
customSelectors takes 1.165082s
colorRebeccapurple takes 0.557048s
colorHwb takes 0.591754s
colorGray takes 0.595769s
colorHexAlpha takes 0.557469s
colorFunction takes 0.639324s
fontVariant takes 0.681094s
filter takes 0.661993s
rem takes 0.774401s
autoprefixer takes 1.101562s

So autoprefixer is not that slow @ai. My bad.

@magsout I not really sure about how you can get slow result like that. Do you have a lot of import ?
If you don't want to share your CSS here, can you send that to me in private so I take a look ?

[MoOx]

@magsout maybe you have a looots of import and a lot or url() references ?

[MoOx]

I make some tests with 0.6.6 and got stuff like that

❯ node test/benchmarks.js
Each features is tested on a 2MB input (>100 000 lines)

import takes 0.516442s
customProperties takes 1.294058s
calc takes 1.186492s
customMedia takes 0.931895s
mediaQueriesRange takes 0.65119s
customSelectors takes 1.020495s
colorRebeccapurple takes 0.577041s
colorHwb takes 0.649878s
colorGray takes 0.668233s
colorHexAlpha takes 0.634849s
colorFunction takes 0.963854s
fontVariant takes 0.710153s
filter takes 0.622182s
autoprefixer takes 1.032876s

Result seems to be the same.

Note that import is not a feature anymore in v1.0 (it's an option). Like url. So I think I might be one of this 2, probably url option since it's new. If you inline, it might be the reason. Both import & url option use fs sync :/ (no choice for now).

[ai]

I think anyway Autoprefixer speed up will be nice.

[MoOx]

Always :)
But it's not the responsible for this weird difference in @magsout case.

[magsout]

I tried on my MBA (yesterday I tried on another machine)

version gulp-cssnext : 0.6.0
app.css : https://gist.github.com/magsout/64cd2b6465db13bf70bb
admin.css : https://gist.github.com/magsout/e581ce61427c6f128f82
gulpfile.js : https://gist.github.com/magsout/077dcaa65ce66feac5f1

MacBook-Air:public GuillaumeDEMESY$ gulp stylesheets
[10:59:31] Using gulpfile ~/Sandbox/projects/cloudspire/public/gulpfile.js
[10:59:31] Starting 'stylesheets'...
[10:59:33] Finished 'stylesheets' after 1.85 s

version gulp-cssnext : 1.0.0
app.css : https://gist.github.com/magsout/64cd2b6465db13bf70bb
admin.css : https://gist.github.com/magsout/e581ce61427c6f128f82

MacBook-Air:public GuillaumeDEMESY$ gulp stylesheets
[11:30:04] Using gulpfile ~/Sandbox/projects/cloudspire/public/gulpfile.js
[11:30:04] Starting 'stylesheets'...
[11:30:09] Finished 'stylesheets' after 5.29 s

Edit: I forget to add admin.css
Edit2: added gulpfile.js

[magsout]

If I runned only on app.css : [11:34:38] Finished 'stylesheets' after 869 ms

If I runned only on admin.css [11:35:14] Finished 'stylesheets' after 3.8 s

And yes, I have lot of import in that file.

[magsout]

Here are the tests I made:

gulpfile.js: https://gist.github.com/magsout/a649f3b0816c62a8f3e2
app.css : https://gist.github.com/magsout/ad133606f845eb735be4

gulp-cssnext : 0.6.0 - features: false
[20:38:07] Finished 'stylesheets' after 414 ms

gulp-cssnext : 0.6.0 - features: true
[20:54:11] Finished 'stylesheets' after 628 ms

gulp-cssnext : 1.0.0 - features: false
[20:57:38] Finished 'stylesheets' after 3.05 s

gulp-cssnext : 1.0.0 - features: true
[20:58:04] Finished 'stylesheets' after 3.78 s

No import, all CSS in one file (about 10 000 lines)
gulp-cssnext : 1.0.0 - features: false
[21:12:53] Finished 'stylesheets' after 627 ms

No import, all CSS in one file (about 10 000 lines)
gulp-cssnext : 1.0.0 - features: true
[21:13:07] Finished 'stylesheets' after 637 ms

@MoOx @ai , So I think the problem is postcss-import

[magsout]

@MoOx tell me if my tests are enough, of if you need anything else

[MoOx]

Can you try with url to false too ?

[magsout]

with url

gulp-cssnext : 1.0.0 - features: false - url : false
[23:12:25] Finished 'stylesheets' after 3.9 s

gulp-cssnext : 1.0.0 - features: false - url : true
[23:12:10] Finished 'stylesheets' after 4.18 s

No import, all CSS in one file (about 10 000 lines) - url : false
gulp-cssnext : 1.0.0 - features: false
[23:15:52] Finished 'stylesheets' after 596 ms

No import, all CSS in one file (about 10 000 lines) - url : true
gulp-cssnext : 1.0.0 - features: true
[23:16:31] Finished 'stylesheets' after 639 ms

[MoOx]

So it clearly seems related to a postcss-import change. We need to take a deeper look into that.

[MoOx]

Cannot reproduce with the private data you send me @magsout.

[magsout]

seems ok now