Navigation Menu

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

v3.0.0 - Drop node-sass and require sass #1214

merged 28 commits into from Aug 13, 2021

v3.0.0 - Drop node-sass and require sass #1214

merged 28 commits into from Aug 13, 2021


Copy link

@mlaursen mlaursen commented Jul 28, 2021


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.


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

Copy link

vercel bot commented Jul 28, 2021

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:
✅ Preview:

Copy link

codecov-commenter commented Jul 31, 2021

Codecov Report

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

Impacted file tree graph

@@            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.

BREAKING CHANGE: `$rmd-theme-dark-elevation` now defaults to `true` instead of `false`
BREAKING CHANGE: `node-sass` is no longer supported and users must switch to `sass`

I really only created this file because after switching from `node-sass`
to `sass`, my `sassdoc` generator ended up taking 45s+ to compile each
example instead of 5-10s. After debugging a bit, I found out the
bottleneck is the file resolution IO so I decided to just combine the
files myself into a single `react-md/dist/_everything.scss` file which
cut down the **total** `sassdoc` generation time to ~55s.

It will be interesting to see if this single file import will improve
build performance for real world apps, but it'll also require users to
be fully migrated to `v3`.
With latest `sass-loader` and `sass`, code can be updated to:

-@import 'react-md/dist/mixins';
+@use 'react-md' as *;

 @include react-md-utils;

Note: If you override variables, do:

-@import 'react-md/dist/mixins';
+@use 'react-md' as * with (
+  // all $rmd-* variable overrides

 @include react-md-utils;
This should no longer be an issue when using `@use "react-md";`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

Update styles to use the new module system is Sass
2 participants