Skip to content

Remove node-sass in favor of dart sass#6474

Merged
cee-chen merged 6 commits intoelastic:mainfrom
cee-chen:remove-node-sass
Dec 13, 2022
Merged

Remove node-sass in favor of dart sass#6474
cee-chen merged 6 commits intoelastic:mainfrom
cee-chen:remove-node-sass

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen commented Dec 12, 2022

Summary

This PR the last step of #6442 🎉

  • Removes node-sass (which is deprecated and causing issues for M1) in favor of sass
  • Does not update sass's render API to their new compile API - I didn't want to bother figuring that out for something we're no longer going to meaningfully support in the future
  • Silences math division warnings and fixes an & root error that cropped up as a result of the dependency change

Performance notes

Dart sass is indeed slower than node-sass (5s to 9s), but not meaningfully so for our compile times in a way which matters to us (considering we will soon be transitioning off Sass entirely).

Before:

After:

QA

  • Run compiled SCSS through a diff checker and ensure that nothing changed between node-sass and sass
    • ℹ️ Biggest changes were decimal rounding (dart-sass rounds less) and syntax } spacing
  • Quick smoke test of docs site to ensure everything is working
  • Inspect https://eui.elastic.co/pr_6474/#/layout/header/elastic-pattern and confirm that both the .euiBody--headerIsFixed and .euiBody--headerIsFixed--double.euiBody--headerIsFixed CSS class rules exist

General checklist

N/A - dev-only

+ update `sass-loader` while we're here
+ keep legacy `renderSync` API - not worth switching to `compile` since Sass is going away

+ mute `math.div` warnings - we (hopefully...) won't be on Sass long enough for 2.0.0 to come out
…or "&"` error

- switch to syntax that produces the same behavior
@cee-chen cee-chen added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Dec 12, 2022
@cee-chen
Copy link
Copy Markdown
Contributor Author

@breehall and @daveyholler - as our two team members on M1/arm64, do either of you mind pulling down this branch and confirming that EUI can now be developed locally on Node v16 and without Terminal being in Rosetta mode?

@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_6474/

@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_6474/

Copy link
Copy Markdown
Contributor

@daveyholler daveyholler left a comment

Choose a reason for hiding this comment

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

Testing locally:

  1. I checked out the PR
  2. I removed all Node versions < 16 from my machine with nvm uninstall <old version>
  3. I deleted node_modules
  4. I yarn installed with no errors
  5. I yarn started with no errors

Copy link
Copy Markdown
Contributor

@breehall breehall left a comment

Choose a reason for hiding this comment

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

We're looking good! Also smoke tested in the PR preview! Thank you for you quick work on this!

image

@cee-chen cee-chen merged commit 52f9017 into elastic:main Dec 13, 2022
@cee-chen cee-chen deleted the remove-node-sass branch December 13, 2022 18:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants