Consider using gulp-dart-sass to compile Sass

[adamjohnson]

What's going on right now

The Design System currently uses gulp-sass to compile Sass files. Gulp-sass, by default, uses node-sass/libsass by default. According to the maintainer of Sass, people should use Dart Sass (the official compiler) instead of Node Sass/Libsass.

https://github.com/mattdsteele/gulp-dart-sass

Results

Right now everything works as expected; however, we cannot guarantee this forever.

Expected results

Moving to gulp-dart-sass course-corrects any future errors we might see from Sass/CSS syntax updates.

What to do now

Before moving to gulp-dart-sass, we should test this package to make sure everything works as expected.

I should also note: the gulp-sass package has the ability to specify a compiler--dart-sass is one of those options.

[adamjohnson]

Got some time to try this out in a project based off of the design system this morning. Found one blocking error that prevents gulp-dart-sass/gulp-sass with the Dart Sass compiler from working:

https://github.com/wvuweb/wvu-design-system/blob/master/scss/utilities/_wvu-slash.scss#L78

For some reason this @while loop and Dart Sass don't work together. The solution? use a @for loop instead:

@for $i from 1 through 5 {
  .wvu-slash {
    ...
  }
}

☝️ I will open a separate issue to document this change.

[adamjohnson]

I've been using gulp-sass + Fibers + the Dart Sass compiler in a project and have not run into any issues.

One thing I did notice is gulp-dart-sass doesn't have issues enabled for that repository. For this reason I am now leaning more towards gulp-sass using the Dart Sass compiler. That said, the Fibers package is depreciated (which gulp-sass recommends). At this point, I think we should let this issue simmer until some of this uncertainty shakes out.

[adamjohnson]

Learned that Sass is deprecating @import in October 2021 in favor of @use. When we transition to use Dart Sass, we should convert @import to @use. Here's a nice video that explains how to do that.

[adamjohnson]

Continuing to drop helpful resources in this thread about Dart Sass: Zell Liew wrote an article about how to use Gulp v4 with Dart Sass.