mrmckeb/typescript-plugin-css-modules

Typescript types not working with global imports

Morten-dev opened this issue · 6 comments

Morten-dev commented

Describe the bug
When using global scss files, the exported type is {}

To Reproduce
https://codesandbox.io/p/sandbox/misty-smoke-sidjkm
This codepen shows the error in the test.tsx file
Changing the variables in it's accompanying Test.module.scss to hardcoded values works fine and exports the correct types. However when using the variables defined in variables.scss, the types will break but the code will still be functional.

next.config.js has variables.scss imported with additionalData: '@import "styles/abstracts/variables";'

tsconfig.json has rendereroptions set to

"rendererOptions": { "sass": { "includePaths": ["styles/abstracts/*.scss"] }

Jahrhause commented

I am also experiencing this issue :(

  • 👍1
KODerFunk commented

Try "rendererOptions": { "sass": { "loadPaths": ["./"] }. I also use Next.js, and spent a lot of time choosing the right settings.

Morten-dev commented

Try "rendererOptions": { "sass": { "loadPaths": ["./"] }. I also use Next.js, and spent a lot of time choosing the right settings.

Unfortunately this did not fix the issue, but thank you for the response

yslpn commented

Same error. I have a monorepository. In one package, I import variables from another:

@use '@{MyPackageName}/variables';

for such files I get type {}

  • 👍2
mrmckeb commented

Hi all, very sorry for the slow reply.

This plugin also supports additionalData.
https://github.com/mrmckeb/typescript-plugin-css-modules#options

Using that solves the issue in the Code Sandbox example provided:
https://codesandbox.io/p/sandbox/broken-moon-gy6myz?file=%2Ftsconfig.json%3A24%2C15-24%2C72

Unfortunately there's no way for this plugin to know what you've configured for other tools - you could be using Next.js, CRA, custom, etc - so you need to provide the same options.

claygiffin commented

@mrmckeb I am running into this same issue, and I cannot find any documentation around additionalData. It looks like the codesandbox link you shared is dead. Can you explain the configuration that allows scss @import to work with your plugin?