Extension attempts to autocomplete in strings that aren't classes

[michaelflores-italic]

I noticed that I was getting Tailwind autocomplete suggestions when typing code comments in TSX files. I filed an Issue with Nova but they pointed me to the extension so I am filing it here. This should be reproducible in any TSX or likely JSX file, but I can include a sample here if it proves difficult to repro.

[jasonplatts]

Thanks for letting me know Michael. Yes, unfortunately, the current version of the extension does not do a great job of preventing suggestions in these types of situations. Improved suggestions are on the roadmap.

[jasonplatts]

Hi @michaelflores-italic. Version 4.1 improves autocompletion suggestions. Please let me know if you continue to have any issues in TSX or JSX files.

Thanks!

[jasonplatts]

I'm going to assume this problem is resolved, so will close this issue. If any problems remain, please feel free to open another issue.

[alex-ketch]

Hi @jasonplatts, unfortunately I'm facing this issue with the latest release. The extension populates list of suggestions for all fields, not just className

Can be tested with a simple TSX file:

import React from 'react'

export const Test = () => {
  return <input type="" />
}

Cursor was located in the type attribute value

Let me know if you need any more info, or feel free to point me in the general direction of where a fix would need to happen and can poke around :)

Thanks!

[jasonplatts]

Hi @alex-ketch. Sorry for the delay getting back to you on this issue.

At the moment, the extension allows completion suggestions for certain file types when inside single or double quotes. This allows for dynamically assigning classes using variables. However, a downside to this approach is that it creates a number of cases where suggestions are offered at inappropriate times.

It may be possible to address this particular situation using scopes. When I have a moment, I will definitely be happy to take a look at this and make improvements. In the meantime, absolutely feel free to poke around. PRs are always welcome. The relevant method is the _preventCompletions method in completion_provider.js. I might suggest adding a _invalidReactContext method similar to _invalidVueContext method that already exists.

Thanks again. I'll reopen this issue.

[alex-ketch]

Sorry for not getting back to you sooner @jasonplatts, I only ever had a partial solution and was hoping for an epiphany for a workaround. I've filed a feature request in the Nova forum, but in case anyone is curious for a rough patch, I've modified the completion_provider.js#121 as such:

// Allow completions if context selectors is a HTML class attribute value.
- if (context.selectors[0].matches('html.tag.attribute.class.value.double-quoted')) { return false }
+ if (
+   context.selectors[0].matches('tsx.value') ||
+   // Allow completions if context selectors is a HTML class attribute value.
+   context.selectors[0].matches('html.tag.attribute.class.value.double-quoted') ||
+   // Allow completions in other files if contained within single quotes or double quotes.
+   // This, for example, enables completions in Rails ERB files when passing a class option to the link_to method.
+   context.selectors[0].classes.includes('single-quoted') ||
+   context.selectors[0].classes.includes('double-quoted')
+ ) { 
+   const classNameRegExp = new RegExp(/=(\w+)/, 'g')
+   let tagName = context.line.trimStart().trim().split('').reverse().join('')
+   tagName = classNameRegExp.exec(tagName)[1].split('').reverse().join('')
+ 
+   return !(tagName || '').startsWith('class')
+ }

if (context.selectors[0].matches('css')) { return false }

[EmranMR]

Sorry for not getting back to you sooner @jasonplatts, I only ever had a partial solution and was hoping for an epiphany for a workaround. I've filed a feature request in the Nova forum, but in case anyone is curious for a rough patch, I've modified the completion_provider.js#121 as such:

@alex-ketch There is a command that allows you to turn off tailwind suggestions on the fly. Just open up the command palette and press tt or type Toggle TailwindCSS. It is handy when coding outside of template files. I remember discussing this with Jason when I submitted a pull request similar to yours. #24 Unfortunately so many frameworks and templates that it makes it impossible to keep up with. Not sure if the new tree-sitter parser is any better, allowing us cherry picking context more appropriately?