feat(tsconfig): json5 to parse tsconfig (#157)

.changeset/little-chairs-provide.md

@@ -0,0 +1,5 @@
+---
+"react-ts-css": minor
+---
+
+feat(tsconfig): json5 to parse tsconfig

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"
     }
   ]
-}
+}

package.json

@@ -45,7 +45,7 @@
     "theme": "dark"
   },
   "engines": {
-    "vscode": "^1.72.0"
+    "vscode": "^1.90.0"
   },
   "categories": [
     "Programming Languages"
@@ -180,33 +180,34 @@
     "yarn": false
   },
   "devDependencies": {
+    "@babel/parser": "^7.19.3",
+    "@babel/traverse": "^7.19.3",
     "@babel/types": "^7.19.3",
     "@changesets/cli": "^2.27.1",
     "@types/babel__traverse": "^7.18.2",
     "@types/glob": "^7.2.0",
     "@types/mocha": "^9.1.1",
     "@types/node": "^16.18.11",
     "@types/sinon": "^10.0.13",
-    "@types/vscode": "^1.72.0",
+    "@types/vscode": "^1.90.0",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "@vscode/test-electron": "^2.3.8",
     "@vscode/vsce": "^2.16.0",
+    "closest-match": "^1.3.3",
     "eslint": "^8.20.0",
+    "fast-glob": "^3.2.12",
     "glob": "^8.0.3",
+    "json5": "^2.2.3",
     "mocha": "^10.0.0",
     "ovsx": "^0.8.3",
     "sinon": "^14.0.1",
     "ts-loader": "^9.3.1",
     "typescript": "^4.9.4",
     "vsce": "^2.11.0",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
     "vscode-css-languageservice": "^6.2.12",
-    "@babel/parser": "^7.19.3",
-    "@babel/traverse": "^7.19.3",
-    "closest-match": "^1.3.3",
-    "fast-glob": "^3.2.12"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
   "dependencies": {
     "typescript-cleanup-definitions": "^1.1.0"

src/extension.ts

@@ -59,10 +59,6 @@ workspace.onDidCreateFiles((e) => {
   Store.addSourceFiles(e.files);
 });
 
-workspace.onDidChangeTextDocument((e) => {
-  Store.bootstrap();
-});
-
 window.onDidChangeActiveTextEditor((e) => {
   Store.bootstrap();
 });
@@ -87,6 +83,13 @@ const syncWithGit = () => {
 };
 
 export async function activate(context: ExtensionContext): Promise<void> {
+  workspace.onDidChangeTextDocument((e) => {
+    // Event is fired when logging to output channel
+    if (e.document.fileName.includes(context.extension.id)) return;
+
+    Store.bootstrap();
+  });
+
   workspace.onDidChangeConfiguration(async (e) => {
     const affected = e.affectsConfiguration(EXT_NAME);
     if (affected) {
@@ -105,6 +108,7 @@ export async function activate(context: ExtensionContext): Promise<void> {
       await syncTsPlugin();
     }
   });
+
   const syncTsPlugin = async () => {
     const ext = extensions.getExtension("vscode.typescript-language-features");
     if (ext) {
@@ -188,9 +192,9 @@ export async function activate(context: ExtensionContext): Promise<void> {
     context.subscriptions.push(_cssCodeLensProvider);
     context.subscriptions.push(_cssRenameSelectorProvider);
   } catch (e) {
-    console.error(e);
+    Store.outputChannel.error((e as Error).message);
     window.showWarningMessage(
-      "Something went wrong while activating React-TS-CSS extension"
+      "Something went wrong while activating React-TS-CSS extension. Check the output channel"
     );
   }
 }

src/parser/v2/css.ts

@@ -31,6 +31,7 @@ import {
   isSibling,
   isSuffix,
 } from "../utils";
+import Store from "../../store/Store";
 
 export const getLanguageService = (module: string) => {
   switch (path.extname(module) as CssModuleExtensions) {
@@ -86,7 +87,9 @@ export const parseCss = async (
     );
     return { selectors, eofRange, variables, ast: ast as Stylesheet, colors };
   } catch (e) {
-    console.error(e);
+    Store.outputChannel.error(
+      `CSSParserError: Parsing css module ${module} failed`
+    );
   }
 };
 

src/providers/css/CSSProvider.ts

@@ -115,7 +115,13 @@ export class CSSProvider {
         })
       );
     } catch (e) {
-      console.error(e);
+      Store.outputChannel.error(
+        `CSSProviderError: Failed in document '${
+          this.document.uri.fsPath
+        }' at '${this.position.line}:${this.position.character}' 
+         Provider: ${this.providerKind}
+         ${e as Error}`
+      );
     }
 
     return candidates;
@@ -529,6 +535,9 @@ export class CSSDiagnosticsProvider extends CSSProvider {
     const references = await this.getReferences();
     const filePath = normalizePath(this.document.uri.fsPath);
     const source_css_file = Store.cssModules.get(filePath);
+    if (!source_css_file) {
+      return [];
+    }
     const selectors = (await parseCss(source_css_file ?? ""))?.selectors;
     if (!selectors) return [];
 

src/providers/css/codelens.ts

@@ -2,6 +2,7 @@ import * as vscode from "vscode";
 import Settings from "../../settings";
 import { ProviderKind } from "../types";
 import { CSSCodeLensProvider, CSSProvider } from "./CSSProvider";
+import Store from "../../store/Store";
 
 export class ReferenceCodeLens extends vscode.CodeLens {
   constructor(
@@ -29,8 +30,8 @@ export class ReferenceCodeLensProvider implements vscode.CodeLensProvider {
       });
 
       return provider.provideCodeLenses();
-    } catch (e) {
-      console.error(e);
+    } catch (e: any) {
+      Store.outputChannel.error(`ReferenceCodeLensProviderError: ${e.message}`);
       return [];
     }
   }

src/providers/css/rename-selector.ts

@@ -12,6 +12,7 @@ import Settings from "../../settings";
 import { CSSProvider, CSSRenameProvider } from "./CSSProvider";
 import { ProviderKind } from "../types";
 import { isSuffix, stripSelectHelpers } from "../../parser/utils";
+import Store from "../../store/Store";
 export class RenameSelectorProvider implements RenameProvider {
   async provideRenameEdits(
     document: TextDocument,
@@ -55,8 +56,11 @@ export class RenameSelectorProvider implements RenameProvider {
       });
       const range = await provider.getSelectorRange();
       return range;
-    } catch (e) {
-      console.error(e);
+    } catch (e: any) {
+      Store.outputChannel.error(
+        `RenameSelectorProviderError: Failed in document '${document}' at '${position.line}:${position.character}' 
+         ${e.message}`
+      );
       return;
     }
   }

src/providers/ts/code-actions.ts

@@ -118,7 +118,10 @@ export class DiagnosticCodeAction implements vscode.CodeActionProvider {
       action.diagnostics = [diagnostic];
       return action;
     } catch (e) {
-      console.log(e);
+      Store.outputChannel.error(
+        e as Error,
+        `CodeActionError: Ingore warning failed`
+      );
       throw e;
     }
   }

src/providers/ts/completion.ts

@@ -15,6 +15,7 @@ import {
 import Settings from "../../settings";
 import { ProviderKind } from "../types";
 import { TSProvider } from "./TSProvider";
+import Store from "../../store/Store";
 
 export class SelectorsCompletionProvider implements CompletionItemProvider {
   async provideCompletionItems(
@@ -89,7 +90,10 @@ export class SelectorsCompletionProvider implements CompletionItemProvider {
         }
       } catch (e) {}
     } catch (e) {
-      console.info(e);
+      Store.outputChannel.error(
+        `${e as Error}`,
+        `SelectorCompletionProvider: Failed in document '${document}' at '${position.line}:${position.character}'`
+      );
     }
     return [];
   }
@@ -115,8 +119,11 @@ export class ImportCompletionProvider implements CompletionItemProvider {
           additionalTextEdits: c.additionalEdits,
         }))
       );
-    } catch (e) {
-      console.error(e);
+    } catch (e: any) {
+      Store.outputChannel.error(
+        `ImportCompletionProvider: Failed in document '${document}' at '${position.line}:${position.character}' 
+         ${e.message}`
+      );
       return;
     }
   }