diff --git a/src/extension.ts b/src/extension.ts index 434792823a14a7e10fb27668aea1e8a91b832ab4..106636556df4a168633afcc4e3689b563fe63fd9 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -6,47 +6,15 @@ const tailwindClassNames = require('tailwind-class-names') // const tailwindClassNames = require('/Users/brad/Code/tailwind-class-names/dist') const dlv = require('dlv') -const CONFIG_GLOB = '{tailwind,tailwind.config,.tailwindrc}.js' - export async function activate(context: vscode.ExtensionContext) { - let tw - - try { - tw = await getTailwind() - } catch (err) {} - - let intellisense = new TailwindIntellisense(tw) - context.subscriptions.push(intellisense) - - let watcher = vscode.workspace.createFileSystemWatcher(`**/${CONFIG_GLOB}`) - - watcher.onDidChange(onFileChange) - watcher.onDidCreate(onFileChange) - watcher.onDidDelete(onFileChange) - - async function onFileChange(event) { - try { - tw = await getTailwind() - } catch (err) { - intellisense.dispose() - return - } - - intellisense.reload(tw) - } -} - -async function getTailwind() { if (!vscode.workspace.name) return - let files = await vscode.workspace.findFiles( - CONFIG_GLOB, + const configFile = await vscode.workspace.findFiles( + '{tailwind,tailwind.config,.tailwindrc}.js', '**/node_modules/**', 1 ) - if (!files) return null - - let configPath = files[0].fsPath + if (!configFile) return const plugin = join( vscode.workspace.workspaceFolders[0].uri.fsPath, @@ -58,7 +26,7 @@ let tw try { tw = await tailwindClassNames( - configPath, + configFile[0].fsPath, { tree: true, strings: true @@ -66,10 +34,61 @@ }, plugin ) } catch (err) { - return null + return } - return tw + const separator = dlv(tw.config, 'options.separator', ':') + + if (separator !== ':') return + + const items = createItems(tw.classNames, separator, tw.config) + + context.subscriptions.push( + createCompletionItemProvider( + items, + ['typescriptreact', 'javascript', 'javascriptreact'], + /\btw`([^`]*)$/, + ['`', ' ', separator], + tw.config + ) + ) + + context.subscriptions.push( + createCompletionItemProvider( + items, + ['css', 'sass', 'scss'], + /@apply ([^;}]*)$/, + ['.', separator], + tw.config, + '.' + ) + ) + + context.subscriptions.push( + createCompletionItemProvider( + items, + [ + 'html', + 'jade', + 'razor', + 'php', + 'blade', + 'vue', + 'twig', + 'markdown', + 'erb', + 'handlebars', + 'ejs', + // for jsx + 'typescriptreact', + 'javascript', + 'javascriptreact' + ], + /\bclass(Name)?=["']([^"']*)/, // /\bclass(Name)?=(["'])(?!.*?\2)/ + ["'", '"', ' ', separator], + tw.config + ) + ) } export function deactivate() {} @@ -182,6 +201,7 @@ items[key] = { item } } else { + console.log(key) const item = new vscode.CompletionItem( `${key}${separator}`, vscode.CompletionItemKind.Constant @@ -206,82 +226,3 @@ }) return items } - -class TailwindIntellisense { - private _completionProviders: vscode.Disposable[] - private _disposable: vscode.Disposable - private _items - - constructor(tailwind) { - if (tailwind) { - this.reload(tailwind) - } - } - - public reload(tailwind) { - this.dispose() - - const separator = dlv(tailwind.config, 'options.separator', ':') - - if (separator !== ':') return - - this._items = createItems(tailwind.classNames, separator, tailwind.config) - - this._completionProviders = [] - - this._completionProviders.push( - createCompletionItemProvider( - this._items, - ['typescriptreact', 'javascript', 'javascriptreact'], - /\btw`([^`]*)$/, - ['`', ' ', separator], - tailwind.config - ) - ) - - this._completionProviders.push( - createCompletionItemProvider( - this._items, - ['css', 'sass', 'scss'], - /@apply ([^;}]*)$/, - ['.', separator], - tailwind.config, - '.' - ) - ) - - this._completionProviders.push( - createCompletionItemProvider( - this._items, - [ - 'html', - 'jade', - 'razor', - 'php', - 'blade', - 'vue', - 'twig', - 'markdown', - 'erb', - 'handlebars', - 'ejs', - // for jsx - 'typescriptreact', - 'javascript', - 'javascriptreact' - ], - /\bclass(Name)?=["']([^"']*)/, // /\bclass(Name)?=(["'])(?!.*?\2)/ - ["'", '"', ' ', separator], - tailwind.config - ) - ) - - this._disposable = vscode.Disposable.from(...this._completionProviders) - } - - dispose() { - if (this._disposable) { - this._disposable.dispose() - } - } -}