Fix jest matcher kebab-casing CSS custom properties (#1674)

* fix: fixes jest matcher kebab casing css vars

* chore: changeset

.changeset/tender-plants-love.md

@@ -0,0 +1,5 @@
+---
+'@compiled/jest': patch
+---
+
+Fix jest matcher unintentionally kebab-casing css custom properties.

packages/jest/src/matchers.ts

@@ -21,7 +21,10 @@ const kebabCase = (str: string) =>
 const removeSpaces = (str?: string) => str && str.replace(/\s/g, '');
 
 const mapProperties = (properties: Record<string, any>) =>
-  Object.keys(properties).map((property) => `${kebabCase(property)}:${properties[property]}`);
+  Object.keys(properties).map((property) => {
+    const key = property.startsWith('--') ? property : kebabCase(property);
+    return `${key}:${properties[property]}`;
+  });
 
 const onlyRules = (rules?: StyleRules['rules']) => rules?.filter((r) => r.type === 'rule');
 

packages/react/src/__tests__/jest-matcher.test.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @compiled/react */
 // This test belongs in @compiled/jest - but can't be placed there due to a circular dependency.
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { styled } from '@compiled/react';
+import { cssMap, styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 
 describe('toHaveCompliedCss', () => {
@@ -124,6 +124,14 @@ describe('toHaveCompliedCss', () => {
     expect(el).toHaveCompiledCss('color', 'blue', { target: ':active' });
   });
 
+  it('should match camelCase css vars', () => {
+    const styles = cssMap({ root: { '--myCamelVar': 'red' } });
+
+    const { getByText } = render(<div css={styles.root}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('--myCamelVar', 'red');
+  });
+
   it('should match styles with media', () => {
     const { getByText } = render(
       <div