Repository navigation
CSS Modules with TypeScript: css-modules-typescript-loader #5677
Description
TypeScript users are flying blind when they import a CSS module. For example, if they type styles.foo they have no idea if .foo actually exists in the CSS module without manually checking the file.
This is not a great TypeScript experience.
I propose adding the css-modules-typescript-loader (or something similar) to emit type declarations for CSS modules on the fly.
It could be as simple as this:
const loaders = [
require.resolve('style-loader'),
...(useTypeScript && cssOptions.modules
? require.resolve('css-modules-typescript-loader')
: []
),What do you think?
Activity
Timer commentedon Nov 1, 2018
I'd love to see a more formal proposal put together for this.
A couple things:
/cc @brunolemos @ianschmitz
jednano commentedon Nov 2, 2018
*.module.d.tsfiles to the project root's.gitignoreto clean up the diffs?*.module.cssfile, so maybe this is more of a "Run on Save" command? Otherwise, when you switch from the CSS module to the TypeScript file that imports it, it will still be blind.Timer commentedon Nov 2, 2018
node_modulesor something, no?jednano commentedon Nov 2, 2018
foo.module.cssthe definition file needs to be namedfoo.d.ts.Timer commentedon Nov 2, 2018
jednano commentedon Nov 2, 2018
2️⃣ would be a better option, I agree. I don't think most people want to see this generated file.
mrmckeb commentedon Nov 2, 2018
Could this be implemented as a plugin to TypeScript? It would be great if this happened in-memory, as opposed to needing written files.
https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin
jednano commentedon Nov 2, 2018
@mrmckeb yes like
css-module-types. Would a PR be accepted to CRA with this behavior?Timer commentedon Nov 2, 2018
Wow, that's rad! The lack of maintenance/use is a little concerning.
jednano commentedon Nov 2, 2018
@Timer, I totally agree. Be nice to see some tests too. Internally, it looks like it's just a PostCSS plugin, which is a pretty good way of going about it.
jamsch commentedon Nov 2, 2018
Right now I'm just using the vscode css-modules extension. It works pretty well but won't warn you for invalid styles.
jednano commentedon Nov 3, 2018
The glory of this feature request is that it would work in any TypeScript-supported editor. @jamsch do you mean it doesn't warn you if you attempt to use a class name that isn't defined in the CSS module file?
mrmckeb commentedon Nov 4, 2018
@jedmao, if we don't get a response on
css-module-typesthis week, I'll fork the project and add take ownership/responsibility.jednano commentedon Nov 4, 2018
@mrmckeb when you say SCSS support are you talking about nesting, specifically?
29 remaining items
mrmckeb commentedon Dec 13, 2018
Of course @jleider, as I said it's unfortunate that there isn't another solution right now. This may also be added to the Babel plugin in future... we'll keep thinking of a better way to handle this.
pristas-peter commentedon Dec 17, 2018
Hi guys, I wrote a webpack plugin for my personal use, which also watches files, which are not watched by webpack and runs its own compilation with the same webpack config, which is great for developer experience.
You can check it out here:
https://github.com/pristas-peter/react-webpack-utils/tree/master/packages/watcher-webpack-plugin
https://github.com/pristas-peter/react-webpack-utils/tree/master/packages/css-modules-typings-loader
Packages are also available at npm:
https://www.npmjs.com/package/watcher-webpack-plugin
https://www.npmjs.com/package/css-modules-typings-loader
If you find these useful, feel free to add PR if you need more functionality.
Hotell commentedon Jan 8, 2019
This looks solid/mature enough (also baked by "huge" company): https://github.com/dropbox/typed-css-modules-webpack-plugin
mrmckeb commentedon Jan 8, 2019
@Hotell and @pristas-peter, thanks for sharing these.
As mentioned, at this stage we won't be adding a solution that writes additional files to disk. There are IDE-only solutions, like
typescript-plugin-css-modulesthat work great with Create React App, but are editor-only for now.Microsoft would need to allow TypeScript plugins/transforms to work outside of the IDE for us to be able to do this cleanly.
We definitely have this on our radar and will continue to monitor and assess as we plan the future of CRA.
Hotell commentedon Jan 8, 2019
I put down quick gist for anyone reading this issue, if they desperately need this feature without ejecting :)
https://gist.github.com/Hotell/01035a3ec202245d6b97937444140877
I can send PR to update docs if you're willing to accept this :)
thanks!
zxti commentedon Feb 9, 2019
As a PSA for folks like me who hadn't realized this but are potentially interested - Webstorm has had intelligent support for Typescript importing CSS Modules (and sass modules) built-in since Jun 2017:
https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2953/
One of many reasons I switched over from VSCode a while ago!
jednano commentedon Feb 9, 2019
@zxti, I'd rather this type of thing be an extension than built in. Best to keep vscode lean. That's one thing I love about it.
zxti commentedon Feb 9, 2019
@jedmao I actually highly agree with preferring modular extensibility. FWIW (and not to turn this thread too off-topic - only mentioned it initially because I thought others might be interested) this Typescript support is an extension to the Jetbrains IDE core (that's how I installed it - I don't actually use Webstorm-the-product, but just IntelliJ with these plugins installed). It's also nice to have features like renaming CSS classes, find-usages, etc. all work seamlessly (which I think these alternative solutions still have a ways to go on).
babakness commentedon Feb 21, 2019
I've made a package that compiles SASS, w/ interpolations, includes, etc, and provides type definitions.
https://github.com/babakness/sass-module-types
If one does not like the
d.tsdefinition files, they can be hidden in VS Code, WebStorm, etc. In VS Code at the moment (Feb 2019) your definitions don't refresh if the file isn't open in the editor, so if you do hide the file you made need to "peek definition" to get the update to kick in. Worthy issue to bring up to the VS Code team.mrmckeb commentedon Feb 25, 2019
Hi @babakness, thanks again for this.
Again, it's not something we'll add to CRA, but definitely worth checking out for those looking for a solution.
mrmckeb commentedon Mar 20, 2019
Closing this off for now, but we definitely want to see a solution for this - and we'd love to hear any ideas that can help to solve this without writing additional files to disk.
Thanks for everyone's time looking into all the possible options here.