CSS Modules + TypeScript support

[drwpow]

As users of CSS Modules and TypeScript ourselves, I’d love to add support for it.

Currently if you tried to run:

import styles from './styles.module.css'

TypeScript would throw an error because there are no types for this module. A few just put a blanket module declaration that types .css files to any, but for people that want TypeScript to do its job and tell them if they’ve misspelled a class name, it’s tough.

It’s possible in webpack with things like typings-for-css-module-loader, which the popularity of the project should speak to how many people rely on solutions like this.

The basic idea is: for every .module.css file in the project, a *.module.css.d.ts file is generated alongside it, in src. This is all TypeScript needs to see into the scoped classes.

What would adding support for this look like?
To be clear, I think it’s more than a “nice to have.” I truly think it’s a blocker for people wanting to use TypeScript and CSS Modules, two very common paradigms.

Should the .d.ts generation happen as part of the build pipeline? Could it be enabled by default (and could we be smarter about it, i.e. only generate these if TS is detected in your project)? As someone that’s set this up before, it’d be great to handle this out-of-the-box, since Snowpack offers support for both out-of-the-box; just not combined.

[FredKSchott]

Bah I love the idea of this and agree it's more than a nice-to-have. But I wish the implementation didn't require putting fake .d.ts files directly into the source directory. Also nervous about moving this into core Snowpack since it would require that we also scan for Less, Sass, Stylus, etc.

I wonder if we could recommend this for now: https://github.com/mrmckeb/typescript-plugin-css-modules. This would get you the IDE feedback AND supports Less/Sass/Stylus without any added complexity on our end.

I also wonder if that plugin actually does work with the TypeScript CLI. Since @snowpack/plugin-typescript just calls the tsc CLI directly, we may actually be able to integrate our own type checking with that plugin, based on the instructions in that README. Could someone play around with /typescript-plugin-css-modules and see if there's something there?

[drwpow]

But I wish the implementation didn't require putting fake .d.ts files directly into the source directory.

Yeah I’ve never been a fan of this method either but it does solve the problem. One common way of dealing with it is just adding those files to .gitignore. But also, I suppose there could be one master file that gets generated, too, which could be cleaner.

But I would love to look into something more behind-the-scenes if it worked well. I’ll check out that project 👆🏻

[OliverJAsh]

Using declaration files only partially solves the problem. It doesn't provide functionality like find references, rename, go to definition, for class names. I would love to see a solution which also solves those problems.

[FredKSchott]

@robpalme gave a good idea on Twitter: https://twitter.com/robpalmer2/status/1322226084381949952

[npup]

This sounds fantastic! Can you point me to an example config for this? I'm afraid I'm not sure what to do besides adding the multiple entries in compilerOptions#rootDirs

[npup]

Think I found a helpful tool for this: https://github.com/Quramy/typescript-css-modules-demo

Thanks for all your work