fix(diagnostics): ignoring dynamic selectors from dignostics collection until a proper way to handle them is identified

Author: Viijay-Kr

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.9.4]
+
+- Dynamic References to selectors is not considered for diagnostics - Partially fixes [#86](https://github.com/Viijay-Kr/react-ts-css/issues/86)
+
 ## [1.9.3]
 
 - Disabling References and Code lens due to performance issue

examples/react-app/src/test/DynamicClasses/DynamicClasses.module.scss

@@ -0,0 +1,3 @@
+.sm {
+    font-size: small;
+}

examples/react-app/src/test/DynamicClasses/DynamicClasses.tsx

@@ -0,0 +1,5 @@
+import styles from "./DynamicClasses.module.scss";
+
+export const DynamicClasses = ({ size }: { size: "sm" | "md" | "lg" }) => {
+  return <div className={styles[size]}></div>;
+};

package.json

@@ -2,7 +2,7 @@
   "name": "react-ts-css",
   "displayName": "React CSS modules",
   "description": "React CSS modules - VS code extension for CSS modules support in React projects written in typescript.Supports Definitions, Hover , Completion Providers and Diagnostics",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "author": "Viijay-Kr",
   "publisher": "viijay-kr",
   "homepage": "https://github.com/Viijay-Kr/react-ts-css/blob/main/README.md",

src/parser/v2/ts.ts

@@ -19,6 +19,7 @@ export const isCssModuleDeclaration = (value: string) => {
 type Accessor = {
   property: StringLiteral | Identifier;
   object: Identifier; // Should always be one of sourceIdentfiers
+  isDynamic?: boolean;
 };
 export type ParserResult = {
   /** A list of default export identifier of a css module */
@@ -72,6 +73,12 @@ export const parseTypescript = (
                 accessors.push({
                   property: path.node.property,
                   object: path.node.object,
+                  isDynamic:
+                    isIdentifier(path.node.property) &&
+                    content.charAt(
+                      // @ts-expect-error
+                      (path.node.property.loc?.start.index! as number) - 1
+                    ) === "[",
                 });
               }
             }

src/providers/ts/diagnostics.ts

@@ -102,7 +102,7 @@ export class SelectorRelatedDiagnostics extends Diagnostics {
   renameSelector() {}
   runDiagnostics() {
     for (const accessor of this.parsedResult?.style_accessors ?? []) {
-      const { property, object } = accessor;
+      const { property, object, isDynamic } = accessor;
       const style_reference = this.parsedResult?.style_references.get(
         object.name
       );
@@ -119,6 +119,7 @@ export class SelectorRelatedDiagnostics extends Diagnostics {
           return "";
         })();
         if (
+          !isDynamic &&
           selector !== "" &&
           selectors &&
           !selectors.has(selector) &&

src/test/suite/extension.test.ts

@@ -343,6 +343,20 @@ suite("Extension Test Suite", async () => {
         const diagnostics = await StorageInstance.bootStrap();
         assert.equal(diagnostics?.length, 2);
       });
+
+      test("should not provide dignostics for dynamic slectors", async () => {
+        const DynamicClasses = Uri.file(
+          path.join(
+            __dirname,
+            examplesLocation,
+            "react-app/src/test/DynamicClasses/DynamicClasses.tsx"
+          )
+        );
+        const document = await workspace.openTextDocument(DynamicClasses);
+        await window.showTextDocument(document);
+        const diagnostics = await StorageInstance.bootStrap();
+        assert.equal(diagnostics?.length, 0);
+      });
     });
   });