CSS variables created by plugins are modified

[siriwatknp]

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 --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:

Describe your issue

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

[siriwatknp]

Seems like it's coming from

tailwindcss/packages/tailwindcss/src/compat/plugin-api.ts

Line 507 in c09bb5e

name = name.replace(/([A-Z])/g, '-$1').toLowerCase()

.

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

[RobinMalfait]

Thanks for the bug report and the fix! This will be available in the next release, or you can try to use the insiders build which will have the fix available soon:

• npm install tailwindcss@insiders

[siriwatknp]

Thanks for the bug report and the fix! This will be available in the next release, or you can try to use the insiders build which will have the fix available soon:

• npm install tailwindcss@insiders

Thanks! FYI, I have to update @tailwindcss/postcss too. Updating tailwindcss alone does not work.