Skip to content

Commit 72e97bc

Browse files
Allow hover over --theme(…) function in @media rule without spaces (#1172)
This PR fixes an issue with the regex detecting the `--theme(…)` function. If used within a media query with no spaces, it was not properly detecting word boundaries as characters like `<` etc. would be delimit properly. ## Test plan Added a unit test to ensure this does not regress.
1 parent 241659a commit 72e97bc

File tree

3 files changed

+38
-2
lines changed

3 files changed

+38
-2
lines changed

packages/tailwindcss-language-server/tests/hover/hover.test.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,24 @@ withFixture('basic', (c) => {
154154
},
155155
},
156156
})
157+
158+
testHover('theme() works inside @media queries', {
159+
lang: 'tailwindcss',
160+
text: `@media (width>=theme(screens.xl)) { .foo { color: red; } }`,
161+
position: { line: 0, character: 21 },
162+
163+
exact: true,
164+
expected: {
165+
contents: {
166+
kind: 'markdown',
167+
value: ['```plaintext', '1280px', '```'].join('\n'),
168+
},
169+
range: {
170+
start: { line: 0, character: 21 },
171+
end: { line: 0, character: 31 },
172+
},
173+
},
174+
})
157175
})
158176

159177
withFixture('v4/basic', (c) => {
@@ -272,6 +290,24 @@ withFixture('v4/basic', (c) => {
272290
end: { line: 2, character: 18 },
273291
},
274292
})
293+
294+
testHover('--theme() works inside @media queries', {
295+
lang: 'tailwindcss',
296+
text: `@media (width>=--theme(--breakpoint-xl)) { .foo { color: red; } }`,
297+
position: { line: 0, character: 23 },
298+
299+
exact: true,
300+
expected: {
301+
contents: {
302+
kind: 'markdown',
303+
value: ['```plaintext', '80rem /* 1280px */', '```'].join('\n'),
304+
},
305+
range: {
306+
start: { line: 0, character: 23 },
307+
end: { line: 0, character: 38 },
308+
},
309+
},
310+
})
275311
})
276312

277313
withFixture('v4/css-loading-js', (c) => {

packages/tailwindcss-language-service/src/util/find.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,7 @@ export function findHelperFunctionsInRange(
350350
): DocumentHelperFunction[] {
351351
const text = getTextWithoutComments(doc, 'css', range)
352352
let matches = findAll(
353-
/(?<prefix>[\s:;/*(){}])(?<helper>config|theme|--theme)(?<innerPrefix>\(\s*)(?<path>[^)]*?)\s*\)/g,
353+
/(?<prefix>[\W])(?<helper>config|theme|--theme)(?<innerPrefix>\(\s*)(?<path>[^)]*?)\s*\)/g,
354354
text,
355355
)
356356

packages/vscode-tailwindcss/CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Prerelease
44

5-
- Nothing yet!
5+
- Ensure hover information for `theme(…)` and other functions are shown when used in `@media` queries ([#1172](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1172))
66

77
## 0.14.3
88

0 commit comments

Comments
 (0)