Parcel: 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