dev tsserver complains about missing styles when @import in scss but the project build correctly

[johhnsmmith198]

Describe the bug
I have a project setup with create-react-app template typescript and added scss support via this config:

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }],
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src"
  },
  "include": [ "typings", "src" ],
  "exclude": [ "src/native", "src/ignore" ],
  "typeRoots": ["typings", "./node_modules/@types"]
}

My editor (nvim) is complaining about the styles variable missing styles.tilesInfo though it is defined in the scss.
NOTE: in this TilesInfo.module.scss I do @import "src/styles/colors"; first line in this file

I have other places in my code when my scss does not need to @import "src/styles/colors"; and those files don't show any error.

NOTE: running npm run build would build the project fine

To Reproduce
use @import in one of your scss

Expected behavior

Desktop (please complete the following information):
Ubuntu 22.04.1 LTS

Additional context
I tried to have my editor using the local typescript-language-server but it didn't change anything

return {
  cmd = { "./node_modules/.bin/typescript-language-server", "--stdio" }
}

I use the last version of everything:

    "typescript": "^4.9.5",
    "typescript-plugin-css-modules": "^4.2.2",

even though it says I dont need to deplace the type for module scss I still had to do:

declare module "*.scss" {
  const content: Record<string, string>;
  export default content;
}

and

  "include": [ "typings", "src" ],

[mrmckeb]

Hi @johhnsmmith198, thanks for checking out the plugin.

I had a recent question about neovim support which was resolved here: #206

Hopefully that helps.

NOTE: running npm run build would build the project fine

Unfortunately TypeScript doesn't run plugins during build, only in the IDE. I'm thinking about adding an ESLint plugin to cover that case.

• https://github.com/mrmckeb/typescript-plugin-css-modules#about-this-plugin
• microsoft/TypeScript#16607 (please vote)

[johhnsmmith198]

It's funny though that it works on scss file that don't use @import

[johhnsmmith198]

Same issue when refactoring to @use

[mrmckeb]

Again, because this plugin can't affect TypeScript outside of the IDE, this is likely configuration related. The steps here should help with that.
https://github.com/mrmckeb/typescript-plugin-css-modules#about-this-plugin