Feature Request: --declarationMap option

[mizdra]

Problem

Currently, when I click on a property imported from CSS Modules from VSCode, it jumps to .d.ts. Normally, users expect to jump to .css, not to .d.ts. Therefore, this behavior is confusing to users.

It would be useful to be able to switch the jump destination to .css.

Solution

Add the option --declarationMap to generate a source map for .d.ts which map back to the original .css. This allows VSCode to jump to the css file when clicking on a property.

This option is inspired by the --declarationMap option of tsc.

PoC

You can try the PoC from the following:

• PoC: Support transpiler mizdra/typed-css-modules#4
• https://www.npmjs.com/package/@mizdra/typed-css-modules
• https://github.com/mizdra-sandbox/typed-css-modules-definition-map-test/blob/main/scripts/tcm.ts

There is no test yet, but I implemented the necessary features. There are no breaking changes. If the maintainers are interested this feature, please tell me. I will add tests and open a Pull Request.

2022-03-28.0.40.19.mov

[mizdra]

I would like to perform further static analysis based on the sorucemap created by this feature. For example, with this sourcemap, I can create stylelint rules to detect unused css rulesets from JavaScript.

However, this would require a major rewrite of the typed-css-modules code. So I decided to fork typed-css-modules. From now on, I will work with the following fork:

• https://github.com/mizdra/happy-css-modules

It would be great if --declarationMap was introduced in typed-css-modules. So I will leave this Issue open. However, I would like to focus on completing happy-css-modules for the time being. So I will pause my work on this issue for now.

[mizdra]

happy-css-modules is almost stable. If you want this feature, try happy-css-modules!

[mizdra]

@Quramy

I would like to share the development status of happy-css-modules so that you will not be surprised to learn about it at a later date.

happy-css-modules is forked from typed-css-modules as it was developed from the PoC of this issue. Therefore, it inherits all commits from typed-css-modules. That is why you can find the names of the contributors of typed-css-modules in the license or in the list of contributors.

happy-css-modules is based on the efforts of all contributors to typed-css-modules. I hope you all like this library.

[mizdra]

I would recommend happy-css-modules as a solution to this issue and close this issue.

happy-css-modules has been in development for 2 years and is stable. If you need a definition jump, give it a try.