`@import` and global built-in functions are deprecated in Sass

[wolfy1339]

Describe the bug
Sass is deprecating the @import and global built-in functions
https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/

To Reproduce
Steps to reproduce the behavior:

1. Create a new project that require @primer/css from NPM
2. Install the Dart Sass compiler (npm i sass)
3. Create a new SCSS file that imports @primer/css
4. Try to compile that file
5. See deprecation notices

There is an automatic migration tool

$ npm install -g sass-migrator
$ sass-migrator module --migrate-deps your-entrypoint.scss

See sass/sass#3513
See also other affected projects, twbs/bootstrap#40962

[wolfy1339]

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
14 │ @import './color-modes/index.scss';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/index.scss 14:9  @import
    assets/sass/vendor.scss 1:9               @use
    assets/sass/styles.scss 1:1               root stylesheet

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
15 │ @import './primitives/index.scss';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/index.scss 15:9  @import
    assets/sass/vendor.scss 1:9               @use
    assets/sass/styles.scss 1:1               root stylesheet

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
18 │ @import './core/index.scss';
   │         ^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/index.scss 18:9  @import
    assets/sass/vendor.scss 1:9               @use
    assets/sass/styles.scss 1:1               root stylesheet

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
19 │ @import './product/index.scss';
   │         ^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/index.scss 19:9  @import
    assets/sass/vendor.scss 1:9               @use
    assets/sass/styles.scss 1:1               root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
83 │   $spacer-map-extended: map-merge(
   │ ┌───────────────────────^
84 │ │   (0: 0,
85 │ │   1: $spacer-1,
86 │ │   2: $spacer-2,
87 │ │   3: $spacer-3,
88 │ │   4: $spacer-4,
89 │ │   5: $spacer-5,
90 │ │   6: $spacer-6,
91 │ │ ),
92 │ │ $spacers-large,
93 │ │ ) !default;
   │ └─^
   ╵
    node_modules/@primer/css/support/variables/layout.scss 83:23  @import
    node_modules/@primer/css/support/index.scss 3:9               @import
    node_modules/@primer/css/core/index.scss 9:9                  @import
    node_modules/@primer/css/index.scss 18:9                      @import
    assets/sass/vendor.scss 1:9                                   @use
    assets/sass/styles.scss 1:1                                   root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.

More info and automated migrator: https://sass-lang.com/d/import

    ╷
220 │   $spacer-map-rem-extended: map-merge(
    │ ┌───────────────────────────^
221 │ │   (0: 0,
222 │ │   1: var(--base-size-4, 4px),
223 │ │   2: var(--base-size-8, 8px),
224 │ │   3: var(--base-size-16, 16px),
225 │ │   4: var(--base-size-24, 24px),
226 │ │   5: var(--base-size-32, 32px),
227 │ │   6: var(--base-size-40, 40px),
228 │ │ ),
229 │ │ $spacers-large-rem,
230 │ │ ) !default;
    │ └─^
    ╵
    node_modules/@primer/css/support/variables/layout.scss 220:27  @import
    node_modules/@primer/css/support/index.scss 3:9                @import
    node_modules/@primer/css/core/index.scss 9:9                   @import
    node_modules/@primer/css/index.scss 18:9                       @import
    assets/sass/vendor.scss 1:9                                    @use
    assets/sass/styles.scss 1:1                                    root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
10 │     $value: map-get($breakpoints, $breakpoint);
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/support/mixins/layout.scss 10:13  breakpoint()
    node_modules/@primer/css/forms/form-control.scss 72:5      @import
    node_modules/@primer/css/forms/index.scss 2:9              @import
    node_modules/@primer/css/core/index.scss 19:9              @import
    node_modules/@primer/css/index.scss 18:9                   @import
    assets/sass/vendor.scss 1:9                                @use
    assets/sass/styles.scss 1:1                                root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
52 │       @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
   │                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/layout/app-frame.scss 52:28  @import
    node_modules/@primer/css/layout/index.scss 2:9        @import
    node_modules/@primer/css/core/index.scss 20:9         @import
    node_modules/@primer/css/index.scss 18:9              @import
    assets/sass/vendor.scss 1:9                           @use
    assets/sass/styles.scss 1:1                           root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.keys instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
17 │ @each $breakpoint in map-keys($breakpoints) {
   │                      ^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@primer/css/layout/grid.scss 17:22  @import
    node_modules/@primer/css/layout/index.scss 4:9   @import
    node_modules/@primer/css/core/index.scss 20:9    @import
    node_modules/@primer/css/index.scss 18:9         @import
    assets/sass/vendor.scss 1:9                      @use
    assets/sass/styles.scss 1:1                      root stylesheet

[TylerJDev]

Hey @jonrohan! 👋

By chance, do you have more context on this issue? I see there was a PR linked, but was closed out 🤔

[oromunofrancisovie776-glitch]

Describe the bug
Sass is deprecating the @import and global built-in functions
https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/

To Reproduce
Steps to reproduce the behavior:

1. Create a new project that require @primer/css from NPM
2. Install the Dart Sass compiler (npm i sass)
3. Create a new SCSS file that imports @primer/css
4. Try to compile that file
5. See deprecation notices

There is an automatic migration tool

$ npm install -g sass-migrator
$ sass-migrator module --migrate-deps your-entrypoint.scss

See sass/sass#3513
See also other affected projects, twbs/bootstrap#40962