Another rant about not being able to import a class from another file

[thojanssens]

Say we have a parent component with the following css styles:

/* Parent.module.css */

.foo {
  /* code */
}

Problem: we want to use the .foo class from the style of a child component like so:

/* Child.module.css */

.foo .bar {
  /* code */
}

If only could we just import the class, for example like so:

/* Child.module.css */

@value foo from "./Parent.module.css";

.foo .bar {
  /* code */
}

Unfortunately the result of the above seems to be inconsistent among bundlers and compilers, which doesn't make it a reliable solution (the very frustrating thing is that it "almost" works with Vite... but not). According to what I've seen on SO, some users could make it work but then I don't know which bundler/compiler they are using.

Really the only way I found is to use :global, but I hate polluting my global name space.

Another way to reuse parent styling is to use composes, however the example that I had in mind is a parent class that may be set or not, and we style the child accordingly.

Even though this case should be very rare, as the whole idea is to scope locally per module, it may be very useful on RARE occasions when a parent and a child are very tightly related, and we still want separate component files.

CSS Modules is a beautiful project, it's old but for me personally it's the best CSS tool available. It's unfortunate that it does not address some shortcomings like the recurrent question of importing a class in a css file from another css file, while technically it could be feasible, it just needs to be spec'ed out.