Blueprint: Compilation issue with newer version of SASS

[vkbansal]

When trying to import to blueprint using SASS, error is encountered.

Environment

• __Package version(s)__:
  
  
  
  • @blueprintjs/core: 3.24.0
  
  
  • webpack: 4.42.1
  
  
  • sass: 1.26.3
  
  
  • sass-loader: 8.0.2
  
  
• __Browser and OS versions__: MacOS Catalina 10.15.4

Steps to reproduce

1. Create a SASS file and add @import "~@blueprintjs/core/src/blueprint";
2. Try compiling it using webpack.

Actual behavior

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: compound selectors may no longer be extended.
Consider `@extend .bp3-menu-item, :hover` instead.
See http://bit.ly/ExtendCompound for details.

   ╷
19 │       @extend .#{$ns}-menu-item:hover;
   │               ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@blueprintjs/core/src/components/menu/_submenu.scss 19:15  root stylesheet

Expected behavior

There should be no error.

[adidahiya]

From my quick googling it seems like you can work around this by using node-sass instead of sass (Dart-Sass). This feature has not been deprecated in node-sass yet. Longer term it looks like we'll need to refactor some of this Sass code.

[vkbansal]

I tried with node-sass too. Same error.

[DTrejo]

If you add a ,, it compiles for sass + parcel at least.
Note that I've yet to actually look at my UI to confirm it looks correct.

node_modules/@blueprintjs/core/src/components/menu/_submenu.scss

-@extend .#{$ns}-menu-item:hover;
+@extend .#{$ns}-menu-item, :hover;

[omeid]

node-sass is deprecated in favour of sass (dart-sass) in Node 14. So this needs addressing sooner than later.

[nickensoul]

Hi everyone!

Just remind that node-sass is officially deprecated now. We're using node-sass for now in our project, but will glad to know any plans and news about Blueprint's migration to dart-sass.
Thanks!

[stolenng-investing]

Hey,
Having this issue also, any plans on resolving it ? i can try also ?

[adidahiya]

This blog post talks about the tradeoffs between the sass versions. It sounds like dart-sass's JS package will slow down our compilation time, but if it's good enough for the bootstrap project, it's probably good enough for us...

I will work on this some time in the next 6-8 weeks, but in the meantime it's open for contributions. I will need to see a performance comparison in this project.

[ChristianIvicevic]

Just wanted to point out that sass doesn't install native dependencies like node-sass does which sometimes causes issues on macOS devices and needs a proper Xcode toolchain. This is one of the reasons I personally prefer sass whenever possible.

[eyalw]

Hi, any plans to migrate to sass? : )