typescript-plugin-css-modules not work with scss features

[TikkY-hash]

I download your plugin, and have some problems if I try use it with scss features

[mrmckeb]

Hi @TikkY-hash, are you able to share more information? The plugin does work with SCSS - we have tests for that - but there may be something specific to your case.

Did you also follow the instructions in the README?
https://github.com/mrmckeb/typescript-plugin-css-modules#installation

I'd be happy to help out more if you can provide a small reproduction repo :)

[xobotyi]

As four our project it is a long-going issue caused by usage of import from node package
@import '@blueprintjs/core/lib/scss/variables';

the file dont have anything very specific except !default directive

file contents:

/*
 * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
 */

$black: #111418 !default;

$dark-gray1: #1c2127 !default;
$dark-gray2: #252a31 !default;
$dark-gray3: #2f343c !default;
$dark-gray4: #383e47 !default;
$dark-gray5: #404854 !default;

$gray1: #5f6b7c !default;
$gray2: #738091 !default;
$gray3: #8f99a8 !default;
$gray4: #abb3bf !default;
$gray5: #c5cbd3 !default;

$light-gray1: #d3d8de !default;
$light-gray2: #dce0e5 !default;
$light-gray3: #e5e8eb !default;
$light-gray4: #edeff2 !default;
$light-gray5: #f6f7f9 !default;

$white: #ffffff !default;

$blue1: #184a90 !default;
$blue2: #215db0 !default;
$blue3: #2d72d2 !default;
$blue4: #4c90f0 !default;
$blue5: #8abbff !default;

$green1: #165a36 !default;
$green2: #1c6e42 !default;
$green3: #238551 !default;
$green4: #32a467 !default;
$green5: #72ca9b !default;

$orange1: #77450d !default;
$orange2: #935610 !default;
$orange3: #c87619 !default;
$orange4: #ec9a3c !default;
$orange5: #fbb360 !default;

$red1: #8e292c;
$red2: #ac2f33;
$red3: #cd4246;
$red4: #e76a6e;
$red5: #fa999c;

$vermilion1: #96290d !default;
$vermilion2: #b83211 !default;
$vermilion3: #d33d17 !default;
$vermilion4: #eb6847 !default;
$vermilion5: #ff9980 !default;

$rose1: #a82255 !default;
$rose2: #c22762 !default;
$rose3: #db2c6f !default;
$rose4: #f5498b !default;
$rose5: #ff66a1 !default;

$violet1: #5c255c !default;
$violet2: #7c327c !default;
$violet3: #9d3f9d !default;
$violet4: #bd6bbd !default;
$violet5: #d69fd6 !default;

$indigo1: #5642a6 !default;
$indigo2: #634dbf !default;
$indigo3: #7961db !default;
$indigo4: #9881f3 !default;
$indigo5: #bdadff !default;

$cerulean1: #1f4b99 !default;
$cerulean2: #2458b3 !default;
$cerulean3: #2965cc !default;
$cerulean4: #4580e6 !default;
$cerulean5: #669eff !default;

$turquoise1: #004d46 !default;
$turquoise2: #007067 !default;
$turquoise3: #00a396 !default;
$turquoise4: #13c9ba !default;
$turquoise5: #7ae1d8 !default;

$forest1: #1d7324 !default;
$forest2: #238c2c !default;
$forest3: #29a634 !default;
$forest4: #43bf4d !default;
$forest5: #62d96b !default;

$lime1: #43501b !default;
$lime2: #5a701a !default;
$lime3: #8eb125 !default;
$lime4: #b6d94c !default;
$lime5: #d4f17e !default;

$gold1: #5c4405 !default;
$gold2: #866103 !default;
$gold3: #d1980b !default;
$gold4: #f0b726 !default;
$gold5: #fbd065 !default;

$sepia1: #5e4123 !default;
$sepia2: #7a542e !default;
$sepia3: #946638 !default;
$sepia4: #af855a !default;
$sepia5: #d0b090 !default;
$pt-intent-primary: #2d72d2 !default;
$pt-intent-success: #238551 !default;
$pt-intent-warning: #c87619 !default;
$pt-intent-danger: #cd4246 !default;

$pt-app-background-color: #f6f7f9 !default;
$pt-dark-app-background-color: #252a31 !default;

$pt-outline-color: rgba(45, 114, 210, 0.6) !default;

$pt-text-color: #1c2127 !default;
$pt-text-color-muted: #5f6b7c !default;
$pt-text-color-disabled: rgba(95, 107, 124, 0.6) !default;
$pt-heading-color: #1c2127 !default;
$pt-link-color: #215db0 !default;
$pt-dark-text-color: #f6f7f9 !default;
$pt-dark-text-color-muted: #abb3bf !default;
$pt-dark-text-color-disabled: rgba(171, 179, 191, 0.6) !default;
$pt-dark-heading-color: #f6f7f9 !default;
$pt-dark-link-color: #8abbff !default;
$pt-text-selection-color: rgba(125, 188, 255, 60%) !default;

$pt-icon-color: #5f6b7c !default;
$pt-icon-color-hover: #1c2127 !default;
$pt-icon-color-disabled: rgba(95, 107, 124, 0.6) !default;
$pt-icon-color-selected: #2d72d2 !default;
$pt-dark-icon-color: #abb3bf !default;
$pt-dark-icon-color-hover: #f6f7f9 !default;
$pt-dark-icon-color-disabled: rgba(171, 179, 191, 0.6) !default;
$pt-dark-icon-color-selected: #2d72d2 !default;

$pt-divider-black: rgba(17, 20, 24, 0.15) !default;
$pt-dark-divider-black: rgba(17, 20, 24, 0.4) !default;
$pt-dark-divider-white: rgba(255, 255, 255, 0.2) !default;

$pt-code-text-color: #5f6b7c !default;
$pt-dark-code-text-color: #abb3bf !default;
$pt-code-background-color: rgba(255, 255, 255, 0.7) !default;
$pt-dark-code-background-color: rgba(17, 20, 24, 0.3) !default;
$ns: bp4;
$bp-ns: bp4;

$pt-grid-size: 10px !default;

$icons16-family: "blueprint-icons-16" !default;
$icons20-family: "blueprint-icons-20" !default;

$pt-icon-size-standard: 16px !default;
$pt-icon-size-large: 20px !default;

$pt-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue",
  "blueprint-icons-16", sans-serif !default;

$pt-font-family-monospace: monospace !default;

$pt-font-size: 10px * 1.4 !default;
$pt-font-size-large: 10px * 1.6 !default;
$pt-font-size-small: 10px * 1.2 !default;

$pt-line-height: 1.28581 !default;

$pt-border-radius: 2px !default;

$pt-button-height: 10px * 3 !default;
$pt-button-height-small: 10px * 2.4 !default;
$pt-button-height-smaller: 10px * 2 !default;
$pt-button-height-large: 10px * 4 !default;

$pt-input-height: 10px * 3 !default;
$pt-input-height-large: 10px * 4 !default;
$pt-input-height-small: 10px * 2.4 !default;

$pt-navbar-height: 10px * 5 !default;

$pt-z-index-base: 0 !default;
$pt-z-index-content: 0 + 10 !default;
$pt-z-index-overlay: 0 + 10 + 10 !default;
$pt-z-index-dialog-header: 0 + 10 + 10 + 10 !default;

$pt-border-shadow-opacity: 0.1 !default;
$pt-drop-shadow-opacity: 0.2 !default;
$pt-dark-border-shadow-opacity: 0.1 * 2 !default;
$pt-dark-drop-shadow-opacity: 0.2 * 2 !default;

$pt-elevation-shadow-0: 0 0 0 1px rgba(17, 20, 24, 0.15) !default;
$pt-elevation-shadow-1: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 1px 1px rgba(17, 20, 24, 0.2) !default;
$pt-elevation-shadow-2: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 1px 1px rgba(17, 20, 24, 0.2), 0 2px 6px rgba(17, 20, 24, 0.2) !default;
$pt-elevation-shadow-3: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2) !default;
$pt-elevation-shadow-4: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 4px 8px rgba(17, 20, 24, 0.2), 0 18px 46px 6px rgba(17, 20, 24, 0.2) !default;

$pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !default;
$pt-dark-elevation-shadow-1: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 1px 1px 0 rgba(17, 20, 24, 0.2 * 2) !default;
$pt-dark-elevation-shadow-2: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 1px 1px rgba(17, 20, 24, 0.2 * 2), 0 2px 6px rgba(17, 20, 24, 0.2 * 2) !default;
$pt-dark-elevation-shadow-3: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2 * 2), 0 8px 24px rgba(17, 20, 24, 0.2 * 2) !default;
$pt-dark-elevation-shadow-4: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 4px 8px rgba(17, 20, 24, 0.2 * 2), 0 18px 46px 6px rgba(17, 20, 24, 0.2 * 2) !default;

$pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
$pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
$pt-transition-duration: 100ms !default;

$pt-input-box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2),
  inset 0 1px 1px rgba(17, 20, 24, 0.5) !default;

$pt-dialog-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2) !default;
$pt-popover-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2) !default;
$pt-tooltip-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2) !default;
$pt-toast-box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2) !default;

$pt-dark-input-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  inset 0 -1px 1px 0 #8f99a8 !default;
$pt-dark-input-intent-box-shadow-colors: (
  "primary": #4c90f0,
  "success": #32a467,
  "warning": #ec9a3c,
  "danger": #e76a6e,
) !default;

$pt-dark-dialog-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2 * 2), 0 8px 24px rgba(17, 20, 24, 0.2 * 2) !default;
$pt-dark-popover-border-color: hsl(215deg, 3%, 38%) !default;
$pt-dark-popover-box-shadow: 0 0 0 1px hsl(215deg, 3%, 38%),
  inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.2 * 2),
  0 8px 24px rgba(17, 20, 24, 0.2 * 2) !default;
$pt-dark-tooltip-box-shadow: 0 2px 4px rgba(17, 20, 24, 0.2 * 2),
  0 8px 24px rgba(17, 20, 24, 0.2 * 2) !default;
$pt-dark-toast-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2 * 2), 0 8px 24px rgba(17, 20, 24, 0.2 * 2) !default;

$pt-high-contrast-mode-border-color: buttonborder;
$pt-high-contrast-mode-active-background-color: highlight;
$pt-high-contrast-mode-active-text-color: highlight;
$pt-high-contrast-mode-disabled-border-color: graytext;
$pt-high-contrast-mode-disabled-text-color: graytext;
$pt-high-contrast-mode-disabled-background-color: graytext;

[reintroducing]

What @xobotyi is describing seems to be similar to my issue: #224

it appears that using external modules in a file (aka non local project mixins that may come from node_modules rather than imports from local to the project file system files) are breaking the type hinting and showing TS errors.

as for the original comment on this issue, I can also confirm that other than what I described above, this plug-in works great with Sass.

[Sc222]

I'm facing similar issue after upgrade to latest TS even on very simple files.

Simple file without scss @import (src/Components/Editor/editor.module.scss)

.editor {
    width: 100%;

    &-nested {
        color: blue;
    }
}

produces this type:

Same file with absolute import of _rootColors.scss file that only contains 1 test variable (src/_rootColors.scss)

This syntax

@import "src/rootColors";

produces empty type:

While this

@import "src/_rootColors";

produces normal type:

---

If I copy _rootColors.scss next to editor.module.scss (_src/Components/Editor) and use relative import both @import "rootColors" and @import "_rootColors" variants produce normal type.

I'm not sure but I think the problem can be related to some of this scss features.


Because in my case plugin fails only for absolute imports without _.

---

Replacing @import with @use doesn't change anything

---

I'm using typescipt "5.0.4" and plugin "5.0.1". Everything was on fine on TS 4.* and 4.* plugin versions.

Dear @mrmckeb, provided some investigation, hope it'll help...

[TikkY-hash]

I have this problem only when I try use media queries with css variables.

[LeoCaprile]

Having the same issue as @TikkY-hash, if the scss module contains any type of media queries, the plugin stop working.

the file with media queries

the import

the usage

[LeoCaprile]

I did some research on the code provided by @TikkY-hash, looks like he have a syntax error on his media query thats why the plugin dont transform correctly:

following the code provided by @TikkY-hash

here's some media queries examples in scss, using variables:

$small: 300px;
$medium: 900px;

.smth {
  //some CSS
  @media screen and (max-width: $small) {
    //do Smth
  }
  @media screen and (min-width: $medium) {
    //do Smth
  }
}

[yslpn]

If I use the @use directive, the plugin refuses to work. Is there any news in this direction?

Property 'betaFlag' does not exist on type '{}'.ts(2339)

[mrmckeb]

Hi @yslpn, are you able to provide a minimal reproduction?

Even if it's just a new Next.js project (or your preferred framework) set up to demonstrate the failure, that will help me to track down the issue.

[islami00]

If you're having issues with @import not working in vscode for path aliases, it was added in #105 . To make it work you need to ensure the file name matches what exists in the fs. I.e:

1. for partials (@alias/_filename)
2. For regular files (@alias/filename)
3. For css modules (@alias/filename.module)

References

1. fixture with the imports: https://github.com/mrmckeb/typescript-plugin-css-modules/blob/80d13619d338462de6430495306e88f1444af5d4/src/helpers/__tests__/fixtures/tsconfig-paths.module.scss
2. Test with the path definition:

   typescript-plugin-css-modules/src/helpers/__tests__/getDtsSnapshot.test.ts

   Line 213 in 80d1361

   '@scss/*': ['external/package/*'],

[murm]

I have a similar issue with this error Property 'wrapper' does not exist on type '{}'.ts(2339).
I'm using next and I'm not sure what additional information I can provide that would help, than below:

This problem occurs when I try to use a variable that is imported in every file using the solution below (so I don't have to manually @import... everywhere).

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    additionalData: `@import "src/app/variables.module.scss";`,
  },
  output: 'standalone',
};

module.exports = nextConfig;

the full file which I import in my components that causes the issue:

.wrapper {
  display: flex;
  column-gap: 8%;
  justify-content: space-between;

  @media screen and (max-width: $media-query-sm) {
    flex-direction: column;
  }
}

[mrmckeb]

Hi @murm, you'll need to configure this plugin the same way. You should be able to use additionalData as explained in the README for this plugin:
https://github.com/mrmckeb/typescript-plugin-css-modules?tab=readme-ov-file#options

[mrmckeb]

We've had a contribution from @rmachado-studocu that should improve how we handle aliases, which hopefully resolves the remaining issues here:
#251

I've added a test today to confirm that @use is working as expected:
#258

If you're still experience issues after this release, I ask that you raise a new issue with a reproduction repo to help us to dig deeper - thanks!