Update SASS @import rule to @use

[chrisfalaska]

Please verify the version of auro-form you have installed

1.1.0

Please describe the bug

The SASS @import rule has been deprecated, leading to lots of warnings in the console.

All form components should use the new @use rule:

nolimits4web/swiper#7771

@use '@aurodesignsystem/webcorestylesheets/src/core' as *;

Reproducing the error

Run npm run build and note the warnings i the console.

Expected behavior

There should be no deprecation warnings in the console.

[chrisfalaska]

Updating to @use has namespace implications.

@import places everything inside the global namespace, while @use creates individual namespaces:

https://sass-lang.com/documentation/at-rules/use/

After updating the @import directives in auro-formkit to use @use, I was running into an issue where the _breakpoint.scss file in WebCoreStyleSheets could no longer reference the variables from SCSSVariables in @aurodesignsystem/design-tokens:

@use '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables' as *;
@use '@aurodesignsystem/webcorestylesheets/src/breakpoints' as *;
@use '@aurodesignsystem/webcorestylesheets/src/core' as *;

:host(:not(:last-of-type)) {
  @include auro_grid-breakpoint--sm {
    &:after {
      background-color: var(--ds-auro-calendar-month-divider-color);
    }
  }
}

Error: Undefined variable.
    ╷
188 │   @media screen and (min-width: $ds-grid-breakpoint-sm) {
    │                                 ^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 188:33  auro-grid-breakpoint--sm()
  src/styles/color-month.scss 14:3                                   root stylesheet

I tried creating named namespaces:

@use '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables' as tokens;
@use '@aurodesignsystem/webcorestylesheets/src/breakpoints' as breakpoints;
@use '@aurodesignsystem/webcorestylesheets/src/core' as core;

@include breakpoints.auro_grid-breakpoint--sm

But this required updating @aurodesignsystem/webcorestylesheets/ to also use the @use directive, which would have implications for other components using the NPM package.

I was able to create a _custom-breakpoints.scss file in auro-formkit and re-assign the variables in custom breakpoints, but this was a poor development pattern as it introduced hard-to-maintain dependencies and fractured the dependency of WebCoreStylesheets:

@use '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables' as tokens;

// Define the breakpoint mixin using the tokens directly
// requires re-assigning the breakpoints with custom values

@mixin auro_grid-breakpoint--sm {
  @media screen and (min-width: tokens.$ds-grid-breakpoint-sm) {
    @content;
  }
}

Closing as "won't do" since @import continues to work as expected.

Related issue: AlaskaAirlines/WebCoreStyleSheets#201