SCSS - Importing SCSS variables globally breaks exported TS type to `{}`.

Thanks for the awesome TS plugin! 💪

Describe the bug There’s certain cases when using SASS where you need the value of a variable and need to wrap it in #{} in order to get the variable output and not the variable name.

When adding #{} to a *.module.scss, the file’s classNames etc are no longer exported and only shows {} in the TS file.

To Reproduce

Add the following to any *.module.scss file, and try and import it to a TS file.

container.module.scss

@use "variables" as *; // Which includes $breakpoint

.container {
  @media (min-width: #{$breakpoint}) {
    color: red;
  }
}

Expected behavior Using the #{} functionality shouldn’t remove the classNames.

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome
• Version: 96.

[kirill-martynov]

@kirill-martynov No and I’m still frustrated by it.

I really want this plugin to work.

@mrmckeb 🙏

me too, we have a lot of media query global variables on a project, but when we are using them, it’s always showing empty type {}

With custom media global variables @media #{$new-tablet-only} {

Without custom media global variables

@mrmckeb please help us to fix this issue

[mthines]

I think it’s related to https://github.com/mrmckeb/typescript-plugin-css-modules/issues/146.

Trying to add the variable directly to the scss fixed the error. I have a SCSS configuration in my NextJS app which includes all my resources, and I think that needs to be set in the same way for the plugin.

const nextConfig = {
  sassOptions: {
      prependData: '@use "libs/theme/src/lib/resources.scss" as *;',
    },
  ...
}

I will try and update the tsconfig plugin settings, and see if I can get it to work 😃