Autoreset "all: initial" does not work when...

[delijah]

...composing (from two different files):

/* app.css */
.title {
    composes: title-font from "./shared/typography.css"
    composes: title-color from "./shared/colors.css"
}

/* shared/typography.css */
.title-font {
    font-family: Courier;
}

/* shared/colors.css */
.title-color {
    color: red;
}

The title does in fact not get any of the composed styles.

[maximkoretskiy]

@delijah Hi! And Thank U for suggestion. Can you describe minimal configuration to reproduce this bug?

[delijah]

@maximkoretskiy Hey! I have setup a small project which shows the wrong behaviour:

https://github.com/delijah/autoreset-bug

As you can see, the title is not gonna get styled at all!

Thanks for your fast response by the way!

[maximkoretskiy]

I have just digged your example and I should say everything works as expected.

If You look in the definition of

<h1 className={styles.title}>autoreset-bug</h1>

in inspector You will see that there are 3 classes for it

<h1 class="_1hWeEHBk qNZx8zG1t4 _1i351sA">autoreset-bug</h1>

One for .title and 2 for shared rules.

The problem is that these shared rules are defined before .title in generated code. And we don't have ability to control it because this order depends on css-modules implementation. The css-modules documentation says that rules appliance order is not defined for dependencies.

So the only way to solve this problem to use solutions that don't depend on order:

• mixins
• !important =)
• variables

I hope this answer will help U. Any ideas?

[delijah]

Thank you very much for your investigations!

Ok, this is sad. Actually i'd like to use css-modules features in my code and stick with them (as long as possible). In my dreams i'd even like to drop sass. Why? I do not like to mix hundreds of technologies, stick with one or two. And i just rewrote my whole app to use composes :(

So what you are saying is, that i cannot use the autoreset plugin in combination with composes?

Unfortunately i have no other ideas. Maybe just use a global resets.sass and risk to not use autoreset/initial.