fix(auto-import): #20 auto import module only from the same directory

Viijay-Kr · Jan 12, 2023 · 21285b8 · 21285b8
1 parent 63b9b52
commit 21285b8
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 40 deletions.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -1,11 +1,6 @@
 name: Check
 
-on:
-  pull_request_target:
-    types: [opened, reopened, synchronize]
-    branches:
-      - main
-      - "release/*"
+on: [push]
 
 jobs:
   test:
@@ -30,7 +25,8 @@ jobs:
     name: Check Version
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - run: npm install

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## [1.3.5]
+- Update: The auto import feature now only includes modules in the same directory - closes [#20](https://github.com/Viijay-Kr/react-ts-css/issues/20#issuecomment-1379073856)
 ## [1.3.4]
 - Update doc to highlight the casing support
 ## [1.3.2]

diff --git a/examples/react-app/src/test/styles/TestStyles.module.scss b/examples/react-app/src/test/styles/TestStyles.module.scss
@@ -16,8 +16,4 @@
 
 .testCamelCase {
   display: flex;
-}
-
-.snake_case {
-  display: flex;
 }
diff --git a/package.json b/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 and Completion Providers",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "author": "Viijay-Kr",
   "publisher": "viijay-kr",
   "homepage": "https://github.com/Viijay-Kr/react-ts-css/blob/main/README.md",

diff --git a/src/providers/ProviderFactory.ts b/src/providers/ProviderFactory.ts
@@ -21,6 +21,7 @@ import {
 import { SymbolInformation } from "vscode-css-languageservice";
 import { ImportDeclaration, isImportDeclaration } from "@babel/types";
 import { getImportDeclarations } from "../parser/utils";
+import { basename, extname, parse as parsePath, relative } from "path";
 
 export enum ProviderKind {
   Definition = 1,
@@ -252,16 +253,22 @@ export class ProviderFactory {
   public async getImportCompletions() {
     const sourceFiles = Storage.sourceFiles;
     const activeFileuri = this.document.uri.path;
+    const activePathInfo = parsePath(activeFileuri);
+    const currentDir = activePathInfo.dir;
     const parserResult = Storage.getNodeOfActiveFile();
     const importStatements = getImportDeclarations(parserResult?.unsafe_ast);
     const lastImportStatement = importStatements[importStatements.length - 1];
 
     const buildAdditionalEdit = (
-      module: string /** full path of the module */,
-      moduleIdentifier: string
+      module: string /** full path of the module */
     ) => {
-      const absolutePath = module.replace(Storage.workSpaceRoot + "/", "");
-      const newText = `import ${moduleIdentifier} from '${absolutePath}'\n`;
+      const modulePathInfo = parsePath(module);
+      const activePathInfo = parsePath(activeFileuri);
+      const relativePath = relative(activePathInfo.dir, modulePathInfo.dir);
+      const newText = `import styles from '${
+        relativePath === "" ? "./" : relativePath
+      }${modulePathInfo.base}';\n`;
+
       if (lastImportStatement?.loc) {
         return [
           TextEdit.insert(
@@ -274,33 +281,40 @@ export class ProviderFactory {
       }
     };
 
-    const filterOutExistingModules = (item: ImportCompletionItem) => {
-      let isAlreadyExported = false;
-      for (const statement of importStatements) {
-        if (isImportDeclaration(statement)) {
-          const name = statement.source.value;
-          if (name.match(item.shortPath)?.index) {
-            isAlreadyExported = true;
-            break;
+    const shouldInclude = (uri: string): boolean => {
+      // allow only the modules that live in the same directory
+      const uriPathInfo = parsePath(uri);
+      if (currentDir === uriPathInfo.dir) {
+        let isAlreadyImported = false;
+        for (const statement of importStatements) {
+          if (isImportDeclaration(statement)) {
+            const name = statement.source.value;
+            if (name.match(uriPathInfo.name)?.index) {
+              isAlreadyImported = true;
+              break;
+            }
           }
         }
+        return !isAlreadyImported;
       }
-      return !isAlreadyExported;
+      return false;
     };
 
-    return Array.from(sourceFiles.keys())
-      .map((uri): ImportCompletionItem => {
-        const shortPath = uri.split("/").pop() ?? "";
-        const moduleIdentifier =
-          (shortPath.split(".")[0] ?? shortPath) + "_styles";
-        return {
-          label: moduleIdentifier,
-          type: "module",
-          shortPath,
-          extras: uri,
-          additionalEdits: buildAdditionalEdit(uri, moduleIdentifier),
-        };
-      })
-      .filter((c) => filterOutExistingModules(c))
+    return Array.from(sourceFiles.keys()).reduce<ImportCompletionItem[]>(
+      (acc, uri) => {
+        const shortPath = basename(uri);
+        if (shouldInclude(uri)) {
+          return acc.concat({
+            label: "styles",
+            type: "module",
+            shortPath,
+            extras: uri,
+            additionalEdits: buildAdditionalEdit(uri),
+          });
+        }
+        return acc;
+      },
+      []
+    );
   }
 }
diff --git a/src/providers/completion.ts b/src/providers/completion.ts
@@ -98,7 +98,7 @@ export const importsCompletionProvider: () => CompletionItemProvider = () => ({
       const items = await provider.getImportCompletions();
       return items.map((c, index) => ({
         label: c.label,
-        detail: `auto import...${c.shortPath}`,
+        detail: `auto import ...${c.shortPath}`,
         kind: CompletionItemKind.Module,
         additionalTextEdits: c.additionalEdits,
       }));