v6: Sass modules only

[mdo]

This is a WIP effort to pull out the Sass module changes from my v6 branch to see how minimal we can make an earlier release to get folks onto newer versions of Dart Sass, Sass modules, etc. TBD if we do this, but wanted to try over the weekend. Still a few more things to bring in here, but it's getting close. I think the _maps and _variables-dark are my current biggest problems.

This branch aims to:

1. Migrate to Dart Sass only, dropping the older and deprecated Node Sass.
2. Replace all @import with @use and @forward, including in our documentation.
3. Lightly reorganize the scss/ directory with additional subfolders.
4. Colocate Sass variables, loops, and mixins within each stylesheet that relies on them.
5. Minimally revamp our theme colors, functions, and some global configuration variables to avoid circular dependency imports with the move to Sass modules. More info coming here…
6. Restore flex grid alongside CSS grid, update grid bundle

Optional changes that feel within reason of a more focused v6 release:

• Dropping jQuery interfaces
• Bumping browser support slightly
• Embrace logical properties exclusively, thereby dropping our RTL bundles
• Utilities: migrate aspect ratio helper to utility, some additional and more modern utilities

What's not coming that would be moved to a faster v7 release:

• CSS layers
• Revamping the utility API to allow multiple selector types, removing !important for layers, streamlining keys
• Nearly all utilities and helpers changes
• More extensive changes to theming, color modes, and colors
• Dropping flexbox grid system for CSS Grid system

Probably some other things to pull out too, but wanted to spike this out.

[ajiho]

I'm glad to have started considering this and look forward to updates

[richware]

I have just spent a week converting 5.3.3 to use namespace removing all @imports and using @use/@forward. I have created a 5.3.6 version (on my system) that I would be willing to share for those using the newest version of PhpStorm which advanced dart sass and deprecated @import.

This is a temporary fix until v6 is released and I would be willing to share.

[ajiho]

@raajtram

I think @mdo will soon complete the migration in this area, and I am also waiting for it

2. Replace all @import with @use and @forward, including in our documentation.

Just for this point, it seems like we don't need to release it in v6, right?
Could it be 5.4?

[mdo]

Just for this point, it seems like we don't need to release it in v6, right?
Could it be 5.4?

Not the way we want to do it. It requires changing all our imports, and to allow the new Dart Sass customization methods, it feels like the right approach to refactor some things now.

It was suggested to us that we could double the number of files we have and so some custom forwarding (I think Core UI did this with their Bootstrap fork), but that pollutes the codebase and makes things much less approachable. Making the dependencies and modules super clear feels right at this time.

[julien-deramond]

Just to remember checking it, maybe we can switch to rgba() or color-mix() in this file and _colored-links.scss.

[julien-deramond]

Since it's going to be a major version, we'll need to get rid (and probably document in the migration guide) all the things that were deprecated in v5.

[mrholek]

Just for this point, it seems like we don't need to release it in v6, right?
Could it be 5.4?

Not the way we want to do it. It requires changing all our imports, and to allow the new Dart Sass customization methods, it feels like the right approach to refactor some things now.

It was suggested to us that we could double the number of files we have and so some custom forwarding (I think Core UI did this with their Bootstrap fork), but that pollutes the codebase and makes things much less approachable. Making the dependencies and modules super clear feels right at this time.

@ajiho, as @mdo mentioned, the only way to maintain backward compatibility is to double the number of files by adding a *.import.scss scss file, which is not an elegant solution.