Fails to find files by aliased imports with omitted file extension or underscore

[taletski]

First, thank you guys for a great plugin <3

Describe the bug
I am experiencing issues with .scss files that use @imports with the following: import alias, omit leading underscore and omit file extension

To Reproduce

• Next.js app in a monorepo

• Files structure

  repo/
  ├─ apps/
  │  ├─ my-nextjs-app/
  │  │  ├─ src/
  │  │  │  ├─ styles/
  │  │  │  │  ├─ _variables.scss
  │  │  │  ├─ pages/
  │  │  │  │  ├─ index.module.scss
  │  │  │  │  ├─ index.tsx
  │  │  ├─ tsconfig.json
  ├─ tsconfig.base.json
  

• File apps/my-app/tsconfig.json

  {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
      "plugins": [{ "name": "typescript-plugin-css-modules"}],
      "paths": {
        "@/*": ["apps/my-app/src/*"],
      }
    }
  }

• File apps/my-app/src/pages/index.module.scss imports apps/my-app/src/styles/_variables.scss in the following ways:

  • No import alias:
    1. @import 'src/styles/_variables.scss'- working ✅
    2. @import 'src/styles/variables.scss' - working ✅
    3. @import 'src/styles/_variables' - working ✅
    4. @import 'src/styles/variables' - working ✅
  • With alias:
    1. @import '@/styles/_variables.scss' - still working ✅
    2. @import '@/styles/variables.scss' - not working ❌
    3. @import '@/styles/_variables'- not working ❌
    4. @import '@/styles/variables'- not working ❌

  By not working I mean empty object types for scss module like so:

  (alias) let styles: {}
  import styles

Expected behavior
Expect cases b.-d. or at least case d. to work.

Additional context
Here is how the TS server log looks:

Info 151  [22:09:44.001] [typescript-plugin-css-modules] Failed Error: Can't find stylesheet to import.
  ╷
1 │ @import '@/styles/legacy/v2/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/layout/components/SideNavigation/NavigationItem/NavigationItem.module.scss 1:9  root stylesheet

Would be really glad if this is an easy fix that can be made on your side.
Please, let me know if I shoud submit an issue to the sass repo instead.

[mrmckeb]

This should be resolved by the world @kyvg did in #161, releasing today!

[szymonnowak-st]

@mrmckeb Hi! I still see this issue in our codebase, even when using the latest version 4.1.1.

I've got the following content in our tsconfig.json file in one of the subfolders (app/assets/javascripts/v2/):

{
  "compilerOptions": {
    // other (hopefully) irrelevant options...
    "baseUrl": ".",
    "rootDir": ".",
    "paths": {
      "@/*": ["./*"]
    },
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "include": ["./**/*.ts", "./**/*.tsx"]
}

I'm getting the following errors:

Info 1270 [13:46:30.441] [typescript-plugin-css-modules] Failed with error: Can't find stylesheet to import.
  ╷
1 │ @import '@/styles/typography';
  │         ^^^^^^^^^^^^^^^^^^^^^
  ╵
  components/Button/Button.module.scss 1:9  root stylesheet

even though there exists a file app/assets/javascripts/v2/styles/_typography.scss.