v3.0.0 - Drop node-sass and require sass

[mlaursen]

Description

Since node-sass has been deprecated in favor of sass, this PR updates all the code to work with sass instead.

Note: All code that was marked with @deprecated will also be removed with this release.

Features

Potential Build Performance Improvements

I ran into performance issues trying to compile the dist/scssVariables.js file in each package as well as the SassDoc examples and found out it was related to the @import resolution. To work around this, I've created a new _everything.scss file which will be available in the non-scoped react-md package as react-md/dist/_everything.scss. Replacing all of the @import statements in the codebase to just be @import 'react-md/dist/everything'; might improve build performance on larger apps.

Note: If you are able to use the new module system, check out the next feature instead of updating your code for the single @import statement.

Partial Support for the new Sass module system

You can switch from @import to @use if you update all your code to use the react-md/dist/_everything.scss file:

-// ...others
-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
+@use 'react-md' as *;

If you have variable overrides:

-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+  $rmd-theme-light: false,
+  $rmd-theme-primary: color.$rmd-theme-purple-500,
+  $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;

With my 2011 Macbook pro, a clean build for my documentation site changed from 213.54s -> 184.38s after updating every .scss file to use the new module system and the combined file provided by the react-md package

Breaking Changes

• removed node-sass support. use sass instead
• removed deprecated props on Tooltipped component
• removed deprecated useIndeterminatedChecked implementation with multiple arguments instead of options
• removed deprecated TooltipHoverModeConfig component
• removed InteractionModeListener alias
• $rmd-theme-dark-elevation now defaults to true

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mlaursen/react-md/3yuHqcaipqCjzV4nZsMnxC2M5QxL
✅ Preview: https://react-md-git-drop-node-sass-mlaursen.vercel.app

[codecov-commenter]

Codecov Report

Merging #1214 (095ae97) into main (f5b652c) will increase coverage by 0.40%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #1214      +/-   ##
==========================================
+ Coverage   81.52%   81.93%   +0.40%     
==========================================
  Files         339      337       -2     
  Lines       10079     9963     -116     
  Branches     2743     2711      -32     
==========================================
- Hits         8217     8163      -54     
+ Misses       1855     1793      -62     
  Partials        7        7              

Impacted Files	Coverage Δ
packages/dialog/src/FixedDialog.tsx	100.00% <ø> (+100.00%)	⬆️
packages/layout/src/Configuration.tsx	100.00% <ø> (ø)
...ges/utils/src/mode/UserInteractionModeListener.tsx	100.00% <ø> (ø)
packages/form/src/useIndeterminateChecked.ts	100.00% <100.00%> (ø)
packages/tooltip/src/Tooltipped.tsx	100.00% <100.00%> (ø)
packages/utils/src/sizing/useResizeObserver.ts	100.00% <100.00%> (ø)
packages/utils/src/containsElement.ts	100.00% <0.00%> (+7.69%)	⬆️
packages/typography/src/SrOnly.tsx	100.00% <0.00%> (+100.00%)	⬆️
packages/table/src/TableContainer.tsx	100.00% <0.00%> (+100.00%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f5b652c...095ae97. Read the comment docs.