Css / sass deprecation warnings occur when building the extension

Checklist

• [n/a] I'm using the latest version of the extension (see the latest version in the right column of this page)
  • Extension version: Put your extension version here
• [n/a] I'm using the latest VS Code version (find the latest version here)
  • VS Code version: Put your VS Code version here
• [n/a] I'm using a supported version of GitLab (see README for the supported version)
  • GitLab version: Put your GitLab version here, or say "happens on gitlab.com"

Summary

When running build steps for the extension locally, sass deprecation warnings appear in the output logs.

These warnings make it difficult to see when real errors occur during the build step of the application.

Steps to reproduce

1. Check out the repo.
2. Run npm install.
3. Open vscode in the repo folder.
4. Go to the "Run and Debug" tab.
5. Click on "Run Extension".

Then monitor the console output.

What is the current bug behavior?

The following is emitted in the console:

[chat-watch] DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
[chat-watch] 
[chat-watch] Recommendation: math.div($value, $font-size-base) or calc($value / $font-size-base)
[chat-watch] 
[chat-watch] More info and automated migrator: https://sass-lang.com/d/slash-div
[chat-watch] 
[chat-watch]    ╷
[chat-watch] 27 │   $converted: $value / $font-size-base;
[chat-watch]    │               ^^^^^^^^^^^^^^^^^^^^^^^^
[chat-watch]    ╵
[chat-watch]     node_modules/@gitlab/ui/src/scss/functions.scss 27:15  single-unit-rem()
[chat-watch]     node_modules/@gitlab/ui/src/scss/functions.scss 44:13  px-to-rem()
[chat-watch]     node_modules/@gitlab/ui/src/scss/variables.scss 5:13   @import
[chat-watch]     node_modules/@gitlab/ui/src/scss/bootstrap.scss 1:9    @import
[chat-watch]     node_modules/@gitlab/ui/src/scss/gitlab_ui.scss 1:9    @import
[chat-watch]     gitlab_duo_chat/src/styles.scss 1:9                    @import
[chat-watch]     gitlab_duo_chat/src/App.vue 2:9                        root stylesheet
[chat-watch] 
[chat-watch] DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
[chat-watch] 
[chat-watch] Recommendation: math.div($max - $min, $max-width - $min-width) or calc(($max - $min) / ($max-width - $min-width))
[chat-watch] 
[chat-watch] More info and automated migrator: https://sass-lang.com/d/slash-div
[chat-watch] 
[chat-watch]    ╷
[chat-watch] 63 │   $slope: ($max - $min) / ($max-width - $min-width);
[chat-watch]    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[chat-watch]    ╵
[chat-watch]     node_modules/@gitlab/ui/src/scss/functions.scss 63:11  clamp-between()
[chat-watch]     node_modules/@gitlab/ui/src/scss/variables.scss 115:8  @import
[chat-watch]     node_modules/@gitlab/ui/src/scss/bootstrap.scss 1:9    @import
[chat-watch]     node_modules/@gitlab/ui/src/scss/gitlab_ui.scss 1:9    @import
[chat-watch]     gitlab_duo_chat/src/styles.scss 1:9                    @import
[chat-watch]     gitlab_duo_chat/src/App.vue 2:9                        root stylesheet
[chat-watch] 
[watch] build finished, watching for changes...
[chat-watch] DEPRECATION WARNING: Passing percentage units to the global abs() function is deprecated.
[chat-watch] In the future, this will emit a CSS abs() function to be resolved by the browser.
[chat-watch] To preserve current behavior: math.abs(100%)
[chat-watch] To emit a CSS abs() now: abs(#{100%})
[chat-watch] More info: https://sass-lang.com/d/abs-percent
[chat-watch] 
[chat-watch]    ╷
[chat-watch] 54 │   $dividend: abs($dividend);
[chat-watch]    │              ^^^^^^^^^^^^^^
[chat-watch]    ╵
[chat-watch]     node_modules/bootstrap/scss/vendor/_rfs.scss 54:14             divide()
[chat-watch]     node_modules/bootstrap/scss/mixins/_grid.scss 66:15            row-cols()
[chat-watch]     node_modules/bootstrap/scss/mixins/_grid-framework.scss 43:13  @content
[chat-watch]     node_modules/bootstrap/scss/mixins/_breakpoints.scss 65:5      media-breakpoint-up()
[chat-watch]     node_modules/bootstrap/scss/mixins/_grid-framework.scss 32:5   make-grid-columns()
[chat-watch]     node_modules/bootstrap/scss/_grid.scss 72:3                    @import
[chat-watch]     node_modules/@gitlab/ui/src/scss/bootstrap.scss 10:9           @import
[chat-watch]     node_modules/@gitlab/ui/src/scss/gitlab_ui.scss 1:9            @import
[chat-watch]     gitlab_duo_chat/src/styles.scss 1:9                            @import
[chat-watch]     gitlab_duo_chat/src/App.vue 2:9                                root stylesheet
[chat-watch] 

What is the expected correct behavior?

There should be no deprecation warnings.

Relevant logs and/or screenshots

Possible fixes

We should do one of two options:

• Determine that it's worth fixing these warnings and migrate to the methods suggested in the log output.
• Suppress the warnings.