Using multiple "@use ... with()" with different config on same library

[borisdamevin]

Hi,

Is a way to call twice the same library with @use ... with() but with completely different config?

Example:

// component1.scss

@use 'library' with (
    $color: green
);

.foo {
    @include library.foo;
}

// component2.scss

@use 'library' with (
    $color: orange
);

.bar{
    @include library.foo;
}

// index.scss

@use 'component1';
@use 'component2';

[jathak]

No, this is not possible. One of the goals of the module system is to ensure that each module is only ever loaded once.

If you wish to load the same bit of code multiple times with different options, you should use mixins instead.

[borisdamevin]

Hi @jathak ,

Work good with linear dependencies tree, but what happen if more dpendencies we need use same with?

[borisdamevin]

Hi @jathak 😃

Any idea about my last question?

Thank you by advance!

[jathak]

We generally recommend using @use with only from top-level stylesheets that aren't depended on by any other stylesheets. @use with is really only intended as a limited replacement for overriding !default variables in the module system. For more complex configuration, we recommend using mixins instead.

[borisdamevin]

Hi @jathak,

So on my example, the top level is each sub-library or the only way is use config mixins everywhere?

The with option is more inlighted on documentation instead of mixin config, I sure I'm not alone to thing the with option is magical, but finaly not :(.

Maybe we need better official examples to how use each cases, because I'm lost when errors comes. :(

[jathak]

Yes, using mixins is the best way to go here. I've filed sass/sass-site#604 to improve our documentation here and add some examples of how to adapt code using !default variables to use mixins instead.

[borisdamevin]

Right, thank you @jathak !

[borisdamevin]

Hi @jathak

Now the next problem I see is that the config mixin is not scoped in the @use call. If we include some mixins from the top library after a @use call that uses config mixin, the new config is used inside the include mixin.

Is this the right behavior? If so, we need to understand that all code that is not overridden must be called before any config mixin call.

In this case, the code architecture can come very complicated to prevent any unvolunteer override.

[jathak]

In this case, you probably want to avoid any sort of global state and just have your entire configuration passed in a variable to a main mixin, which then calls any other mixins necessary with that configuration (rather than setting global variables in your main mixin and then reading it in the other mixins).