update error message

tailwindlabs · Mar 7, 2024 · 090727e · 090727e
1 parent 37d1198
commit 090727e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
@@ -66,15 +66,14 @@ describe('compiling CSS', () => {
         ['bg-primary'],
       ),
     ).toThrowErrorMatchingInlineSnapshot(`
-      [Error: Invalid \`@theme\` detected:
+      [Error: \`@theme\` blocks must only contain custom properties or \`@keyframes\`.
 
-      @theme {
-        /* Only CSS variables are allowed, this is not allowed: */
-        .foo {
-          --color-primary: blue;
+        @theme {
+      >   .foo {
+      >     --color-primary: blue;
+      >   }
         }
-      }
-      ]
+        ]
     `)
   })
 

diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
@@ -38,11 +38,14 @@ export function compile(css: string, rawCandidates: string[]) {
         return
       }
 
-      let tree = rule('@theme', [
-        comment(' Only CSS variables are allowed, this is not allowed: '),
-        node,
-      ])
-      throw new Error(`Invalid \`@theme\` detected:\n\n${toCss([tree])}`)
+      let snippet = toCss([rule('@theme', [node])])
+        .split('\n')
+        .map((line, idx, all) => `${idx === 0 || idx >= all.length - 2 ? ' ' : '>'} ${line}`)
+        .join('\n')
+
+      throw new Error(
+        `\`@theme\` blocks must only contain custom properties or \`@keyframes\`.\n\n${snippet}`,
+      )
     })
 
     // Keep a reference to the first `@theme` rule to update with the full theme