typescript-plugin-css-modules icon indicating copy to clipboard operation
typescript-plugin-css-modules copied to clipboard

Add "deprecated" to unknown class names

Open KurtGokhan opened this issue 2 years ago • 1 comments

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

Add deprecated option to allowUnknownClassnames option, in addition to true and false. Alternatively, there can be a new option named unknownClassnamesAsDeprecated.

This option adds JSDoc's @deprecated tag to Typescript index signature in the dts file, so that they are marked differently in IDEs, but not cause errors (e.g. they have strikethrough in VSCode).

Describe alternatives you've considered

I have been using this transformer before:

module.exports = (dts, { classes, logger }) => {
  var classNames = Object.keys(classes);

  return [
    '/* eslint-disable */',
    'declare let classes: {',
    '  /** @deprecated This class does not exist in the style file */',
    '  [key: string]: string;',
    `  ${classNames.map((x) => `'${x}': string;`).join('\n  ')}`,
    '};',
    'export default classes;',
    'export const __cssModule: true;',
    `export type AllClassNames = '${classNames.join("' | '")}';`,
  ].join('\n');
};

But it will be hard to maintain this in my codebase from now on since the new options are added (like goToDefinition).

Additional context

An example of how it looks in VSCode:

image

I can prepare a PR for this if you can decide on which option to use.

KurtGokhan avatar Dec 05 '22 20:12 KurtGokhan

Hi there, this is a good suggestion - thanks. I'll give it a little thought, but I'm leaning towards the first option for now.

mrmckeb avatar Dec 05 '22 23:12 mrmckeb