Preserve case of css variables added by plugins

We upgrade postcss-js to v4 to fix this

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

@@ -1,5 +1,6 @@
 import parseObjectStyles from '../src/util/parseObjectStyles'
 import postcss from 'postcss'
+import postcssJs from 'postcss-js'
 
 function css(nodes) {
   return postcss.root({ nodes }).toString()
@@ -300,3 +301,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;
+    }
+  `)
+})