Make Sass components self-contained to improve performance

[certainlyakey]

Summary

Right now it is impossible to import just a couple of Sass components from the library to your app without anything else. Because Sass' @import rule is used in the library, when importing a specific Sass component in a consumer app you would also need to import a number of dependent Sass files. Those dependencies are different for each component and are not specified explicitly.

We need the styling components to be self-contained and independent from each other. Importing a component file would automatically bring all the dependencies (possibly not only Sass dependencies, but also CSS variables if those are used).

Ideally a consumer app would need to go an "import-all" strategy only in case it really needs all the components at once.

This will help to reduce bundle size and improve performance – a consumer app would only load the parts of the library it needs.

What alternatives have you tried?

No response

Does this feature request involve any updates to the reference design?

No

Implementation details

Every Sass component would @use all of its dependencies. Splitting some of the existing Sass dependencies (eg colors.scss) might be necessary.

[certainlyakey]

This could help consuming apps to import just what they need. Eg. right now it is not possible to @use a cvi-breakpoint-up() mixin from CVI in a consuming app because that one doesn't @use variables it depends on directly but instead just assumes they are in global scope.