Repository: tailwindlabs/tailwindcss

Problem statement:
CSS variables created by plugins are modified
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v4.0.1

**What operating system are you using?**

macOS

**Reproduction URL**

- Pull tailwindcss project
- Add the test below to `packages/tailwindcss/src/plugin.test.ts`

```diff
diff --git a/packages/tailwindcss/src/plugin.test.ts b/packages/tailwindcss/src/plugin.test.ts
index 9af3a55f..89129df7 100644
--- a/packages/tailwindcss/src/plugin.test.ts
+++ b/packages/tailwindcss/src/plugin.test.ts
@@ -32,6 +32,36 @@ test('plugin', async () => {
   `)
 })
 
+test('plugin CSS variables', async () => {
+  let input = css`
+    @plugin "my-plugin";
+  `
+
+  let compiler = await compile(input, {
+    loadModule: async () => ({
+      module: plugin(function ({ addBase }) {
+        addBase({
+          body: {
+            '--jun-drawerOpen': '1',
+            '--jun-ES-drawerWidth': '18rem',
+          },
+        })
+      }),
+      base: '/root',
+    }),
+  })
+
+  expect(compiler.build([])).toMatchInlineSnapshot(`
+    "@layer base {
+      body {
+        --jun-drawerOpen: 1;
+        --jun-ES-drawerWidth: 18rem;
+      }
+    }
+    "
+  `)
+})
+
 test('plugin.withOptions', async () => {
   let input = css`
     @plugin "my-plugin";

```

Run the test to see the error:

<img width="631" alt="Image" src="https://github.com/user-attachments/assets/b61ffa5a-4630-4b40-bf3d-3759a8a9feb3" />

**Describe your issue**

Tailwind CSS should not modify the CSS variables created by plugins.


Hints:
Seems like it's coming from https://github.com/tailwindlabs/tailwindcss/blob/c09bb5e2562293c14248ad8fbad5bdb5b9b22058/packages/tailwindcss/src/compat/plugin-api.ts#L507.

I can create a PR if this issue is labeled as a bug.

Patch:
diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts
--- a/packages/tailwindcss/src/compat/plugin-api.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.ts
@@ -499,15 +499,18 @@ export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] {
 
   for (let [name, value] of entries) {
     if (typeof value !== 'object') {
-      if (!name.startsWith('--') && value === '@slot') {
-        ast.push(rule(name, [atRule('@slot')]))
-      } else {
+      if (!name.startsWith('--')) {
+        if (value === '@slot') {
+          ast.push(rule(name, [atRule('@slot')]))
+          continue
+        }
+
         // Convert camelCase to kebab-case:
         // https://github.com/postcss/postcss-js/blob/b3db658b932b42f6ac14ca0b1d50f50c4569805b/parser.js#L30-L35
         name = name.replace(/([A-Z])/g, '-$1').toLowerCase()
-
-        ast.push(decl(name, String(value)))
       }
+
+      ast.push(decl(name, String(value)))
     } else if (Array.isArray(value)) {
       for (let item of value) {
         if (typeof item === 'string') {


Test patch:
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -1534,6 +1534,38 @@ describe('addBase', () => {
       "
     `)
   })
+
+  test('does not modify CSS variables', async () => {
+    let input = css`
+      @plugin "my-plugin";
+    `
+
+    let compiler = await compile(input, {
+      loadModule: async () => ({
+        module: plugin(function ({ addBase }) {
+          addBase({
+            ':root': {
+              '--PascalCase': '1',
+              '--camelCase': '1',
+              '--UPPERCASE': '1',
+            },
+          })
+        }),
+        base: '/root',
+      }),
+    })
+
+    expect(compiler.build([])).toMatchInlineSnapshot(`
+      "@layer base {
+        :root {
+          --PascalCase: 1;
+          --camelCase: 1;
+          --UPPERCASE: 1;
+        }
+      }
+      "
+    `)
+  })
 })
 
 describe('addVariant', () => {