@import rule is now deprecated. Migrate to @use and @forward

[justinbhopper]

Sass 1.80.0 has recently deprecated the @import rule, causing warnings to appear during compile. Now might be a good time to migrate blueprint's scss to @use and @forward rules, which have been supported since v1.23.0 (2019). Support for @import will be removed entirely in 2 years.

No doubt migration is non-trivial, but I believe the changes necessary are:

1. For any @import occurring for the purpose of importing variables, mixins, or functions, use @use instead. Multiple files may need to be imported using @use, since Sass only includes variables that were defined in the file directly imported. The variables/functions will be available via a namespace, although it is possible to import them as global for an even easier migration.
2. For any @import occurring for the purpose of including the contents of another file (e.g. as seen in core/src/blueprint.scss), use @forward instead.

They provide a migration tool, although I have not tried it so I cannot speak on it.

[justinbhopper]

@adidahiya I'd like to contribute a PR in the future for this.

Would this be welcome, or would your team prefer this be done under the scope of something larger in the future roadmap?

[jscheiny]

Thanks for flagging this issue. We'd be open to a contribution for this change.

[ggdouglas]

Hey @justinbhopper, we generally consider @blueprintjs/core/lib/scss/variables to be our public Sass API. Could you clarify which SCSS files you are consuming that are leading to these deprecation warnings? This will help us ensure proper alignment with our public API usage. Appreciate your insight!

[justinbhopper]

@ggdouglas Sure, its my pleasure!

Regarding the public API: I believe these warnings would occur when importing @blueprintjs/core/lib/scss/variables with SASS 1.80.0, because variables.scss is using the @import rule to import other scss files.

Currently, our team is consuming core/src/blueprint.scss so that we can customize the colors/theme of Blueprint. It's my understanding this is not officially supported public API, but a large portion of the community is also doing this for similar reasons. I believe it's the only way to achieve color customization, and Blueprint has done a good job so far with unofficially supporting the practice.

Here is some extra info:

1. When BlueprintJS upgrades to SASS 1.80.0 (currently, using 1.70.0), deprecation warnings will occur in BlueprintJS' internal SASS compile.
2. BlueprintJS would not be able to upgrade to SASS v3.0 when it releases in a few years unless it migrates to using @use and @forward.
3. Migrating to @use and @forward now will allow the community to continue to import the scss files. We can expect a larger percentage of the public community to begin this migration now that deprecation warnings are occurring.

[ggdouglas]

@justinbhopper Thanks for the clarification—that makes sense. We're looking to formalize this customization process in future releases, but for now, I'm okay with migrating the syntax here as long as it doesn’t break current Blueprint consumers. 👍

[justinbhopper]

@ggdouglas Looks like we should reopen this issue, since #7157 had to be reverted.

Is there a long-term plan in mind to migrate to @use? I suspect it may require breaking changes. Migrating has to happen eventually, since SASS is dropping support for @import. I'm not sure if there is a way to do it that is backwards compatible, unless Blueprint ships two sets of stylesheets for a time.

[justinbhopper]

@ggdouglas I noticed in another thread you mentioned v6, so perhaps the best plan is to prepare this migration to happen in v6 release. This way, the use of @import can just be deprecated in v5 and v6 can be where the transition happens. Thoughts?

cc: @jscheiny