Typescript with CSS Modules

[nlrowe]

I am just getting started with typescript and seem to be running into an issue using CSS Modules. I started out with this error "Cannot find module './app.module.scss' or its corresponding type declarations." and after some googling, have added a *..d.ts file to fix the module resolution:

declare module '*.module.scss' {
    const classes: Record<string, string>
    export default classes
}

However, I now seem to be stuck between parcel building and typescript compiling:

• If I use import styles from '*.module.scss', parcel build outputs a bunch of warnings like "@parcel/optimizer-css: CSS modules cannot be tree shaken when imported with a default specifier".
• If I use import * as styles from './*.module.scss' and try to reference a class with styles.name, then the typescript compiler will create an error with "Property 'name' does not exist on type 'typeof import("*.module.scss")'".

I haven't been able to find the resolution to this yet, however, it seems like it would be a pretty common thing to run into. Has anyone faced this before/have any suggestions? I realize I can ignore the bundler warnings, however that would be very noisy and overtime could lead to missing more important build issues.

[mischnic]

There are some examples in this issue how to tell Typescript about import * as styles: #7264