.d.ts keys are camelCased

[RoystonS]

Hi there,

I've just been playing about with an app created by create-react-app, and its App.css file comes with CSS classes such as App-logo and App-header. Changing that to App.module.scss and running sass-module-types gives me a .module.scss.d.ts file with the contents

export const App: string;
export const AppLogo: string;
export const AppHeader: string;
export const AppLink: string;
export default {} as {
  App: string,
  AppLogo: string,
  AppHeader: string,
  AppLink: string,
}

That looks nice enough, but the names don't match the class names, e.g. AppLogo instead of App-logo. The names such as App-logo are the ones I actually get out of webpack.

I suspect you've got some workaround for this: your front page example uses, for example, class gray-1 but you refer to it in your code as gray1. If that works, you must have something in your webpack (or similar) chain that remaps the exported CSS class names as camel case? Could you share the documentation for that please? Thanks!

[RoystonS]

I've discovered the camelCase option for the webpack css-loader, but that produces lower-case camel-case, e.g. an original App-header CSS class name is transformed to appHeader whereas sass-module-types generates AppHeader instead.