Add possibilty to allow other classes than defined in css files

[kasparsuvi1]

Hello!
Thanks for amazing plugin! Works like a charm.

Is your feature request related to a problem? Please describe.
I used typescript-plugin-css-modules and it works very good. But i found myself frustrated when using bem naming convention and typescript-plugin-css-modules together. Because its allowing me to only use classes that are defined in .css file.

imagine we have such a component:

// JSX
<div class={classes['accordion']}>
  <div class={classes['accordion__item']>
  <div class={classes['accordion__footer']>
  
//SCSS
.accordion {
  // no styles for wrapper accordion!
 &__item {...}
 &__footer {...}
}

That generates types like that and gives TS error when using accordion class in JSX:

let classes: {
    accordion__item: string;
    accordion__footer: string;
}

But i would like to keep the accordion class also in JSX. Because it's important when usin BEM naming convention for example.

Describe the solution you'd like
Add new option that adds [key: string]: string; to the end of the dts in createDtsExports.ts.

Describe alternatives you've considered
Currently its achievable through customTemplate option and something like that:

module.exports = (dts, { classes, fileName, logger }) => {
  try {
    return dts.replace('};\n', '[key: string]: string;\n };\n');
  } catch (error) {
    logger.error(error.message);
  }
};

But it was kind of hard to figure out and it still makes DX better even when thought it doesn't show TS error on every class u don't have in css files. But u still can use IDE autocomplete features.

Additional context
I think there can be other reasons someone can want to type their css class little more loose and would be looking for a option like that.

[mrmckeb]

Hi @kasparsuvi1, this isn't something we support today sorry. If we add [key: string]: string; then any string would be valid, which would eliminate some of the benefit of this plugin.

However, you can actually do that yourself using a custom template:
https://github.com/mrmckeb/typescript-plugin-css-modules#customtemplate

I think that should solve the issue for you?

[kasparsuvi1]

Hi @mrmckeb. Thanks for answer!
Yes that solves the issue, as I described in my first post.
And I agree that adding [key: string]: string; eliminates some of the benefits, but it also gives it some new ones.
My point was that it was kind of hard to achieve, when new to the plugin and maybe not documented well enough, so it could be:

1. customTemplate documentation maybe includes example for that?
   or
2. Add new property that adds the same functionality as optional feature.