Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cli #27

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Cli #27

wants to merge 8 commits into from

Conversation

pickfire
Copy link
Contributor

No description provided.

src/main.rs Outdated Show resolved Hide resolved
src/main.rs Outdated Show resolved Hide resolved
@pickfire
Copy link
Contributor Author

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.

@connorskees
Copy link
Owner

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?

@pickfire
Copy link
Contributor Author

pickfire commented Jul 26, 2020

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"

@pickfire
Copy link
Contributor Author

pickfire commented Aug 1, 2020

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.

@pickfire
Copy link
Contributor Author

pickfire commented Aug 8, 2020

@connorskees What's next on this?

Cargo.toml Outdated Show resolved Hide resolved
src/main.rs Outdated Show resolved Hide resolved
}

/// Check if string ends with sass or scss.
fn is_xcssfile(s: &str) -> bool {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I understand why this function is named the way it is

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it checks for both sass and scss so it means xcss, x means unknown. Maybe you have something better in mind?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/main.rs Outdated Show resolved Hide resolved
@pickfire
Copy link
Contributor Author

pickfire commented Aug 21, 2020

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?

@connorskees
Copy link
Owner

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?

}

/// Check if string ends with sass or scss.
fn is_xcssfile(s: &str) -> bool {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -66,11 +66,12 @@ phf = { version = "0.8.0", features = ["macros"] }
criterion = { version = "0.3.3", optional = true }
indexmap = "1.5.0"
lasso = "0.3.1"
walkdir = { version = "2.3.1", optional = true }
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to use std::fs::read_dir instead? Is there a functionality / performance improvement that we really need from this library?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we need to recurse a directory, which read_dir does not provide. dart-sass uses a recursive read_dir too. We do this for feature parity.

src/main.rs Outdated Show resolved Hide resolved
let output = match matches.value_of("OUTPUT") {
Some(output) if is_xcssfile(output) => {
eprintln!("output must be directory if input is directory");
std::process::exit(1)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know of a better way to exit early here with an error? This is admittedly a failing in the original code, and ideally at some point we wouldn't use std::process::exit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use panic but the output might not be 1 (127 IIRC), dart errors with 64 but I don't think that is a good idea. I personally think error code should be well defined or just use 1 which is the normal error.

@pickfire
Copy link
Contributor Author

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. #27 (comment)

@pickfire
Copy link
Contributor Author

pickfire commented Aug 21, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants