consecutive dashes break autocomplete for functional utilities (v4)

[ovsw]

What version of VS Code are you using?

v1.102.1

What version of Tailwind CSS IntelliSense are you using?

v0.14.25

What version of Tailwind CSS are you using?

v4.1.10

What package manager are you using?

pnpm

What operating system are you using?

verified on MacOS as well but currently on WSL2, running Ubuntu ( Wndows 11)

Tailwind CSS Stylesheet (v4)

@import "tailwindcss";

@theme {
  --tab--size-2: 2;
  --tab--size-4: 4;
  --tab--size-github: 8;
}
@utility tab-* {
  tab-size: --value(--tab--size- *);
}

VS Code settings

{
  "search.useIgnoreFiles": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.prettier": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.workingDirectories": [
    { "mode": "auto" }
  ],
  "eslint.useFlatConfig": true,
  "eslint.debug": true,
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.suggest.autoImports": true,
  "typescript.validate.enable": true,
  "typescript.reportStyleChecksAsWarnings": true,
  "tailwindCSS.experimental.configFile": "./packages/ui/src/styles/globals.css",
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "tailwindCSS.classAttributes": ["class", "className", "ngClass"]
}

Reproduction URL

This issue is so straightforward that I didn't bother with a reproduction URL. Please let me know if this is needed.

Describe your issue
TW 4 variables containing 2 or more consecutive dashes -- (aside from the starting ones) break intellisense auto-complete for functional TW4 utilities using them.
This doesn't work (tab-2, tab-4, and tab-github don't appear as suggestions, but they do work as Tailwind classes):

@theme {
  --tab--size-2: 2;
  --tab--size-4: 4;
  --tab--size-github: 8;
}
@utility tab-* {
  tab-size: --value(--tab--size- *);
}

but if we remove the extra dashes, autocomplete starts working again:

@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-github: 8;
}
@utility tab-* {
  tab-size: --value(--tab-size- *);
}

[ovsw]

After looking around the code, seems like the problem is with designSystem.getClassList() in Tailwind CSS v4 - it fails to enumerate functional utilities that use CSS variables with double dashes in their names. The utilities with double dashes complile and work correctly, since that's handled by designSystem.candidatesToCss().

Following the trail I found this PR where support for compiling utilities that contain double dashes in their name was added: Ensure -- is allowed inside candidates

However, currently line 95 of https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/theme.ts:
if (key.indexOf('--', 2) !== -1) continue
filters out any utility names that contain double-dashes from being suggested as autocomplete options.

I'm not 100% sure why that line is there, but I think it may have something to do with excluding sub-variables like --font-size-sm--line-height. From what I understand:

Should be INCLUDED (theme variables with double-dash in name):

• --tab--size-2 (double-dash is part of the base variable name)
• --my--custom--theme-value (multiple double-dashes in the name)

Should be EXCLUDED (sub-variables):

• --font-size-sm--line-height (has a sub-variable after the base)
• --color-red-500--alpha (has a sub-variable after the base)

So, the key difference is:

• Theme variables: Double-dash is part of the variable name itself
• Sub-variables: Double-dash is a separator between base variable and sub-property

Am I close?

[thecrypticace]

Yeah this is an issue caused by Tailwind CSS itself. I'll have to think through this a bit because it obviously feels broken but need to figure out if its fixable without causing unnecessary/useless completions to appear.