typescript-plugin-css-modules
typescript-plugin-css-modules copied to clipboard
Fails to find files by aliased imports with omitted file extension or underscore
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.scssimportsapps/my-app/src/styles/_variables.scssin the following ways:- No import alias:
@import 'src/styles/_variables.scss'- working ✅@import 'src/styles/variables.scss'- working ✅@import 'src/styles/_variables'- working ✅@import 'src/styles/variables'- working ✅
- With alias:
@import '@/styles/_variables.scss'- still working ✅@import '@/styles/variables.scss'- not working ❌@import '@/styles/_variables'- not working ❌@import '@/styles/variables'- not working ❌
By
not workingI mean empty object types for scss module like so:(alias) let styles: {} import styles - No import alias:
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.