Fix nested types output from createStrictAPI() being unintentionally marked as required (#1604)

* fix: nested types being unintentionally marked as required

* fix: css map throwing invariant when no styles

Author: itsdouges

.changeset/kind-toys-roll.md

@@ -0,0 +1,5 @@
+---
+'@compiled/babel-plugin': patch
+---
+
+cssMap() no longer throws an invariant if no styles were generated.

.changeset/sour-nails-breathe.md

@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Fix nested types being forcibly required.

packages/babel-plugin/src/css-map/index.ts

@@ -98,15 +98,15 @@ export const visitCssMapPath = (
         const { sheets, classNames } = transformCssItems(css, meta);
         totalSheets.push(...sheets);
 
-        if (classNames.length !== 1) {
+        if (classNames.length > 1) {
           throw buildCodeFrameError(
             createErrorMessage(ErrorMessages.STATIC_VARIANT_OBJECT),
             property,
             meta.parentPath
           );
         }
 
-        return t.objectProperty(property.key, classNames[0]);
+        return t.objectProperty(property.key, classNames[0] || t.stringLiteral(''));
       })
     )
   );

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

@@ -5,6 +5,58 @@ import type { XCSSProp } from './__fixtures__/strict-api-recursive';
 import { css, cssMap } from './__fixtures__/strict-api-recursive';
 
 describe('createStrictAPI()', () => {
+  it('should mark all styles as optional in css()', () => {
+    const styles = css({
+      '&:hover': {},
+      '&:active': {},
+      '&::before': {},
+      '&::after': {},
+    });
+
+    const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+    expect(getByTestId('div')).toBeDefined();
+  });
+
+  it('should mark all styles as optional in cssMap()', () => {
+    const styles = cssMap({
+      nested: {
+        '&:hover': {},
+        '&:active': {},
+        '&::before': {},
+        '&::after': {},
+      },
+    });
+
+    const { getByTestId } = render(<div css={styles.nested} data-testid="div" />);
+
+    expect(getByTestId('div')).toBeDefined();
+  });
+
+  it('should mark all styles as optional in xcss prop', () => {
+    function Component({
+      xcss,
+    }: {
+      xcss: ReturnType<
+        typeof XCSSProp<
+          'backgroundColor' | 'color',
+          '&:hover' | '&:active' | '&::before' | '&::after'
+        >
+      >;
+    }) {
+      return <div data-testid="div" className={xcss} />;
+    }
+
+    const { getByTestId } = render(
+      <Component
+        xcss={{ '&:hover': {}, '&:active': {}, '&::before': {}, '&::after': {} }}
+        data-testid="div"
+      />
+    );
+
+    expect(getByTestId('div')).toBeDefined();
+  });
+
   describe('type violations', () => {
     it('should violate types for css()', () => {
       const styles = css({

packages/react/src/create-strict-api/index.ts

@@ -6,11 +6,11 @@ type PseudosDeclarations = {
   [Q in CSSPseudos]?: StrictCSSProperties;
 };
 
-type EnforceSchema<TObject> = {
-  [P in keyof TObject]?: P extends keyof CompiledSchema
-    ? TObject[P] extends Record<string, unknown>
-      ? EnforceSchema<TObject[P]>
-      : TObject[P]
+type EnforceSchema<TSchema> = {
+  [P in keyof TSchema]?: P extends keyof CompiledSchema
+    ? TSchema[P] extends Record<string, any>
+      ? EnforceSchema<TSchema[P]>
+      : TSchema[P]
     : never;
 };