Fix issue with camelCased custom properties not being handled correctly in object styles (#1378)

Author: Andarist

.changeset/a9126a8f/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@emotion/serialize", "type": "patch" }],
+  "dependents": []
+}

.changeset/a9126a8f/changes.md

@@ -0,0 +1 @@
+Fixed issue with camelCased custom properties not being handled correctly in object styles

packages/core/__tests__/__snapshots__/css.js.snap

@@ -36,6 +36,17 @@ exports[`css call composition 1`] = `
 />
 `;
 
+exports[`handles camelCased custom properties in object styles properly 1`] = `
+.emotion-0 {
+  --textColor: green;
+  color: var(--textColor);
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`label in css call 1`] = `
 .emotion-0 {
   color: hotpink;

packages/core/__tests__/css.js

@@ -188,3 +188,16 @@ test('child selector array', () => {
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
+
+test('handles camelCased custom properties in object styles properly', () => {
+  const tree = renderer.create(
+    <div
+      css={{
+        '--textColor': 'green',
+        color: 'var(--textColor)'
+      }}
+    />
+  )
+
+  expect(tree.toJSON()).toMatchSnapshot()
+})

packages/serialize/src/index.js

@@ -11,8 +11,13 @@ import memoize from '@emotion/memoize'
 let hyphenateRegex = /[A-Z]|^ms/g
 let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
 
-const processStyleName = memoize((styleName: string) =>
-  styleName.replace(hyphenateRegex, '-$&').toLowerCase()
+const isCustomProperty = (property: string) => property.charCodeAt(1) === 45
+
+const processStyleName = memoize(
+  (styleName: string) =>
+    isCustomProperty(styleName)
+      ? styleName
+      : styleName.replace(hyphenateRegex, '-$&').toLowerCase()
 )
 
 let processStyleValue = (
@@ -41,7 +46,7 @@ let processStyleValue = (
 
   if (
     unitless[key] !== 1 &&
-    key.charCodeAt(1) !== 45 && // custom properties
+    !isCustomProperty(key) &&
     typeof value === 'number' &&
     value !== 0
   ) {
@@ -88,11 +93,10 @@ if (process.env.NODE_ENV !== 'production') {
     }
 
     const processed = oldProcessStyleValue(key, value)
-    const isCssVariable = key.charCodeAt(1) === 45
 
     if (
       processed !== '' &&
-      !isCssVariable &&
+      !isCustomProperty(key) &&
       key.indexOf('-') !== -1 &&
       hyphenatedCache[key] === undefined
     ) {