Transition to Sass Modules

[joshblack]

Towards the end of 2020, there was an announcement that LibSass, and the corresponding ecosystem, was officially dedicated. As a result, it seemed important that we take a look at leveraging Dart Sass as opposed to Node Sass in our upcoming release. In addition, we have several existing problems that we'd like to see addressed in our upcoming release:

• Projects that include Carbon's Sass in their build tool (webpack, parcel) experience long cold-start and recompilation times, upwards of a minute
• It is unclear what parts of the project are public or private, in other words what parts do we intend for developers to leverage and what parts do we intend to keep internal
• It is confusing for developers to know how to properly configure Carbon using our global flags
• Our default stylesheets for several components are large and/or contain high amounts of specificity that we'd like to lower

LInks & Resources

• LibSass is Deprecated
• Sass Modules

[joshblack]

Filepath conventions

We currently use a pretty lengthy pass in carbon-components, would be great if the default stylesheet was available at the root level and any subsequent modules available at scss. For example:

// Use all styles
@use 'carbon-components';

// Use all styles with configuration
@use 'carbon-components' with (
  $css--reset: false
);

// Include specific modules
@use 'carbon-components/scss/color';

// Include a component
@use 'carbon-components/scss/components/accordion';

We will also finally be able to drop our internal folders when we expect consumers to include node_modules in their includePaths configuration 👍