Module $style doesn't contain mixins classes or "&name" classes

[sheremet-va]

For example if I have this code in my style tag (scss, module):

.chevron {
   color: red;

   &Up {
      color: green;
   }
}

Type checking for $style fails because it doesn't contain the class chevronUp.

This also applies to global mixins and mixins in general. We have @import "@/styles/_imports.scss" in our additionalData for scss inside Vite config and import them like:

.input {
    @include input;
}

If mixing contains a class or classes, they don't appear inside $style variable. Right now I use useCssStyle in my setup method to bypass that, but that's not ideal.

[johnsoncodehk]

This is a design limitation. If we need to calculate all valid class names, this will be a compiler level job for each style language. (css, scss, less)

And class name renaming feature can't not working on this case.

I suggest you use a single style block to shims the css module types.

<style module>
// you original styles
</style>

<style module>
.chevronUp { }
.chevronDown { }
// ...
</style>

[johnsoncodehk]

I found that useCssModule() type is Record<string, string>, maybe I should change $style types to Record<string, string> & { chevron: string, ... }, that allow all class name from $style in template, but we can't get error report if we have some typing mistake with $style.xxx.

[johnsoncodehk]

Fixed in 0.24.2.