Plugin fails when using an webpack aliases and TS paths to @import other scss files inside scss modules

[mfpopa]

Describe the bug
The plugin does not work when the seem to work with webpack aliases and TS paths.

Relative paths work fine, namely if I convert from alias/my-styles.scss to ../../styles/my-styles.scss the plugin works fine.

I have looked at the #26 #54 which looked like they were supposed to solve my problem, but they don't, unless I am doing something wrong.

Below is my config. Note that ./client is the folder where I have all my client-side source code for this particular project.

// tsconfig.json
...
"baseUrl": ".",
"paths": {
  "@client/*": ["client/*"]
}
...

// webpack.config.js
...
alias: {
  '@client': path.resolve(__dirname, 'client'),
},
...

// FormComponent.tsx
import { Button } from '@client/components/Button';
import styles from './FormComponent.module.scss';
...
<div className={styles.form} {...otherProps}>...</div>
...

// FormComponent.module.scss
@import '@client/styles/variables.scss';
...
.form {
  font-size: $font-size;
}
...

// variables.scss
$font-size: 14px;
...

Because I used the @client alias to import inside the SCSS file, now the className={styles.form} show a squiggly line under the word form and I get this error: Property 'form' does not exist on type '{}'.ts(2339). If I use the relative import instead (@import '../../styles/variables.scss';) the plugin works fine.

Webpack bundles everything properly and no complaints from VS Code and TypeScript for using the @client alias when importing in either TS/TSX files or SCSS files. The only thing that does not work with the alias is this plugin, typescript-plugin-css-modules.

---

To Reproduce
I can set up a test repo if the description of the problem does not provide enough info.

---

Expected behavior
I expect the plugin to work with imports that use aliases just like it works when using imports with relative paths.

---

Desktop (please complete the following information):

• OS: Windows 10 Pro 64-bit, version 1809, build 17763.1039
• Code Editor: VS Code 1.42.1 (user setup)
• css-loader@3.4.2
• sass@1.26.2
• sass-loader@8.0.2
• typescript@3.7.4
• typescript-plugin-css-modules@2.2.0
• webpack@4.41.5
• webpack-cli@3.3.10
• webpack-dev-server@3.10.3

---

Additional context

Looking at the TS server log in VS Code, the plugin fails with:

Info 84   [17:47:0.941] [typescript-plugin-css-modules] Failed Error: Can't find stylesheet to import.
  ╷
1 │ @import '@client/styles/variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:9  root stylesheet
Info 85   [17:47:0.954] [typescript-plugin-css-modules] Stack trace: Error: Can't find stylesheet to import.
  ╷
1 │ @import '@client/styles/variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:9  root stylesheet
    at Object._newRenderError (...\node_modules\sass\sass.dart.js:13621:19)
    at Object._wrapException (...\node_modules\sass\sass.dart.js:13467:16)
    at StaticClosure._renderSync (...\node_modules\sass\sass.dart.js:13442:18)
    at Object.Primitives_applyFunction (...\node_modules\sass\sass.dart.js:1064:30)
    at Object.Function_apply (...\node_modules\sass\sass.dart.js:4898:16)
    at _callDartFunctionFast (...\node_modules\sass\sass.dart.js:6580:16)
    at Object.renderSync (...\node_modules\sass\sass.dart.js:6558:18)
    at Object.exports.getClasses (...\node_modules\typescript-plugin-css-modules\lib\helpers\getClasses.js:75:18)
    at ...

Any help would be appreciated. Meanwhile, I will try to troubleshoot the plugin as much as I can. Is there a way to execute node --inspect on the plugin to debug it?

[mrmckeb]

Hi @mfpopa, thanks for raising this.

Have you tried passing renderer options for Sass? https://github.com/mrmckeb/typescript-plugin-css-modules#rendereroptions

That should allow you to customise the behaviour of the Sass renderer to match what you need.

Is there a way to execute node --inspect on the plugin to debug it?
There isn't a lot of information available from Microsoft on how to do this, but you can add logs - see:
https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin#debugging

If you can share a small repro, I can take a look at that too.

[mrmckeb]

This may be related to #77, @mfpopa, but thanks for providing a great amount of info. If you can supply a small repro repo I can probably knock both out on the upcoming weekend :)

[mfpopa]

@mrmckeb I have been super busy in the last few weeks, so I did not have a chance to create a test repo.

However, this is no longer necessary because for some reason the issue does not exist any longer. I have made hundreds of changes to the codebase since I reported the issue, so I am not sure what the problem was and what fixed it. I am closing the issue.

[mrmckeb]

Thanks for the update, that's great news!

[mfpopa]

Just wanted to note that I found out what the issue was. It looks like the plugin does not care about the paths defined in tsconfig.json when importing an SCSS module into another SCSS module.

// tsconfig.json
...
"baseUrl": ".",
"paths": {
  "src/*": ["my-source-code-folder/*"] // assume that I have a folder named "my-source-code-folder" in the root that I want to map to src when doing imports.
}
...

When my SCSS file does an import like this @import 'src/styles/variables.scss';, the plugin fails. Note that src is defined as a path in tsconfig (see above) to map to the actual folder my-source-code-folder.

[typescript-plugin-css-modules] Failed Error: Can't find stylesheet to import.
  ╷
1 │ @import 'src/styles/variables.scss';

BUT, if I use @import 'my-source-code-folder/styles/variables.scss'; it works. From this it looks to me like this plugin respects the baseUrl which automatically creates the non-relative paths for folders located in the root of the project.

So the fix for me is to just import using a non-relative path that starts with the actual folder name where the file to be imported is located.

I think this is a bug in the plugin, but I will not reopen the issue because it's not a big deal for me. I however wanted to post this comment in case someone else may have this problem and needs to know why it's happening.

[mrmckeb]

Thanks @mfpopa, it's hard to get this right as everyone has the ability to completely customise this behaviour. This is why we're trying to lean on configuration over "defaults".

If you ever get some time and want to raise a PR, we'd welcome that.

[MartinDavi]

Thanks @mfpopa , I think that's the same issue I'm having except with webpack aliases, not tsconfig paths.

We're using webpack aliases to build different themes depending on an env variable, so we're doing @forward 'theme/variables'; where theme is resolved to the current brand's theme folder based on supplied env variable.

If I remove this @forward, then the plugin works correctly. With it present, I get the does not exist on type '{}' error message.

If you or @mrmckeb have a suggestion for a more sass or plugin-friendly way of defining path aliases, please let me know, and I'll report back if I find a way for future readers.

[MartinDavi]

Ah, my issue is that while the webpack alias is working just fine, I need to add the same alias to tsconfig paths in order for this plugin to resolve the @forward 'theme/variables'; which makes sense. Unfortunately the webpack alias is dynamic based on an env variable, which paths does not support.

This was still a helpful thread to get me looking in the right place, thanks all!