I have the beginnings of creating typings for CSS modules as created by css-loader.

The idea is that a virtual .d.ts file is created and consumed by ts-loader.

Example:

Given a file Game.css:

.game {
    display: flex;
    flex-direction: row;
}

.game-board {
}

.game-info {
    margin-left: 20px;
}

.game-footer {
    margin-top: 20px;
}

A virtual Game.css.d.ts file is created (assuming modules: true and camelCase: true in the css-loader options):

export const game: string;
export const gameBoard: string;
export const gameInfo: string;
export const gameFooter: string;

declare const __styles: {
    "game": string;
    "game-board": string;
    "gameBoard": string;
    "game-info": string;
    "gameInfo": string;
    "game-footer": string;
    "gameFooter": string;
};
export default __styles;

It should optionally be possible to write the virtual .d.ts file to disk, so that other tools can benefit from the typings.

There are existing solutions, but they suffer from the following problems:

• The local css classes are only known after css-loader has run. So it is not feasible to generate typings in a prebuild step.
• A loader used with css-loader, that generates typings and writes them to disk will not work properly, because the .d.ts files can be generated after ts-loader tries to read the files.

So my suggestion is to incorporate CSS modules in ts-loader.

My question is whether you would be open to at PR implementing this?