Fix inference of complex properties in cssMap (#1640)

* Fix type inferrence on `background` and other complex types.

Fixes #1639

* chore: changeset

* chore: update tests now that these aren't errors!

Author: kylorhall-atlassian

.changeset/thick-shirts-tease.md

@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Better cssMap types: fix inference of complex types and adds descriptions to the type.

packages/react/src/create-strict-api/__tests__/index.test.tsx

@@ -332,20 +332,6 @@ describe('createStrictAPI()', () => {
             // @ts-expect-error — This conflicts with the custom API, should be a different bg color
             xcss={cx(stylesInvalidRoot.primary, stylesValid.primary)}
           />
-          <Button
-            testId="button-valid-root"
-            // @ts-expect-error — For some reason the "background" property is being expanded to "string" instead of
-            // staying narrowed as "var(--ds-surface-hover)" meaning it breaks when used with the strict
-            // schema loaded XCSS prop. This is a bug and unexpected.
-            xcss={stylesValidRoot.primary}
-          />
-          <Button
-            testId="button-valid-root-cx"
-            // @ts-expect-error — For some reason the "background" property is being expanded to "string" instead of
-            // staying narrowed as "var(--ds-surface-hover)" meaning it breaks when used with the strict
-            // schema loaded XCSS prop. This is a bug and unexpected.
-            xcss={cx(stylesValidRoot.primary, stylesValid.primary)}
-          />
           <Button
             testId="button-invalid-strict"
             // @ts-expect-error — TODO: This should conflict, but when `cssMap` conflicts, it gets a different type (this has `ApplySchema`, not the raw object), so this doesn't error?  Weird…
@@ -356,15 +342,20 @@ describe('createStrictAPI()', () => {
             // @ts-expect-error — TODO: This should conflict, but when `cssMap` conflicts, it gets a different type (this has `ApplySchema`, not the raw object), so this doesn't error?  Weird…
             xcss={cx(stylesInvalid.primary, stylesValid.primary)}
           />
-          <Button testId="button-valid" xcss={stylesValid.primary} />
-          <Button testId="button-valid-cx" xcss={cx(stylesValid.primary, stylesValid.primary)} />
           <Button
             testId="button-invalid-direct"
             xcss={{
               // @ts-expect-error — This is not in the `createStrictAPI` schema—this should be a css variable.
               color: 'red',
             }}
           />
+          <Button testId="button-valid" xcss={stylesValid.primary} />
+          <Button testId="button-valid-cx" xcss={cx(stylesValid.primary, stylesValid.primary)} />
+          <Button testId="button-valid-root" xcss={stylesValidRoot.primary} />
+          <Button
+            testId="button-valid-root-cx"
+            xcss={cx(stylesValidRoot.primary, stylesValid.primary)}
+          />
         </>
       );
 

packages/react/src/types.ts

@@ -104,7 +104,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<string | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
 
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes