From 21285b861e51fabbfd5ff5904046e7de05d8c0d5 Mon Sep 17 00:00:00 2001 From: Viijay-Kr Date: Thu, 12 Jan 2023 18:58:30 +0100 Subject: [PATCH] fix(auto-import): #20 auto import module only from the same directory --- .github/workflows/checks.yml | 10 +-- CHANGELOG.md | 2 + .../src/test/styles/TestStyles.module.scss | 4 -- package.json | 2 +- src/providers/ProviderFactory.ts | 68 +++++++++++-------- src/providers/completion.ts | 2 +- 6 files changed, 48 insertions(+), 40 deletions(-) diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index b795ade..064140b 100644 --- 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 index 0a8a5ca..271280c 100644 --- 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 index 2885fa2..5c8b0bb 100644 --- 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; } \ No newline at end of file diff --git a/package.json b/package.json index 4734071..9ea81f6 100644 --- 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 index 9a1f8d5..41b314f 100644 --- 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( + (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 index 69d654f..2a09696 100644 --- 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, }));