Allow modular SCSS import and avoid duplicated styles on development mode

Is your proposal related to a problem?

We’ve been trying to use a SCSS module oriented design system that provides a way to explicitly import the SCSS modules as needed when creating styles for a given component.

@import "~@some-repo/design-system/base"; /* settings, mixins, extends */
@import "~@some-repo/design-system/page"; /* utility classes and general stylings */
@import "~@some-repo/design-system/bridge/buttons"; /* button specific styles */

This is fine when generating the final build, because any duplicated css will be ignored.

But when running the project in development mode, duplicated styles are prepended to the head section of the generated html file

Describe the solution you’d like

A solution to this problem would be to add an opt-in configuration for doing something like this:

https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-once-importer

This would allow for the generated prepended style tags to avoid duplicated styles:

// Example:
@import 'style1.scss';
@import 'style1.scss'; /* Duplicated on a different component .scss file */
@import 'style2.scss';

Generates:

// Contents of style1.scss:
.selector1 { }
.selector2 { }

// Contents of style2.scss:
.selector3 { }
.selector4 { }

Describe alternatives you’ve considered

This: https://github.com/webpack-contrib/sass-loader/issues/145#issuecomment-173984354

And also, importing all SCSS modules that are common to more than one component style into the main .scss file and add ad-hoc scss modules as needed into this main file (not ideal as it would limit us from sharing the components with embedded styles)

Additional context

I’d love to hear of any other alternatives you might have used that wouldn’t require us to import all base files when using the design system.

I’ve considered using CSS Modules and CSS in JS, but this would limit us from making the design-system framework agnostic

[mylnikovD]

Hello guys Can we expect any progress on that issue? Or is there a manual way to get rid of duplicates?

[mauriciotasca]

@mauriciotasca i’ve tried the dart version on a new CRA app and it doesn’t solve the issue when using “@use” or something similar. Did you find a solution for this? Our project is getting quite large and inspecting the DOM in chrome is becoming a pain.

Unfortunately not.

I usually have this type of issue when using libs that weren’t previously prepared to work with “@use” and heavily depend on “@import”.

Using partial imports works for some cases, have you tried it?

_aubmodule.scss

Sass discourages the use of “@import” and will phase it out as per this link: https://sass-lang.com/documentation/at-rules/import

Interestingly enough, they seem to have created a tool That migrates code that relies on “@import” to employ usage of the “@use” keyword instead:

https://sass-lang.com/documentation/cli/migrator

Please test it out and come back with your feedback about the tool!

Best of luck!