Carbon: @carbon/import-once - Consider using SASS modules instead

[mister-what]

Summary

Since the end of last year SASS provides a proper module system. Sass source files can be included as a module by using @use instead of @import in sass/scss source files.
The SASS module system takes care of including the css from a sass source file only once in the output.

See the SASS Blog Post.

Justification

The problem that is tried to be solved by @carbon/import-once is solved by the sass compiler natively. This makes maintaining a custom solution unnecessary.
An official CLI tool is available to aid migrating an existing sass codebase.

SASS modules are supported by Dart-SASS since 1.23.0 and available via the NPM package sass

Desired UX and success metrics

• Migration to the module system provides a better developer experience by providing a proper scoping together with a predictable output.
• sass codebases can follow a modular approach, allowing to only compile necessary pieces for a subset of UI components. While properly deduplicating the sass codebase and avoiding duplicate definitions entirely resulting in a overall reduced style sheet size.

"Must have" functionality

_From the SASS Blog:_

• @use only executes a stylesheet and includes its CSS once, no matter how many times that stylesheet is used.
• @use only makes names available in the current stylesheet, as opposed to globally.
  Members whose names begin with - or _ are private to the current stylesheet with @use.

Problems with the use of _@import_

• Even if you chose to explicitly @import every stylesheet that defines members youare using, you’ll end up with duplicate CSS and strange side-effects, because each stylesheet is reloaded from scratch every time you @import it.
• it is impossible to figure out where a given variable, mixin, or function (collectively called “members”) is originally defined - when using @import. Anything defined in one stylesheet is available to all subsequently imported stylesheets

Available extra resources

1. _SASS Blog Post:_ https://sass-lang.com/blog/the-module-system-is-launched
2. _SASS Migrator:_ CLI: https://sass-lang.com/documentation/cli/migrator
3. _Dart-Sass compiled to pure JS:_ https://www.npmjs.com/package/sass

[joshblack]

Hi @mister-what! 👋

Thanks so much for taking the time to write up this issue. There is so much thought/attention to it and we really appreciate it 🙏

We also totally agree. Sass modules are a great path forward. Unfortunately, we're not able to adopt them without a breaking change for adopters so we'll be trying to incorporate this in our next major release!

[joshblack]

Gonna go ahead and close this one out. We're totally going to get to this in v11, but unfortunately, this isn't on our immediate roadmap 👀