Can't use typescript with css modules

[ghost]

Hi, I'm bootstrapping a simple project with react and typescript and I can't seem to import css modules correctly.

This works:
import './styles.css'

This doesn't
import * as classes from './styles.css'

Am I missing something?

[wereHamster]

You probably have to provide a declaration file which specifies what you get when you import a css file. This would be a start:

declare module '*.css' {
  const css: any
  export default css
}

[fathyb]

Use declare module '*.css' on an ambient .d.ts file on your project to let TypeScript know you are using CSS modules.

Adding { const css: any; export default css } will restrict you from importing named classes (eg. import {myClass} from './index.css').

[mightyiam]

Are css modules in TypeScript working for anyone in v1.6.2? Perhaps from node_modules it doesn't work? I'm getting an empty object and the CSS classes are not transformed into hashes.

[fathyb]

@mightyiam CSS modules are working for me with TypeScript and Parcel 1.6.2.
Check if you have "modules": true in your PostCSS configuration. If it still doesn't work could you create an issue with a minimal reproduction?

I'm closing this issue as OP's problem is resolved with the correct module definition.

[pietmichal]

@mightyiam I have this issue at the moment.

[mightyiam]

Thanks. I didn't know I needed a PostCSS configuration... I've added a postcss.config.js with

module.exports = {
  modules: true
}

And now the CSS file does get imported but not transpiled, still. And the object is still empty. So, seemingly same result.

[mightyiam]

#70 suggests disabling hot module reload. So I used --no-hmr and same result seemingly.

[wangcch]

I am experiencing the same problem. But this seems to be typescript type error.

I use postcss, is working

// .postcssrc
"modules": true,

But the type error did not find a good solution.

1. use require
2. declare module
3. generate *.scss.d.ts for *.scss

Maybe can give up😔. To use emotion

[Place1]

I wrote a plugin to generate .d.ts files called parcel-plugin-typed-css-modules. Maybe this can solve your problem. I've kinda neglected it so there are some known bugs but it might get the job done for you

[ngduc]

Thanks @Place1 Great work!
I'm using your plugin in my parcelui boilerplate (Parcel + Typescript + React + CSS Modules + SASS) here:
https://github.com/ngduc/parcelui

[dmitrijs-balcers]

This will work for parcel v2: https://www.npmjs.com/package/parcel-transformer-ts-css-modules

[8bitjoey]

I personally had problems with the above mentioned parcel-transformer-ts-css-modules. Maybe I didn't use postcss correctly, but in my case all classes with the same name were merged into one in the dist/main.css.

Also, I personally dislike that every *.module.scss file gets a *.d.ts twin. Instead I did the following:

1. created src/module.d.ts file with the following content

declare module "*.module.scss"; // or *.module.css if you use that

2. updated src/index.ts which is used as an entry point in my project to start with

/// <reference types="./module.d.ts" />
... rest of the file ...

Now it compiles without any warnings.