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

Replace sassc-rails with cssbundling-rails + sass #5862

Merged
merged 7 commits into from Jan 28, 2022
Merged

Conversation

aduth
Copy link
Member

@aduth aduth commented Jan 26, 2022

Why:

**Why**:

- Hopefully faster
- No more segfaults
- Avoid [deprecated](https://sass-lang.com/libsass) LibSass
   - Using Dart Sass opens up access to new features
- Alignment to new Rails 7 defaults, and companion to jsbundling-rails
Copy link
Contributor

@mitchellhenke mitchellhenke left a comment

Choose a reason for hiding this comment

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

😮

@aduth
Copy link
Member Author

aduth commented Jan 26, 2022

Hopefully faster

Promising results!

Branch Time
main (before 25df21d) 1m46s
aduth-lgds-6-3-0 (#5860) 48s
aduth-cssbundling-rails 27s

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

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

LGTM!

Comment on lines -575 to -576
sassc (2.4.0)
ffi (~> 1.9)
Copy link
Contributor

Choose a reason for hiding this comment

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

YESSSSSS 🔥 🔥 🔥

@@ -50,7 +50,7 @@
line-height: 1.5;
// For content to appear as vertically centered, offset the larger line-height of the banner to
// match the space below the drag text.
margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) / 2;
margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) * 0.5;
Copy link
Contributor

Choose a reason for hiding this comment

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

was this an int vs float issue?

Copy link
Member Author

Choose a reason for hiding this comment

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

Slash as division is deprecated in Sass, so this is just to avoid noisy deprecation messages.

https://sass-lang.com/documentation/breaking-changes/slash-div

Copy link
Member Author

Choose a reason for hiding this comment

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

Now that we're on Dart Sass, we could alternatively swap it with the new math module function, as in d492148.

Copy link
Member

@jmhooper jmhooper left a comment

Choose a reason for hiding this comment

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

Nicely done!

@aduth
Copy link
Member Author

aduth commented Jan 27, 2022

Looks like it's working okay in my sandbox. 👍

While there's a small performance penalty, but I think we'll need to go with sass over sass-embedded in the short term:

  • Need to sort out infrastructure requirements (18F/identity-devops#4227)
  • The 1.0.0 stable release of sass-embedded seems imminent, and probably best to use a stable version of the package (currently 1.0.0-rc.1)

I did notice one issue I'll need to resolve, which is that image-path Sass function calls (example) don't seem to be getting replaced with the path. Hoping it's a small fix.

@aduth aduth changed the title Replace sassc-rails with cssbundling-rails + sass-embedded Replace sassc-rails with cssbundling-rails + sass Jan 27, 2022
@aduth
Copy link
Member Author

aduth commented Jan 27, 2022

I did notice one issue I'll need to resolve, which is that image-path Sass function calls (example) don't seem to be getting replaced with the path. Hoping it's a small fix.

These are helpers added by sassc-rails. Luckily an alternative is available as an option through sprockets-rails, so a matter of turning it on. Updated in eabb79f.

@aduth aduth marked this pull request as ready for review January 27, 2022 20:45
Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

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

LGTM!

Inline watch handling to avoid dealing with tuple results of Promise.all
@aduth aduth merged commit 65e3308 into main Jan 28, 2022
@aduth aduth deleted the aduth-cssbundling-rails branch January 28, 2022 13:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants