Transition to Sass Modules

[mattrosno]

Summary

Towards the end of 2020, there was an announcement that LibSass, and the corresponding ecosystem, was officially deprecated. 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 and resources:

• LibSass is deprecated
• Sass Modules

Job stories

1. When using Carbon component Sass, I want my imports (now @use rules) to be simple and deterministic so my imports no longer look like @import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss'.

Success measures

1. All elements and components are converted to Sass Modules
2. @carbon/import-once is deprecated
3. Reference docs are updated
4. Migration docs are complete

Sponsoring team

Carbon team

[mattrosno]

Discussion:

• Transition to Sass Modules carbon#7539

Epic:

• Transition carbon-components to Sass Modules carbon#8138