Skip to content

Fix incorrect invalidConfigPath diagnostic when a theme() call spans multiple lines - #1606

Open
Megoos wants to merge 2 commits into
tailwindlabs:mainfrom
Megoos:fix/multiline-theme-helper-path
Open

Fix incorrect invalidConfigPath diagnostic when a theme() call spans multiple lines#1606
Megoos wants to merge 2 commits into
tailwindlabs:mainfrom
Megoos:fix/multiline-theme-helper-path

Conversation

@Megoos

@Megoos Megoos commented Aug 1, 2026

Copy link
Copy Markdown

Problem

A theme(…) call wrapped across multiple lines is reported as invalid, even though the same path resolves fine on a single line:

/* ✅ no warning */
.a {
  color: theme('colors.red.500');
}

/* ❌ warning */
.b {
  color: theme(
    'colors.red.500'
  );
}
'   'colors.red.500'
' does not exist in your theme config.(invalidConfigPath)

Note the quotes and the newline that leaked into the path. This is easy to hit in codebases with long token names, since Prettier wraps the call as soon as the line exceeds printWidth, and the only workaround is turning off invalidConfigPath entirely — which also hides real typos.

Cause

findHelperFunctionsInRange trims whitespace and quotes off the extracted path with:

pathStart += path.match(/^\s+/)?.length ?? 0

match() without the g flag returns [fullMatch, ...groups], so .length is the number of entries — always 1 — not the length of the match. Each trim step therefore moves the boundary by exactly one character.

There are two trim passes, so up to two whitespace characters per side happen to work — which is why single-line calls were fine, and why this looks like a "multi-line" bug even though newlines have nothing to do with it (theme( 'colors.red.500' ) breaks on one line too). A newline plus indentation is always past that limit.

Once whitespace is left over, /^['"]+/ stops matching so the quotes survive too, and that mangled path is what gets validated. The same mistake skews ranges.path, so the squiggle lands on the indentation instead of the path.

Worth knowing when testing: the false positive only reproduces on v3, which looks the path up directly with dlv. On v4 the path is resolved by compiling [--custom:theme(<path>)], and Tailwind's own parser tolerates the stray whitespace and quotes — so a valid path still resolves there, and the bug only surfaces on a genuine typo, as a mangled message and a wrong range.

Fix

Use ?.[0].length so the matched length is used. Applies to all four whitespace/quote trims.

Test plan

  1. Added a regression test — Helper functions can span multiple lines in find.test.ts — covering a wrapped call and one with a default value, asserting both the extracted path and the reported ranges. It fails before this change and passes after it.
  2. Ran the tailwindcss-language-service test suite — all tests pass.
  3. Tested manually with both a v3 and a v4 config, using the snippet above: before this change .b is flagged while .a is not, after it neither is. A real typo in the wrapped path is still reported, now underlining the path itself.

@greptile-apps

greptile-apps Bot commented Aug 1, 2026

Copy link
Copy Markdown

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains; the previously reported placeholder changelog reference has been replaced with the correct PR #1606 link.

Reviews (2): Last reviewed commit: "Update CHANGELOG with PR link" | Re-trigger Greptile

Comment thread packages/vscode-tailwindcss/CHANGELOG.md Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant