mrmckeb/typescript-plugin-css-modules

Classes with composes break the exports (for the plugin)

calvellido opened this issue · 7 comments

calvellido commented

Description

CSS Modules files with any class that include the composes keyword break the export for that file, in the context of the plugin. As noted, not only the class that include that keyword doesn't seem visible to the plugin, but any on the same file too. The three types of possible origin for the composes setting: from the same file, other files, or global classes produce the same result of an empty object {} as the object exported.

The composes keyword is defined in the CSS Modules spec in:

https://github.com/css-modules/css-modules#dependencies

It's also supported through Webpack's CSS Loader in:

https://webpack.js.org/loaders/css-loader/#composing

The project builds the classes including these composed classes correctly and as expected through the use of the webpack loader and config.

To Reproduce

Steps to reproduce the behaviour:

  1. Define a CSS Modules file, e.g: index.module.css
  2. Set the composes keyword in one of its classes, e.g: cardContainer
  3. Import the CSS Module file on a TS file, e.g: import styles from './index.module.css';
  4. Use any of the classes exported by the CSS Module, e.g: textContainer
  5. Property 'textContainer' does not exist on type '{}'.ts(2339)

Expected behaviour

Classes should still be understood as exported as usual, whether some of them include the composes keyword or not.

Screenshots

Error with composes:
image
image

Usual behaviour:
image
image

Desktop

  • OS: GNU/Linux, Linux Mint 21.1 Cinnamon
  • Editor: VS Code 1.75.1
  • Browser: Not applicable
mrmckeb commented

Hi there, thanks for raising this! I'm guessing most people don't use this feature, as this is the first report we've had.

I think it'll be an easy fix though. We'll need to add one or two of these plugins:
https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js#L776-L779

I'll try to get this done and shipped in the next few days!

  • ❤️1
calvellido commented

Yes, there's not a lot of composes mentions in general in the net, as I think it's probably far from being the main CSS Modules concept that people are using them for. But, nonetheless, I think it's an interesting feature that could be very usable depending on the project.

Even better if it's not a very hard task to add to the plugin.

Thanks for having a look!

shayded-exe commented

Seconding the need for this to be fixed. Just started using the plugin and immediately ran into this issue.

Glad to hear it'll be fixed soon!

mrmckeb commented

This should now be resolved in v4.2.3, please let me know if you still hit this issue after upgrading.

Again, sorry this happened. I think this may have worked up until a very recent refactor, where some internals were swapped out due to deprecations.

mrmckeb commented

If you're feeling a little adventurous, this fix is also in v5.0.0-beta.0, which has TypeScript 5.x support and I'd love to have more people test that version out.

calvellido commented

Awesome, many thanks @mrmckeb! Will report back if I am able to branch out the project to test it under TypeScript 5

  • ❤️1
strlns commented

Great work! 🚀

Came here from searching the issues, first thought fix in 4.2.3 wasn't working after restarting VSCode + TS language server after updating.
Then after reinstalling again, clearing npm cache and fully restarting VSCode, everything worked like a charm again.

Thank you!