variables.scss is incompatible with node-sass

[adidahiya]

Environment

• Package version(s): core v4.1.1

Bug

@blueprintjs/core v4.1.1 contains a lib/scss/variables.scss file which uses @use "sass:math" and math.div(...). This language feature is only available in Dart Sass v1.33+, and not available in LibSass / node-sass (see docs). This means that node-sass compatibility is broken in the latest release.

Solution

Update generate-css-variables script, use get-sass-vars functionality (we are already doing this to generate Less variables) to simplify the variable values and compute the math which math.div() is currently doing.

[bjornhanson]

I updated to @blueprintjs/core v4.1.1 and am seeing an error related to variables.scss when trying to build our project with Parcel.

src/client/css/main.scss:9:27: Undefined variable.
  ╷
9 │ $pt-app-background-color: $light-gray5 !default;
  │                           ^^^^^^^^^^^^
  ╵
  node_modules/@blueprintjs/core/src/common/_color-aliases.scss 9:27  @import
  node_modules/@blueprintjs/core/src/common/_variables.scss 5:9       @import
  src/client/css/main.scss 13:9                                       root stylesheet

I know you said pulling in @blueprints/*/src/**/*.scss files might cause problems. We're doing that quite extensively to apply our own theme based on requirements from our design team. Just want to verify that this error is expected behavior.

[adidahiya]

@bjornhanson thanks for the flag; do you know if you're bundling with node-sass or dart-sass? you would have node-sass as a dependency if it's the former, otherwise sass.

[bjornhanson]

We're using dart-sass. We've got sass as a dependency.

[pgoldberg]

@bjornhanson Are you importing a file that includes $light-gray5? From the error, it looks like it's not imported (_color-aliases.scss references $light-gray5, but does not import it). Try importing either @blueprintjs/core/lib/scss/variables.scss or @blueprintjs/colors/src/_colors.scss before your _color-aliases.scss import

[bjornhanson]

We're importing @blueprintjs/core/src/common/variables, which used to import @blueprintjs/core/src/common/_colors.scss before@blueprintjs/core/src/common/_color-aliases.scss. We're not importing _color-aliases.scss directly.

If I import blueprintjs/core/lib/scss/variables.scss or blueprintjs/colors/src/_colors.scss, the error goes away (thanks!) and then it's onto the next error. Upgrading to v4 might be something we'll have to punt until later when we have time. Our custom theme overrides might be more coupled to how @blueprintjs/core v3.53.0 (what we're currently using) works than I have time to deal with right now.