68 multiple entries on go to definition

.vscode/launch.json

@@ -9,6 +9,9 @@
       "name": "Run Extension",
       "type": "extensionHost",
       "request": "launch",
+      "env": {
+        "TSS_DEBUG": "5859"
+      },
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--disable-extensions"
@@ -30,6 +33,16 @@
         "${workspaceFolder}/dist/**/*.js"
       ],
       "preLaunchTask": "tasks: watch-tests"
+    },
+    {
+      "name": "Attach to TS Server",
+      "type": "node",
+      "request": "attach",
+      "port": 5667,
+      "sourceMaps": true,
+      "outFiles": [
+        "/Volumes/VijayK/private/rtcss-tsplugin/node_modules/typescript/bin/tsserver"
+      ]
     }
   ]
 }

.vscode/settings.json

@@ -11,5 +11,6 @@
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
   "reactTsScss.autoComplete": true,
-  "reactTsScss.definition": true
+  "reactTsScss.definition": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [1.6.2]
+- Fixed Multiple Entries on Go to Definition
+  - Unnecessary definition results from declaration modules for css classes can be avoided - Closes [#68](https://github.com/Viijay-Kr/react-ts-css/issues/68)
 ## [1.6.1]
 - CSS Parser
   - Resolve selectors inside media queries - Closed [#66](https://github.com/Viijay-Kr/react-ts-css/issues/66) 

README.md

@@ -15,6 +15,12 @@ This extension also supports CSS language features which are not supported by bu
 > - Nested selectors
 > - Suffixed selectors ([SCSS only](https://sass-lang.com/documentation/style-rules/parent-selector#adding-suffixes))
 > - Deeply nested suffix selectors
+>
+> Almost all the project scaffolders such as vite , next js and CRA adds css module declration  to the project by injecting it in '.d.ts' file (for instance inside `node_modules/vite/client.d.ts` added by vite,). Typescript treats these definitions as definition provider for Style properties. This results in a useless defintion result when VS `Code Go to Definition` is tiggered. Check this [issue](https://github.com/Viijay-Kr/react-ts-css/issues/68).
+> 
+> This extension gives you an option to avoid that  result  using a typescript plugin [typescript-cleanup-defs](https://www.npmjs.com/package/typescript-cleanup-definitions) that can filter out those definitions results. Check the plugin for more details
+>
+> Override this plugin using the setting `reactTsScss.typecriptCleanUpDefs`
 
 ## TS/TSX Language Features
 ### [Definitions](https://code.visualstudio.com/api/references/vscode-api#DefinitionProvider)
@@ -79,6 +85,12 @@ Defaults
   "reactTsCSS.cssAutoComplete":true, 
   "reactTsCSS.cssDefinitions":true, 
   "reactTsCSS.cssSyntaxColor":true, 
+  "reactTsCSS.typecriptCleanUpDefs":true, 
+  "reactTsCSS.cleanUpDefs": [
+     "node_modules/vite/client.d.ts",
+    "node_modules/next/types/global.d.ts",
+    "node_modules/react-scripts/lib/react-app.d.ts"
+  ]
 }
 ```
 

examples/next-js-app-dir-css-modules/app/page.module.css

@@ -253,7 +253,7 @@
 @media (prefers-color-scheme: dark) {
   .vercelLogo {
     filter: invert(1);
-  }
+  },
 
   .logo,
   .thirteen img {

examples/react-app/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.4",
     "vite": "^3.1.0"
   }
 }

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

@@ -15,5 +15,5 @@ export const TestComponent = () => {
       <span className={TestStyles.testCamelCase}></span>
       <span className={TestStyles["non-existing-selector"]}></span>
     </div>
-  );
+  )
 };

examples/react-app/tsconfig.json

@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

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.6.1",
+  "version": "1.6.2",
   "author": "Viijay-Kr",
   "publisher": "viijay-kr",
   "homepage": "https://github.com/Viijay-Kr/react-ts-css/blob/main/README.md",
@@ -91,26 +91,49 @@
           "title": "Base Dir Path",
           "description": "Base directory path inside the project. Defaults to 'src'"
         },
-        "reactTsScss.cssAutoComplete":{
-          "type":"boolean",
+        "reactTsScss.cssAutoComplete": {
+          "type": "boolean",
           "title": "Autocomplete CSS variables",
-          "default":"true",
+          "default": true,
           "description": "Auto completion of css variables from various files"
         },
-        "reactTsScss.cssDefinitions":{
-          "type":"boolean",
+        "reactTsScss.cssDefinitions": {
+          "type": "boolean",
           "title": "Go to CSS variables definition",
-          "default":"true",
+          "default": true,
           "description": "Definition provider for css variables from various files"
         },
-        "reactTsScss.cssSyntaxColor":{
-          "type":"boolean",
+        "reactTsScss.cssSyntaxColor": {
+          "type": "boolean",
           "title": "Syntax Coloring for CSS variables",
-          "default":"true",
+          "default": true,
           "description": "Color preview and presentation for CSS variables"
+        },
+        "reactTsScss.typecriptCleanUpDefs": {
+          "type": "boolean",
+          "title": "Enable/Disable Typescript cleanup definitions plugin",
+          "description": "Typescript cleanup definitions plugin can be disabled with this setting. 'reactTsScss.cleanUpDefs' will have no effect when this setting is false",
+          "default": true
+        },
+        "reactTsScss.cleanUpDefs": {
+          "type": "array",
+          "title": "Typescript Cleanup Definitions",
+          "scope": "window",
+          "description": "Add a declaration file to skip definition results from this file. Useful for skipping unnecessary defintions from boilder plate projects",
+          "default": [
+            "node_modules/vite/client.d.ts",
+            "node_modules/next/types/global.d.ts",
+            "node_modules/react-scripts/lib/react-app.d.ts"
+          ]
         }
       }
-    }
+    },
+    "typescriptServerPlugins": [
+      {
+        "enableForWorkspaceTypeScriptVersions": true,
+        "name": "typescript-cleanup-definitions"
+      }
+    ]
   },
   "scripts": {
     "vscode:prepublish": "npm run package",
@@ -133,7 +156,7 @@
     "@types/babel__traverse": "^7.18.2",
     "@types/glob": "^7.2.0",
     "@types/mocha": "^9.1.1",
-    "@types/node": "16.x",
+    "@types/node": "^16.18.11",
     "@types/sinon": "^10.0.13",
     "@types/vscode": "^1.72.0",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -144,7 +167,8 @@
     "glob": "^8.0.3",
     "mocha": "^10.0.0",
     "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.4",
+    "typescript-cleanup-definitions": "^1.0.4",
     "vsce": "^2.11.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"