From 554cb090b57ce70339216fd40cce4ec78b76110d Mon Sep 17 00:00:00 2001 From: tizu69 <60812901+tizu69@users.noreply.github.com> Date: Sun, 16 Feb 2025 09:18:14 +0100 Subject: [PATCH 1/9] Remove redundant matcher for custom-variant at-rule --- .../tailwindcss-language-server/src/language/cssServer.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index d46eeda5..3fc887cd 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -354,10 +354,12 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { .replace(/@variants(\s+[^{]+){/g, replace()) .replace(/@responsive(\s*){/g, replace()) .replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule()) + /* This matcher appears to be redundant, and I'm not sure of its purpose. + I kept it in case it has an actual use. The one below matches the same @-rule. .replace(/@custom-variant(\s+[^;]+);/g, (match: string) => { let spaces = ' '.repeat(match.length - 11) return `@media(p)${spaces}{}` - }) + }) */ .replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@layer(\s+[^{]{2,}){/g, replace(-3)) From 8f3144555fc1d9cb257aaf70844e9dcc55532234 Mon Sep 17 00:00:00 2001 From: tizu69 <60812901+tizu69@users.noreply.github.com> Date: Sun, 16 Feb 2025 09:19:00 +0100 Subject: [PATCH 2/9] Fix --value([*]) throwing error --- .../tailwindcss-language-server/src/language/cssServer.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index 3fc887cd..022fa5eb 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -381,6 +381,14 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { ) .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_') + .replace(/--value\(\[(\s?)\*\]\)/g, (_match, space) => { + // In this case, space represents a single character space. + // From what I can tell spaces aren't intended, so I limited this to a single matcher. + // This is because Prettier likes to add a space before the `*`. + // FIXME: This is probably unintentional behavior. Consider fixing. + return `--value([${space}_])` + }) + return TextDocument.create( textDocument.uri, textDocument.languageId, From 13fe7e90e91fb9ce152f1de664f1646fc4e3d0ec Mon Sep 17 00:00:00 2001 From: tizu69 <60812901+tizu69@users.noreply.github.com> Date: Sun, 16 Feb 2025 09:19:35 +0100 Subject: [PATCH 3/9] QOL: Add autocomplete for [*] utility helper --- .../tailwindcss-language-service/src/completionProvider.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index c67eb0f5..cb678b32 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -2473,5 +2473,10 @@ async function knownUtilityFunctionArguments(state: State, fn: UtilityFn): Promi description: "Support arbitrary URL functions, e.g. `{utility}-['url(…)']`", }) + args.push({ + name: '[*]', + description: 'Support arbitrary values, e.g. `{utility}-[abc]`', + }) + return args } From 33f22df4e7d59091933507b25e60547f707e3f92 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Sun, 16 Feb 2025 23:14:57 -0500 Subject: [PATCH 4/9] wip --- .../tailwindcss-language-server/src/language/cssServer.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index 022fa5eb..6ec28f74 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -354,12 +354,10 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { .replace(/@variants(\s+[^{]+){/g, replace()) .replace(/@responsive(\s*){/g, replace()) .replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule()) - /* This matcher appears to be redundant, and I'm not sure of its purpose. - I kept it in case it has an actual use. The one below matches the same @-rule. - .replace(/@custom-variant(\s+[^;]+);/g, (match: string) => { + .replace(/@custom-variant(\s+[^;{]+);/g, (match: string) => { let spaces = ' '.repeat(match.length - 11) return `@media(p)${spaces}{}` - }) */ + }) .replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@layer(\s+[^{]{2,}){/g, replace(-3)) From f6e6bab75a4c2d1d1a00cebf33ace013b86901da Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Sun, 16 Feb 2025 23:22:09 -0500 Subject: [PATCH 5/9] Fix symbol lookup --- .../src/language/cssServer.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index 6ec28f74..f48c54f7 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -215,9 +215,16 @@ connection.onDocumentSymbol(({ textDocument }) => if (symbol.name === `@media (${MEDIA_MARKER})`) { let doc = documents.get(symbol.location.uri) let text = doc.getText(symbol.location.range) - let match = text.trim().match(/^(@[^\s]+)([^{]+){/) + let match = text.trim().match(/^(@[^\s]+)(?:([^{]+)[{]|([^;{]+);)/) if (match) { - symbol.name = `${match[1]} ${match[2].trim()}` + symbol.name = `${match[1]} ${match[2]?.trim() ?? match[3]?.trim()}` + } + } else if (symbol.name === `.placeholder`) { + let doc = documents.get(symbol.location.uri) + let text = doc.getText(symbol.location.range) + let match = text.trim().match(/^(@[^\s]+)(?:([^{]+)[{]|([^;{]+);)/) + if (match) { + symbol.name = `${match[1]} ${match[2]?.trim() ?? match[3]?.trim()}` } } return symbol @@ -337,7 +344,7 @@ function replace(delta = 0) { function replaceWithStyleRule(delta = 0) { return (_match: string, p1: string) => { let spaces = ' '.repeat(p1.length + delta) - return `.foo${spaces}{` + return `.placeholder${spaces}{` } } @@ -356,7 +363,7 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { .replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@custom-variant(\s+[^;{]+);/g, (match: string) => { let spaces = ' '.repeat(match.length - 11) - return `@media(p)${spaces}{}` + return `@media (${MEDIA_MARKER})${spaces}{}` }) .replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule()) From c17219c1e246fb6fb094a923b5c2dab46f94a494 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 17 Feb 2025 11:20:36 -0500 Subject: [PATCH 6/9] Revert "Fix --value([*]) throwing error" This reverts commit 8f3144555fc1d9cb257aaf70844e9dcc55532234. --- .../tailwindcss-language-server/src/language/cssServer.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index f48c54f7..ecf3e318 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -386,14 +386,6 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { ) .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_') - .replace(/--value\(\[(\s?)\*\]\)/g, (_match, space) => { - // In this case, space represents a single character space. - // From what I can tell spaces aren't intended, so I limited this to a single matcher. - // This is because Prettier likes to add a space before the `*`. - // FIXME: This is probably unintentional behavior. Consider fixing. - return `--value([${space}_])` - }) - return TextDocument.create( textDocument.uri, textDocument.languageId, From baae207d4d7ba2e90aa814999bea5ebeba544402 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 17 Feb 2025 11:20:42 -0500 Subject: [PATCH 7/9] Revert "QOL: Add autocomplete for [*] utility helper" This reverts commit 13fe7e90e91fb9ce152f1de664f1646fc4e3d0ec. --- .../tailwindcss-language-service/src/completionProvider.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index cb678b32..c67eb0f5 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -2473,10 +2473,5 @@ async function knownUtilityFunctionArguments(state: State, fn: UtilityFn): Promi description: "Support arbitrary URL functions, e.g. `{utility}-['url(…)']`", }) - args.push({ - name: '[*]', - description: 'Support arbitrary values, e.g. `{utility}-[abc]`', - }) - return args } From e1a7ebcd0bbf2bb3fefdcb557974ddc583070d16 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 17 Feb 2025 11:23:05 -0500 Subject: [PATCH 8/9] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 8896fc88..6f5088a0 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -7,6 +7,7 @@ - Show source diagnostics when imports contain a layer ([#1204](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1204)) - Only detect project roots in v4 when using certain CSS features ([#1205](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1205)) - Update Tailwind CSS v4 version to v4.0.6 ([#1207](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1207)) +- Fix parsing of `@custom-variant` block syntax containg declarations and/or `@slot` ([#1212](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1212)) ## 0.14.4 From 111c8497912cf71e5898d7818f24b85967b86c17 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 17 Feb 2025 11:24:13 -0500 Subject: [PATCH 9/9] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 6f5088a0..718b33c4 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -8,6 +8,7 @@ - Only detect project roots in v4 when using certain CSS features ([#1205](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1205)) - Update Tailwind CSS v4 version to v4.0.6 ([#1207](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1207)) - Fix parsing of `@custom-variant` block syntax containg declarations and/or `@slot` ([#1212](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1212)) +- Fix display of custom at-rules in symbol listing ([#1212](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1212)) ## 0.14.4