优化 css modules 的类型问题

[sorrycc]

Problem

目前 css modules 的类型处理是生成这样的提示，代码见 https://github.com/umijs/tnf/blob/b34554b/src/sync/write_types.ts#L67-L78 。

declare module '*.less' {
  const classes: { [key: string]: string };
  export default classes;
}
declare module '*.css' {
  const classes: { [key: string]: string };
  export default classes;
}

但是，在使用 css modules 时，比如

import styles from 'foo.module.css';

styles.xxx 时会没有具体 key 的提示。

参考：
https://github.com/mrmckeb/typescript-plugin-css-modules

Solution

1、使用 typescript-plugin-css-modules
2、优先尝试在 write_types.ts 里自动加此 plugin，让用户无需感知
3、如果不行，在脚手架里添加依赖和对应的 compilerOptions.plugins

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
  }
}

Alternatives

typed-css-modules ，但缺点是会生成一堆 .d.ts 文件。

参考：
https://github.com/Quramy/typed-css-modules

Importance

would make my life easier

Additional Information

No response