mrmckeb/typescript-plugin-css-modules

External mixin breaks hinting and shows errors in TSX files

reintroducing opened this issue · 2 comments

Describe the bug
I am trying to import an external mixin called include-media in my Sass modules but it is causing issues with this plugin.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/p/sandbox/zealous-bogdan-0xmuhr
  2. Open App.tsx and hover over the css import and notice it says root as one of the properties which is correct. Also, no TS errors (red underlines).
  3. Open App.module.scss and uncomment the first line (@use "include-media" as im;)
  4. Go back to App.tsx and notice that css.root is underlined red as an error and hovering over css no longer shows the property root.

Expected behavior
Importing the include-media mixin should not break TypeScript hinting or show issues in the tsx file.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

looks like dont work on codesandbox because, it wont find the path to node_modules, the thing is if you are working locally, the only thing you need is to add a tilde in the start of the import/use like this:

@use "~include-media/dist/_include-media.scss";

this should work.

As @LeoCaprile said, it looks like this is path related.

The authors of this package say:

You can download the file manually, install via npm with npm install include-media or via Yarn with yarn add include-media.

Finally, import the file dist/_include-media.scss into your project.

I was able to get this working on CodeSandbox with:

@use "include-media/dist/_include-media.scss" as im;

Sorry that this issue slipped by unanswered for so long, and thanks to @LeoCaprile for jumping in.