grass
grass copied to clipboard
connorskees
Cli
I also added directory support. But without a graph for caching, out speed is still quite fast.
> time /usr/bin/sass bootstrap/scss/:/tmp/bootstrap
________________________________________________________
Executed in 445.37 millis fish external
usr time 412.00 millis 0.00 millis 412.00 millis
sys time 60.89 millis 4.13 millis 56.76 millis
> time target/release/grass bootstrap/scss/ /tmp/bootstrap
________________________________________________________
Executed in 668.47 millis fish external
usr time 651.23 millis 0.00 millis 651.23 millis
sys time 17.21 millis 6.38 millis 10.83 millis
> ls /tmp/bootstrap/
bootstrap.css bootstrap-grid.css bootstrap-reboot.css bootstrap-utilities.css
Note that our version is a bit unfair as we do not generate source map files like dart-sass does.
Those timings are quite striking. For me, dart-sass is >2x slower to compile bootstrap and libsass is more or less equal. Is it just the directories that are slow?
No, very likely because we process 4 input files (entry points) without caching, dart-sass have cache but we need to process each dependency again, so if each file use the same _base.scss then we would be processing that 4 times. IIRC sassc is not able to process multiple files.
logs dbg in main and import
[src/main.rs:263] output = "/tmp/bootstrap/bootstrap-grid.css"
[src/parse/import.rs:93] &name = "bootstrap/scss/_functions.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_variables.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_lists.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_breakpoints.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_container.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_grid.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/vendor/_rfs.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_containers.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_grid.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/utilities/_api.scss"
[src/main.rs:263] output = "/tmp/bootstrap/bootstrap-reboot.css"
[src/parse/import.rs:93] &name = "bootstrap/scss/_functions.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_variables.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_mixins.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/vendor/_rfs.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_deprecate.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_breakpoints.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_image.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_resize.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_screen-reader.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_reset-text.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_text-truncate.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_alert.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_buttons.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_caret.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_pagination.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_lists.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_list-group.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_forms.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_table-variants.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_border-radius.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_box-shadow.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_gradients.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_transition.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_clearfix.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_container.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_grid.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_reboot.scss"
[src/main.rs:263] output = "/tmp/bootstrap/bootstrap-utilities.css"
[src/parse/import.rs:93] &name = "bootstrap/scss/_functions.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_variables.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_mixins.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/vendor/_rfs.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_deprecate.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_breakpoints.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_image.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_resize.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_screen-reader.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_reset-text.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_text-truncate.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_alert.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_buttons.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_caret.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_pagination.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_lists.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_list-group.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_forms.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_table-variants.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_border-radius.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_box-shadow.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_gradients.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_transition.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_clearfix.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_container.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_grid.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/utilities/_api.scss"
[src/main.rs:263] output = "/tmp/bootstrap/bootstrap.css"
[src/parse/import.rs:93] &name = "bootstrap/scss/_functions.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_variables.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_mixins.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/vendor/_rfs.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_deprecate.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_breakpoints.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_image.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_resize.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_screen-reader.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_reset-text.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_text-truncate.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_alert.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_buttons.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_caret.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_pagination.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_lists.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_list-group.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_forms.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_table-variants.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_border-radius.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_box-shadow.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_gradients.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_transition.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_clearfix.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_container.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/mixins/_grid.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_utilities.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_root.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_reboot.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_type.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_images.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_containers.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_grid.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_tables.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_forms.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_labels.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_form-text.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_form-control.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_form-select.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_form-check.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_form-file.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_form-range.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_input-group.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/forms/_validation.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_buttons.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_transitions.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_dropdown.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_button-group.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_nav.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_navbar.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_card.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_breadcrumb.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_pagination.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_badge.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_alert.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_progress.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_list-group.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_close.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_toasts.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_modal.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_tooltip.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_popover.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_carousel.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_spinners.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/_helpers.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_clearfix.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_colored-links.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_embed.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_position.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_visually-hidden.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_stretched-link.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/helpers/_text-truncation.scss"
[src/parse/import.rs:93] &name = "bootstrap/scss/utilities/_api.scss"
I am not quite sure how the original : works (looks complicated), there are quite a lot of different types of input accepted by dart-sass, not sure if we want to follow that.
Ping
@connorskees I would say even after this patch it is not good yet, the way the original dart-sass does take it a variety of input format, I don't quite like the way. But it could be improved later on, this just allows easy directory update but good enough to do the basic stuff.
PS Oh I didn't know there is conflict, maybe you want to review it first to see if I should fix the conflict or if there any other changes you would like?
My apologies for letting this go for so long. I am reticent to make this change only because I am wary of adding an additional dependency, and am a bit surprised that we are so far behind dart-sass here in terms of performance.
If there is only 1 compilation, why does caching play into this? I am still very confused as to the role caching plays in all of this. What are we caching? Why?
Why is dart-sass so much faster here? Why is grass so much slower (I'm able to compile Bootstrap in ~350ms on my laptop) compiling Bootstrap as a directory?
If there is only 1 compilation, why does caching play into this? I am still very confused as to the role caching plays in all of this. What are we caching? Why?
There are 4 compilations like I mentioned above. And a lot of the dependencies may be reused. I could add that later.
Why is dart-sass so much faster here? Why is grass so much slower (I'm able to compile Bootstrap in ~350ms on my laptop) compiling Bootstrap as a directory?
Like I mentioned above since we processed 4 input files. https://github.com/connorskees/grass/pull/27#issuecomment-663945184
Could we do is_scss_or_sass? It's only a few characters longer but it should make its purpose much clearer.
The implementation could likely be simplified to s.ends_with(".sass") || s.ends_with(".scss"). Is there a reason to prefer the iterator over that? I would assume the simpler version would be optimized better, though I could be wrong
We could do both method, they should be the same. I did this because last time there was 3 items, "sass", "scss" and "css" which makes it long. Do I still need to do this change? Later we may want to add "css" back since that is what dart-scss do.