Preserve case of css variables added by plugins

We upgrade postcss-js to v4 to fix this

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Preserve case of css variables added by plugins ([#6888](https://github.com/tailwindlabs/tailwindcss/pull/6888))
 
 ## [3.0.10] - 2022-01-04
 

package.json

@@ -79,7 +79,7 @@
     "is-glob": "^4.0.3",
     "normalize-path": "^3.0.0",
     "object-hash": "^2.2.0",
-    "postcss-js": "^3.0.3",
+    "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.7",

tests/custom-plugins.test.js

@@ -1892,3 +1892,22 @@ test('animation values are joined when retrieved using the theme function', () =
     `)
   })
 })
+
+test('custom properties are not converted to kebab-case when added to base layer', () => {
+  let config = {
+    content: [],
+    plugins: [
+      function ({ addBase }) {
+        addBase({
+          ':root': {
+            '--colors-primaryThing-500': '0, 0, 255',
+          },
+        })
+      },
+    ],
+  }
+
+  return run('@tailwind base', config).then((result) => {
+    expect(result.css).toContain(`--colors-primaryThing-500: 0, 0, 255;`)
+  })
+})

tests/parseObjectStyles.test.js

@@ -300,3 +300,17 @@ test('it can parse an array of styles', () => {
     }
   `)
 })
+
+test('custom properties preserve their case', () => {
+  const result = parseObjectStyles({
+    ':root': {
+      '--colors-aColor-500': '0',
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    :root {
+      --colors-aColor-500: 0;
+    }
+  `)
+})