tests(tsconfig): @ scoped alias tested using examples

examples/react-app/src/test/aliased-modules/AliasedModules.tsx

@@ -0,0 +1,10 @@
+import styles from "@d/DuplicateSelectors.module.scss";
+import buttonCss from "@s/button.module.scss";
+
+export default function () {
+  return (
+    <div className={styles.flex}>
+      <p className={buttonCss["btn-secondary"]}></p>
+    </div>
+  );
+}

examples/react-app/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -19,14 +15,16 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "paths": {
+      "@d": ["./test/DuplicateSelectors/*"],
+      "@s": ["./styles/*"]
+    }
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "references": [
     {
       "path": "./tsconfig.node.json"
     }
   ]
-}
+}

src/store/Store.ts

@@ -220,13 +220,15 @@ export class Store {
         const alias = normalizePath(path.dirname(source));
         const module_name = path.basename(source);
         const paths = config.compilerOptions.paths;
+        const dir = (paths?.[alias] ?? [""]).join("");
         const baseUrl = config.compilerOptions.baseUrl;
         if (baseUrl) {
           const final_path = normalizePath(
             path.join(
               config.baseDir,
               config.compilerOptions.baseUrl ?? "",
-              source.replace("@", "")
+              !!alias.match(/^\@/g)?.[0] ? dir.replace("*", "") : alias,
+              module_name
             )
           );
           if (this.cssModules.has(final_path)) {

src/test/suite/extension.test.ts

@@ -820,6 +820,14 @@ suite("TS Config path aliases", async () => {
         path.join(__dirname, examplesLocation, "react-app/src/App.tsx")
       );
 
+      const AliasedModuleComponent = Uri.file(
+        path.join(
+          __dirname,
+          examplesLocation,
+          "react-app/src/test/aliased-modules/AliasedModules.tsx"
+        )
+      );
+
       test("should not report an import diagnostics error on aliased module imports", async () => {
         const document = await workspace.openTextDocument(AppComponent);
         await window.showTextDocument(document);
@@ -853,6 +861,36 @@ suite("TS Config path aliases", async () => {
         assert.notEqual(result, undefined);
         StorageInstance.flushStorage();
       });
+
+      test("should resolve `@` scoped modules when base url is also defined:Hover", async () => {
+        const document = await workspace.openTextDocument(
+          AliasedModuleComponent
+        );
+        await window.showTextDocument(document);
+
+        await StorageInstance.bootstrap();
+        const hover = new HoverProvider();
+        const position = new Position(5, 31);
+        const result = await hover.provideHover(document, position);
+
+        assert.notEqual(result, undefined);
+        StorageInstance.flushStorage();
+      });
+
+      test("should resolve `@` scoped modules when base url is also defined:Definition", async () => {
+        const document = await workspace.openTextDocument(
+          AliasedModuleComponent
+        );
+        await window.showTextDocument(document);
+
+        await StorageInstance.bootstrap();
+        const def = new DefnitionProvider();
+        const position = new Position(6, 29);
+        const result = await def.provideDefinition(document, position);
+
+        assert.notEqual(result, undefined);
+        StorageInstance.flushStorage();
+      });
     }
   );
 });