only allow CSS variables inside @theme

tailwindlabs · Mar 7, 2024 · 048e678 · 048e678
1 parent adef99e
commit 048e678
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
@@ -51,6 +51,33 @@ describe('compiling CSS', () => {
     `)
   })
 
+  test('that only CSS variables are allowed', () => {
+    expect(() =>
+      compileCss(
+        css`
+          @theme {
+            --color-primary: red;
+            .foo {
+              --color-primary: blue;
+            }
+          }
+          @tailwind utilities;
+        `,
+        ['bg-primary'],
+      ),
+    ).toThrowErrorMatchingInlineSnapshot(`
+      [Error: Invalid \`@theme\` detected:
+
+      @theme {
+        /* Only CSS variables are allowed, this is not allowed: */
+        .foo {
+          --color-primary: blue;
+        }
+      }
+      ]
+    `)
+  })
+
   test('`@tailwind utilities` is only processed once', () => {
     expect(
       compileCss(

diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
@@ -32,10 +32,17 @@ export function compile(css: string, rawCandidates: string[]) {
         return WalkAction.Skip
       }
 
-      if (node.kind !== 'declaration') return
-      if (!node.property.startsWith('--')) return
+      if (node.kind === 'comment') return
+      if (node.kind === 'declaration' && node.property.startsWith('--')) {
+        theme.add(node.property, node.value)
+        return
+      }
 
-      theme.add(node.property, node.value)
+      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])}`)
     })
 
     // Keep a reference to the first `@theme` rule to update with the full theme