Is it possible to use a class from another CSS Module?

user_3355252 0
Viewed 2208

Is it possible in one CSS Module to use a class from another CSS Module?

The problem is that CSS Modules is doing it's own class names translation and so .class from A.css will become A-module--class-something and .class from B.css will become B-module--class--somethingElse and they will be treated as separate classes.

A.css

.class {
  (...)
}

B.css

/* .class is the same class as in A.css */
.class > .someOtherClass {
}
css-modules
4 Answers

Assuming A and B are both CSS files, if you link to both of them (in the head), they will both operate as normal.

It is important to note that if they say conflicting information (they are targeting the same style attribute) one of the styles will not be applied (it will get crossed out when looking at the development tools). You can get past this problem by using the !important keyword on your styles. But use this keyword sparingly as it is not considered a best practice.

As you can see in the below snip, it chooses one to use. The file names can be seen on the right.

enter image description here

user_138091500

What I was able to do is to "import" the other class like such

@value someClass from "./xxx.module.css";

and then reference it like that:

:global(.someClass) .myClass {
  margin: auto;
}
user_514280

Are you asking for something like this?

A.css

.class {
  /* rule-set */
}

B.css

@import "A.css"
.class > .someOtherClass {
  /* rule-set */
}
user_120602890

After some investigation, it seems there is no direct way to reference a class name.

So I figured out a possible solution:

B.css

:global(.class) > .someOtherClass {
  /* rule-set */
}

Then apply class in your html, and after processing, it will be converted like this:

<div class="class A-module--class--something">
    <div class="B-module--class--somethingElse">
    </div>
</div>

This way, you keep A-module--class--something rule (which won't collide ever) and a "class" reference for more complex rules. Not the best solution since you need to modify your html code, but it will minimize css polluted workarounds.

user_9956130
Related