From 029ef16542bb68c6b01651447aaefea41d7937de Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 11:49:51 -0500 Subject: [PATCH 1/6] Fix CS --- .../src/language/cssServer.ts | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index c33e3ebd..cc812618 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -337,22 +337,22 @@ function replace(delta = 0) { function createVirtualCssDocument(textDocument: TextDocument): TextDocument { let content = textDocument - .getText() - .replace(/@screen(\s+[^{]+){/g, replace(-2)) - .replace(/@variants(\s+[^{]+){/g, replace()) - .replace(/@responsive(\s*){/g, replace()) - .replace(/@layer(\s+[^{]{2,}){/g, replace(-3)) - .replace( - /@media(\s+screen\s*\([^)]+\))/g, - (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`, - ) - // Remove`source(…)`, `theme(…)`, and `prefix(…)` from `@import`s - // otherwise we'll show syntax-error diagnostics which we don't want - .replace( - /@import\s*("(?:[^"]+)"|'(?:[^']+)')\s*((source|theme|prefix)\([^)]+\)\s*)+/g, - (_match, url) => `@import "${url.slice(1, -1)}"`, - ) - .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_') + .getText() + .replace(/@screen(\s+[^{]+){/g, replace(-2)) + .replace(/@variants(\s+[^{]+){/g, replace()) + .replace(/@responsive(\s*){/g, replace()) + .replace(/@layer(\s+[^{]{2,}){/g, replace(-3)) + .replace( + /@media(\s+screen\s*\([^)]+\))/g, + (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`, + ) + // Remove`source(…)`, `theme(…)`, and `prefix(…)` from `@import`s + // otherwise we'll show syntax-error diagnostics which we don't want + .replace( + /@import\s*("(?:[^"]+)"|'(?:[^']+)')\s*((source|theme|prefix)\([^)]+\)\s*)+/g, + (_match, url) => `@import "${url.slice(1, -1)}"`, + ) + .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_') return TextDocument.create( textDocument.uri, @@ -389,7 +389,9 @@ async function validateTextDocument(textDocument: TextDocument): Promise { .filter((diagnostic) => { if ( diagnostic.code === 'unknownAtRules' && - /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant)/.test(diagnostic.message) + /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant)/.test( + diagnostic.message, + ) ) { return false } From b463d60738bbf368ce1631d3404ebc78e886506b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 11:54:42 -0500 Subject: [PATCH 2/6] Loosen matching of `@imports` in Tailwind CSS language mode --- .../src/language/cssServer.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index cc812618..5278c0e7 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -346,12 +346,13 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { /@media(\s+screen\s*\([^)]+\))/g, (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`, ) - // Remove`source(…)`, `theme(…)`, and `prefix(…)` from `@import`s - // otherwise we'll show syntax-error diagnostics which we don't want - .replace( - /@import\s*("(?:[^"]+)"|'(?:[^']+)')\s*((source|theme|prefix)\([^)]+\)\s*)+/g, - (_match, url) => `@import "${url.slice(1, -1)}"`, - ) + .replace(/@import\s*("(?:[^"]+)"|'(?:[^']+)')\s*(.*?)(?=;|$)/g, (_match, url, other) => { + // Remove`source(…)`, `theme(…)`, and `prefix(…)` from `@import`s + // otherwise we'll show syntax-error diagnostics which we don't want + other = other.replace(/((source|theme|prefix)\([^)]+\)\s*)+?/g, '') + + return `@import "${url.slice(1, -1)}" ${other}` + }) .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_') return TextDocument.create( From fae5bb1ba47cfe46dba0daf25af2668deeb0118f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 12:02:43 -0500 Subject: [PATCH 3/6] Hide errors produced by inline `@layer` directives We need to update the embedded CSS language service and re-evaluate these replacements once we do as this should not be necessary --- .../tailwindcss-language-server/src/language/cssServer.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index 5278c0e7..fc37d854 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -338,6 +338,12 @@ function replace(delta = 0) { function createVirtualCssDocument(textDocument: TextDocument): TextDocument { let content = textDocument .getText() + + // Remove inline `@layer` directives + // TODO: This should be unnecessary once we have updated the bundled CSS + // language service + .replace(/@layer\s+[^;{]+(;|$)/g, '') + .replace(/@screen(\s+[^{]+){/g, replace(-2)) .replace(/@variants(\s+[^{]+){/g, replace()) .replace(/@responsive(\s*){/g, replace()) From 7f4da529800407771258e02056ef11086ebb45ef Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 12:23:08 -0500 Subject: [PATCH 4/6] Tweak highlighting of `source(none)` --- packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json index 92d02bd3..afd30b59 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -522,7 +522,7 @@ "patterns": [ { "match": "none(?=[)])", - "name": "variable.other.css" + "name": "support.constant.none.css" }, { "include": "source.css#string" From 9b58ac45bd5f48be0aada3d3439013e1ab92d029 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 12:23:16 -0500 Subject: [PATCH 5/6] Highlight layer function in imports --- .../syntaxes/at-rules.tmLanguage.json | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json index afd30b59..1ae0b7ec 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -37,6 +37,9 @@ { "include": "source.css#url" }, + { + "include": "#layer-fn" + }, { "include": "#source-fn" }, @@ -531,6 +534,33 @@ } ] }, + "layer-fn": { + "patterns": [ + { + "begin": "(?i)(?:\\s*)(? Date: Fri, 22 Nov 2024 14:44:30 -0500 Subject: [PATCH 6/6] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index f0c28083..4b709129 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -3,6 +3,9 @@ ## Prerelease - Reload variants when editing the theme in v4 ([#1094](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1094)) +- Don't show syntax errors when imports contain `layer(…)` and `source(…)` ([#1095](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1095)) +- Don't show syntax errors when document contains an `@layer` statement ([#1095](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1095)) +- Correct syntax highlighting when imports contain `layer(…)` ([#1095](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1095)) ## 0.12.14