Emmet suggestions show up in JS/TS files when they should not

[sleeyax]

What version of VS Code are you using?

v1.100.0

What version of Tailwind CSS IntelliSense are you using?

0.14.16

What version of Tailwind CSS are you using?

3.4.17 currently - but I experience this issue in other projects using v4 as well

What package manager are you using?

npm

What operating system are you using?

Arch Linux

Tailwind config

import { type Config } from "tailwindcss/types/config";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class"],
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      colors: {
         // ...
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

VS Code settings

{
"tailwindCSS.experimental.classRegex": [
    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "tailwindCSS.emmetCompletions": true,
}

Describe your issue

Install the extension with the settings above and open any typescript project. The completions are provided on typescript object properties:

I've been having this issue for years now. The only thing that works is setting "tailwindCSS.emmetCompletions": false in settings JSON. If this can't be fixed I would suggest at least documenting this limitation.

---

This is the same issue as #228, which was closed but is still not fixed.

[thecrypticace]

I can reproduce this.

In JS contexts we use document symbols as a hint to stop from offering suggestions. In this case I'm api probably comes from an import — which is not considered a document symbol — so we don't pick it up as a possible prefix that we know to ignore.

Thoughts / ideas:

• People can write things like MyComponent.flex or x-foo.flex and expect them to be expanded
• There's no real way to differentiate the string api.order. from a theoretical api element with an order class and member access syntax.
• Maybe a safelist of HTML elements could work if the text matches /^(?<element>[a-z]+)\./ — e.g. no capitals (so React/Vue components), no dashes (web components)
• Feels annoying that we'd have to ship that but might be a reasonable solution
• This solution immediately doesn't work if you write Api.order.getOrder() tho which could be a pattern some people use with globals, static member access, etc…
• Analyzing imports is not necessarily a valid solution because React and Vue components are often imported

There's a chance that doing this "correctly" requires both full parse information and type information for referenced variables which isn't something we'd want to tackle.