Is it possible to import a class name from CSS module inside another module?

[Kadeluxe]

Basically, how to target a selector from child.module.scss in parent.module.scss?
https://stackblitz.com/edit/vitejs-vite-vce7hy?file=src%2Fcomponents%2FParent%2FParent.vue

I was under impression that my example should work given it resolves a @value from child.module.scss:

but instead Parent has its style like that:

._child_zo91t_5 {
  background: yellow;
}
._parent_s1f6z_2 {
  --child-value: "This is a child value";
}
._parent_s1f6z_2 ._child_zo91t_5 {
  color: red;
}

so it imports the @value but also somehow includes the child.module.scss and gets wrong .child selector.

Meanwhile, JS import gets correct .child selector.

Is it a bug?
Is there a way to do that in Vue?

Note: I'm aware that this example can be written in other way to still style the Child.
My question is about CSS modules in general.
I ask about the possibility to import a class from another CSS module.

[modelair]

importing modules imports all content of imported module to destination.

create shared file with class name and import it anywhere in js or in (s)css

@value btn from "../../style/shared/btn.module.scss";

btn.module.scss with empty class:

.btn{
}

im my case thats works fine.

P.S don't use special words as @value. parser will replace all of these.
like a @value flex from ...

@value flex from

.flex {
display: flex;
}

generated

.flex_fdsfsd {
display: flex_fdsfsd;
}

[Kadeluxe]

This looks promising, thank you!!
I haven't thought about creating an empty file with class names.

importing modules imports all content of imported module to destination

I was hoping that there is a "clearer" approach in a sense that it wouldn't happen 😐

Still, your suggestion is quite reasonable. I will give it a try soon.

[modelair]

there are the "kostyli", mate :)

[Kadeluxe]

Yeah, this is indeed not perfect but it works. Thanks for this idea.