Replace @import with @use rules as the import rules will be deprecated later this year

[tannerdolby]

Fixes #707

[tannerdolby]

Work in progress. Currently this addresses almost all of the @import rules, but I would like to make sure everything works as expected.

[tannerdolby]

In addition, each of the @use rules should/must be written as @use "url" as *; to ensure they aren't scoped to a module so we could use a mixin like:

@use "mixins" as *; // no namespace to reference
@use "vars" as *;

.some-class {
  color: $mdn-neutral600;
  @include sr-only();
}

instead of having to reference namespaces like below (the directory name) or with @use "foo" as c where c is the namespace reference.

@use "mixins"; // namespace is mixins
@use "vars"; // namespace is vars

.some-class {
  color: vars.$mdn-netural600;
  @include mixins.sr-only();
}

Sass Docs:

• @use
• @import

[tannerdolby]

The transition from @import to @use is officially completed!

I know this is a big overhaul, but with the end of the year approaching (@import being phased out) having all of the old rules replaced with @use will be ideal. The way I look at it is, we handle things now rather than "at crunch time" when things start towards the end of this year.

[tannerdolby]

Wrangling to get tests passing in test.scss, only a few mixins that need to referenced and tests should pass.

[tannerdolby]

This is where using index files are super nice! We can simply import the entire directory of stylesheets as a single module rather than worrying about using the "expected" ones which sometimes can be a pain to keep track of.

[tannerdolby]

Voila! Tests are passing with the overhaul to @use 🎉

There are only 4 @import rules left in mdn/minimalist and those are specifically for testing with sass-true.

test.scss

/* Requirements */
@use "true" as *;
@use "../../sass/mixins" as *;
@use "../../sass/atoms/" as *;
@use "../../sass/vars/" as *;

/* Tests */
@import "./test-mixins-buttons";
@import "./test-mixins-links";
@import "./test-mixins-typography";
@import "./test-mixins-utils";

[tannerdolby]

When I try using @use for the ./test-* modules, the sassTrue usage doesn't like it and can't seem to find the mixins although the modules are being referenced and loaded. Since these are the last remaining @import rules, its not a big deal at all to keep them around until we come back and fix it.

I think the reason @use isn't working for the test mixins which use describe and it etc, has something to do with @import and @use with sass-true because I created a reproducible example locally with sass-true and it doesn't seem to like @use for modules in the same directory as the test file test.scss (ie the one being fed to sassTrue(file, ...)

ping for review @schalkneethling

[schalkneethling]

Thank you, @tannerdolby. I will dig into this as soon as possible.

[tannerdolby]

Your welcome @schalkneethling! Ok sounds good.

[tannerdolby]

One thing I noticed while developing on my own site (not applicable here because we don't use any styles after the @use rules in the main Sass file which gets compiled).

I noticed that since @use rules must be placed at the top of the file, if there are any styles (that might override or have higher specificity) defined after the @use rules, such as plain Sass/CSS not being loaded via @use like this:

// style.scss (to be compiled)

@use "foo" as *;
@use "media" as *;

.some-class-that-overrides-media-query-stuff {
  ...
}

this makes importing a module full of media query stylesheets like @use './media' as * a bit odd in terms of the cascade and specificity because the media conditions are loaded in "above" the other styles in that stylesheet. This situation doesn't occur here in mdn/minimalist but I wanted to share my findings with you as well!

[schalkneethling]

Thank you so, so much for this @tannerdolby

[tannerdolby]

Your welcome @schalkneethling! 🎉