Show @theme in symbol list (#1227)

Right now `@theme` is treated as an opaque at-rule by the CSS language
server and it doesn't show up in symbol navigation. This PR addresses
this by performing the same type of replacement we do for `@utility`,
`@variant`, and `@custom-variant`.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

Author: thecrypticace

packages/tailwindcss-language-server/src/language/rewriting.test.ts

@@ -65,6 +65,30 @@ test('@utility', () => {
   expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
 })
 
+test('@theme', () => {
+  let input = [
+    //
+    '@theme {',
+    '  color: red;',
+    '}',
+    '@theme inline reference static default {',
+    '  color: red;',
+    '}',
+  ]
+
+  let output = [
+    //
+    '.placeholder {', // wrong
+    '  color: red;',
+    '}',
+    '.placeholder                                 {', // wrong
+    '  color: red;',
+    '}',
+  ]
+
+  expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
+})
+
 test('@custom-variant', () => {
   let input = [
     //

packages/tailwindcss-language-server/src/language/rewriting.ts

@@ -37,6 +37,7 @@ export function rewriteCss(css: string) {
   css = css.replace(/@variants(\s+[^{]+){/g, replaceWithAtRule())
   css = css.replace(/@responsive(\s*){/g, replaceWithAtRule())
   css = css.replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule())
+  css = css.replace(/@theme(\s+[^{]*){/g, replaceWithStyleRule())
 
   css = css.replace(/@custom-variant(\s+[^;{]+);/g, (match: string) => {
     let spaces = ' '.repeat(match.length - 11)

packages/tailwindcss-language-server/tests/css/css-server.test.ts

@@ -202,6 +202,46 @@ defineTest({
   },
 })
 
+defineTest({
+  name: '@theme',
+  prepare: async ({ root }) => ({
+    client: await createClient({
+      server: 'css',
+      root,
+    }),
+  }),
+  handle: async ({ client }) => {
+    let doc = await client.open({
+      lang: 'tailwindcss',
+      name: 'file-1.css',
+      text: css`
+        @import 'tailwindcss';
+        @theme {
+          --color-primary: #333;
+        }
+      `,
+    })
+
+    // No errors
+    expect(await doc.diagnostics()).toEqual([])
+
+    // Symbols show up for @theme
+    expect(await doc.symbols()).toMatchObject([
+      {
+        kind: SymbolKind.Class,
+        name: '@theme ',
+        location: {
+          uri: '{workspace:default}/file-1.css',
+          range: {
+            start: { line: 1, character: 0 },
+            end: { line: 3, character: 1 },
+          },
+        },
+      },
+    ])
+  },
+})
+
 defineTest({
   name: '@layer statement',
   prepare: async ({ root }) => ({

packages/vscode-tailwindcss/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - LSP: Declare capability for handling workspace folder change notifications ([#1223](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1223))
 - Don't throw when resolving paths containing a `#` character ([#1225](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1225))
+- Show `@theme` in symbol list in CSS language mode ([#1227](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1227))
 
 ## 0.14.6