Fix parsing of @custom-variant shorthand in Tailwind CSS language m…

…ode (#1183) Fixes #1180
tailwindlabs · Feb 7, 2025 · dd673ab · dd673ab
1 parent d32a3ed
commit dd673ab
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts
@@ -354,6 +354,10 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
     .replace(/@variants(\s+[^{]+){/g, replace())
     .replace(/@responsive(\s*){/g, replace())
     .replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule())
+    .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))

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Treat `<script lang=“tsx”>` as containing JSX ([#1175](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1175))
 - Add support for `static` theme option ([#1176](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1176))
 - Add details about theme options when hovering ([#1176](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1176))
+- Fix parsing of `@custom-variant` shorthand in Tailwind CSS language mode ([#1183](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1183))
 
 ## 0.14.3