@compiled/react 0.16.10 → 0.17.1

package/src/create-strict-api/__tests__/generics.test.tsx

@@ -99,7 +99,7 @@ describe('createStrictAPI()', () => {
       const styles = cssMap({
         primary: {
           // @ts-expect-error — Type '""' is not assignable to type ...
-          color: 's',
+          color: '',
           // @ts-expect-error — Type '""' is not assignable to type ...
           backgroundColor: '',
           '&:hover': {
@@ -155,15 +155,15 @@ describe('createStrictAPI()', () => {
             backgroundColor: '',
             '&:hover': {
               // @ts-expect-error — Type '""' is not assignable to type ...
-              color: '',
+              color: 'var(--ds-text)',
               // @ts-expect-error — Type '""' is not assignable to type ...
-              backgroundColor: '',
+              backgroundColor: 'var(--ds-success)',
             },
             '&:active': {
               // @ts-expect-error — Type '""' is not assignable to type ...
-              color: '',
+              color: 'var(--ds-text)',
               // @ts-expect-error — Type '""' is not assignable to type ...
-              backgroundColor: '',
+              backgroundColor: 'var(--ds-success)',
             },
             '&::before': {
               // @ts-expect-error — Type '""' is not assignable to type ...
@@ -188,21 +188,31 @@ describe('createStrictAPI()', () => {
   describe('type success', () => {
     it('should pass type check for css()', () => {
       const styles = css({
+        // @ts-expect-error — should be a value from the schema
+        padding: '10px',
         color: 'var(--ds-text)',
         backgroundColor: 'var(--ds-bold)',
         '&:hover': {
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
           color: 'var(--ds-text-hovered)',
           backgroundColor: 'var(--ds-bold-hovered)',
         },
         '&:active': {
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
           color: 'var(--ds-text-pressed)',
           backgroundColor: 'var(--ds-bold-pressed)',
         },
         '&::before': {
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
           color: 'var(--ds-text)',
           backgroundColor: 'var(--ds-bold)',
         },
         '&::after': {
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
           color: 'var(--ds-text)',
           backgroundColor: 'var(--ds-bold)',
         },
@@ -218,19 +228,30 @@ describe('createStrictAPI()', () => {
         primary: {
           color: 'var(--ds-text)',
           backgroundColor: 'var(--ds-bold)',
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
           '&:hover': {
+            accentColor: 'red',
+            // @ts-expect-error — should be a value from the schema
+            padding: '10px',
             color: 'var(--ds-text-hovered)',
             backgroundColor: 'var(--ds-bold-hovered)',
           },
           '&:active': {
+            // @ts-expect-error — should be a value from the schema
+            padding: '10px',
             color: 'var(--ds-text-pressed)',
             backgroundColor: 'var(--ds-bold-pressed)',
           },
           '&::before': {
+            // @ts-expect-error — should be a value from the schema
+            padding: '10px',
             color: 'var(--ds-text)',
             backgroundColor: 'var(--ds-bold)',
           },
           '&::after': {
+            // @ts-expect-error — should be a value from the schema
+            padding: '10px',
             color: 'var(--ds-text)',
             backgroundColor: 'var(--ds-bold)',
           },

package/src/create-strict-api/__tests__/index.test.tsx

@@ -1,16 +1,25 @@
 /** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cssMap as cssMapLoose } from '@compiled/react';
 import { render } from '@testing-library/react';
 
-import { css, cssMap, XCSSProp } from './__fixtures__/strict-api';
+import { css, cssMap, XCSSProp, cx } from './__fixtures__/strict-api';
 
 describe('createStrictAPI()', () => {
   describe('css()', () => {
     it('should type error when circumventing the excess property check', () => {
-      const styles = css({
+      const stylesOne = css({
         color: 'var(--ds-text)',
         accentColor: 'red',
         // @ts-expect-error — Type 'string' is not assignable to type 'undefined'.ts(2322)
         bkgrnd: 'red',
+        '&:hover': {
+          color: 'var(--ds-text-hover)',
+        },
+      });
+      const stylesTwo = css({
+        color: 'var(--ds-text)',
+        accentColor: 'red',
         '&:hover': {
           color: 'var(--ds-text-hover)',
           // @ts-expect-error — Type 'string' is not assignable to type 'undefined'.ts(2322)
@@ -18,7 +27,7 @@ describe('createStrictAPI()', () => {
         },
       });
 
-      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+      const { getByTestId } = render(<div css={[stylesOne, stylesTwo]} data-testid="div" />);
 
       expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
     });
@@ -79,7 +88,7 @@ describe('createStrictAPI()', () => {
         color: 'var(--ds-text)',
         all: 'inherit',
         '&:hover': { color: 'var(--ds-text-hover)' },
-        '&:invalid': { color: 'orange' },
+        '&:invalid': { color: 'var(--ds-text)' },
       });
 
       const { getByTestId } = render(<div css={styles} data-testid="div" />);
@@ -146,7 +155,7 @@ describe('createStrictAPI()', () => {
           accentColor: 'red',
           all: 'inherit',
           '&:hover': { color: 'var(--ds-text-hover)' },
-          '&:invalid': { color: 'orange' },
+          '&:invalid': { color: 'var(--ds-text)' },
         },
       });
 
@@ -271,12 +280,94 @@ describe('createStrictAPI()', () => {
   });
 
   describe('XCSSProp', () => {
+    it('should error with values not in the strict `CompiledStrictSchema`', () => {
+      function Button({
+        xcss,
+        testId,
+      }: {
+        testId: string;
+        xcss: ReturnType<typeof XCSSProp<'background' | 'color', '&:hover'>>;
+      }) {
+        return <button data-testid={testId} className={xcss} />;
+      }
+      // NOTE: 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.
+      const stylesValidRoot = cssMapLoose({
+        primary: {
+          color: 'var(--ds-text)',
+          '&:hover': { color: 'var(--ds-text-hover)', background: 'var(--ds-surface-hover)' },
+        },
+      });
+      const stylesInvalidRoot = cssMapLoose({
+        primary: {
+          color: 'red',
+          '&:hover': { color: 'var(--ds-text-hover)', background: 'var(--ds-surface-hover)' },
+        },
+      });
+      const stylesInvalid = cssMap({
+        primary: {
+          // @ts-expect-error -- This is not valid in the CompiledStrictSchema
+          color: 'red',
+          '&:hover': { color: 'var(--ds-text-hover)', background: 'var(--ds-surface-hover)' },
+        },
+      });
+
+      const stylesValid = cssMap({
+        primary: {
+          color: 'var(--ds-text)',
+          '&:hover': { color: 'var(--ds-text-hover)', background: 'var(--ds-surface-hover)' },
+        },
+      });
+
+      const { getByTestId } = render(
+        <>
+          <Button
+            testId="button-invalid-root"
+            // @ts-expect-error — This conflicts with the custom API, should be a different bg color
+            xcss={stylesInvalidRoot.primary}
+          />
+          <Button
+            testId="button-invalid-root-cx"
+            // @ts-expect-error — This conflicts with the custom API, should be a different bg color
+            xcss={cx(stylesInvalidRoot.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…
+            xcss={stylesInvalid.primary}
+          />
+          <Button
+            testId="button-invalid-strict-cx"
+            // @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-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)}
+          />
+        </>
+      );
+
+      expect(getByTestId('button-invalid-root')).toHaveCompiledCss('color', 'red');
+    });
+
     it('should allow valid values from cssMap', () => {
       function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
         return <button data-testid="button" className={xcss} />;
       }
-
       const styles = cssMap({ bg: { background: 'var(--ds-surface)' } });
+
       const { getByTestId } = render(<Button xcss={styles.bg} />);
 
       expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
@@ -302,7 +393,6 @@ describe('createStrictAPI()', () => {
       function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', '&:hover'>> }) {
         return <button data-testid="button" className={xcss} />;
       }
-
       const styles = cssMap({
         primary: {
           background: 'var(--ds-surface)',
@@ -341,15 +431,24 @@ describe('createStrictAPI()', () => {
     it('should error with values not in the strict `CompiledAPI`', () => {
       function Button({
         xcss,
+        testId,
       }: {
+        testId: string;
         xcss: ReturnType<typeof XCSSProp<'background' | 'color', '&:hover'>>;
       }) {
-        return <button data-testid="button" className={xcss} />;
+        return <button data-testid={testId} className={xcss} />;
       }
 
-      const styles = cssMap({
+      const stylesOne = cssMapLoose({
         primary: {
-          // @ts-expect-error -- This is not in the `createStrictAPI` schema—this should be a css variable.
+          color: 'red',
+          background: 'var(--ds-surface)',
+          '&:hover': { background: 'var(--ds-surface-hover)' },
+        },
+      });
+      const stylesTwo = cssMap({
+        primary: {
+          // @ts-expect-error — This is not in the `createStrictAPI` schema—this should be a css variable.
           color: 'red',
           background: 'var(--ds-surface)',
           '&:hover': { background: 'var(--ds-surface-hover)' },
@@ -357,13 +456,28 @@ describe('createStrictAPI()', () => {
       });
 
       const { getByTestId } = render(
-        <Button
-          // @ts-expect-error -- Errors because `color` conflicts with the `XCSSProp` schema–`color` should be a css variable.
-          xcss={styles.primary}
-        />
+        <>
+          <Button
+            testId="button-1"
+            // @ts-expect-error — This is not in the `createStrictAPI` schema—this should be a css variable.
+            xcss={stylesOne.primary}
+          />
+          <Button
+            testId="button-3"
+            // @ts-expect-error — This is not in the `createStrictAPI` schema—this should be a css variable.
+            xcss={stylesTwo.stylesTwo}
+          />
+          <Button
+            testId="button-2"
+            xcss={{
+              // @ts-expect-error — This is not in the `createStrictAPI` schema—this should be a css variable.
+              color: 'red',
+            }}
+          />
+        </>
       );
 
-      expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
+      expect(getByTestId('button-1')).toHaveCompiledCss('background', 'var(--ds-surface)');
     });
 
     it('should error with properties not in the `XCSSProp`', () => {
@@ -380,7 +494,7 @@ describe('createStrictAPI()', () => {
 
       const { getByTestId } = render(
         <Button
-          // @ts-expect-error -- Errors because `background` + `&:hover` are not in the `XCSSProp` schema.
+          // @ts-expect-error — Errors because `background` + `&:hover` are not in the `XCSSProp` schema.
           xcss={styles.primary}
         />
       );
@@ -392,21 +506,24 @@ describe('createStrictAPI()', () => {
       function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', '&:hover'>> }) {
         return <button data-testid="button" className={xcss} />;
       }
-
-      const styles = cssMap({
+      const stylesOne = cssMap({
         primary: {
-          // @ts-expect-error -- Fails because `foo` is not assignable to our CSSProperties whatsoever.
+          // @ts-expect-error — Fails because `foo` is not assignable to our CSSProperties whatsoever.
           foo: 'bar',
           background: 'var(--ds-surface)',
+        },
+      });
+      const stylesTwo = cssMap({
+        hover: {
           '&:hover': {
-            // This does not fail, but would if the above was removed; this should be tested in raw `cssMap` fully.
+            // @ts-expect-error — Fails because `foo` is not assignable to our CSSProperties whatsoever.
             foo: 'bar',
             background: 'var(--ds-surface-hover)',
           },
         },
       });
 
-      const { getByTestId } = render(<Button xcss={styles.primary} />);
+      const { getByTestId } = render(<Button xcss={cx(stylesOne.primary, stylesTwo.hover)} />);
 
       expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
     });
@@ -536,27 +653,76 @@ describe('createStrictAPI()', () => {
 
     it('should enforce required properties', () => {
       function Button({
+        testId,
         xcss,
       }: {
+        testId: string;
         xcss: ReturnType<
-          typeof XCSSProp<
-            'background',
-            never,
-            { requiredProperties: 'background'; requiredPseudos: never }
-          >
+          typeof XCSSProp<'background' | 'color', never, { requiredProperties: 'background' }>
         >;
       }) {
-        return <button data-testid="button" className={xcss} />;
+        return <button data-testid={`button-${testId}`} className={xcss} />;
+      }
+
+      const stylesValid = cssMap({
+        primary: { background: 'var(--ds-surface)' },
+      });
+      const stylesInvalid = cssMap({
+        primary: { color: 'var(--ds-text)' },
+      });
+
+      const { getByTestId } = render(
+        <>
+          <Button testId="valid" xcss={stylesValid.primary} />
+          <Button
+            testId="invalid"
+            // @ts-expect-error — This is not assignable as it's missing the required `background` property.
+            xcss={stylesInvalid.primary}
+          />
+        </>
+      );
+
+      expect(getByTestId('button-valid')).toHaveCompiledCss('background', 'var(--ds-surface)');
+      expect(getByTestId('button-invalid')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+
+    it('should enforce required psuedos', () => {
+      function Button({
+        testId,
+        xcss,
+      }: {
+        testId: string;
+        xcss: ReturnType<
+          typeof XCSSProp<'color', '&:hover' | '&:focus', { requiredProperties: never }>
+        >;
+      }) {
+        return <button data-testid={`button-${testId}`} className={xcss} />;
       }
 
+      const stylesValid = cssMap({
+        primary: { '&:hover': { color: 'var(--ds-text-hover)' } },
+      });
+      const stylesInvalid = cssMap({
+        primary: { '&:focus': { background: 'var(--ds-surface)' } },
+      });
+
       const { getByTestId } = render(
-        <Button
-          // @ts-expect-error — Type '{}' is not assignable to type 'Internal$XCSSProp<"background", never, EnforceSchema<{ background: "var(--ds-surface)" | "var(--ds-surface-sunken"; }>, object, { requiredProperties: "background"; requiredPseudos: never; }>'.ts(2322)
-          xcss={{}}
-        />
+        <>
+          <Button testId="valid" xcss={stylesValid.primary} />
+          <Button
+            testId="invalid"
+            // @ts-expect-error — This is not assignable as it's missing the required `background` property.
+            xcss={stylesInvalid.primary}
+          />
+        </>
       );
 
-      expect(getByTestId('button')).not.toHaveCompiledCss('color', 'red');
+      expect(getByTestId('button-valid')).toHaveCompiledCss('color', 'var(--ds-text-hover)', {
+        target: ':hover',
+      });
+      expect(getByTestId('button-invalid')).toHaveCompiledCss('background', 'var(--ds-surface)', {
+        target: ':focus',
+      });
     });
   });
 

package/src/create-strict-api/index.ts

@@ -1,32 +1,25 @@
-import type { StrictCSSProperties, CSSPseudos } from '../types';
+import type { StrictCSSProperties, CSSPseudos, CSSProps } from '../types';
 import { createStrictSetupError } from '../utils/error';
 import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
 
-type PseudosDeclarations = {
-  [Q in CSSPseudos]?: StrictCSSProperties;
-};
+import type { AllowedStyles, ApplySchema, ApplySchemaMap, CompiledSchemaShape } from './types';
 
-type EnforceSchema<TSchema> = {
-  [P in keyof TSchema]?: P extends keyof CompiledSchema
-    ? TSchema[P] extends Record<string, any>
-      ? EnforceSchema<TSchema[P]>
-      : TSchema[P]
-    : never;
-};
-
-type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties &
-  PseudosDeclarations &
-  EnforceSchema<TSchema>;
-
-type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
+export interface StrictOptions {
+  media: string;
+}
 
-interface CompiledAPI<TSchema extends CompiledSchema> {
+export interface CompiledAPI<
+  TSchema extends CompiledSchemaShape,
+  TAllowedMediaQueries extends string
+> {
   /**
    * ## CSS
    *
    * Creates styles that are statically typed and useable with other Compiled APIs.
    * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
    *
+   * This API does not currently work with XCSS prop.
+   *
    * @example
    * ```
    * const redText = css({
@@ -36,7 +29,12 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
    * <div css={redText} />
    * ```
    */
-  css(styles: CSSStyles<TSchema>): StrictCSSProperties;
+  css<TStyles extends ApplySchema<TStyles, TSchema>>(
+    styles: AllowedStyles<TAllowedMediaQueries> & TStyles
+    // NOTE: This return type is deliberately not using ReadOnly<CompiledStyles<TStyles>>
+    // So it type errors when used with XCSS prop. When we update the compiler to work with
+    // it we can update the return type so it stops being a type violation.
+  ): CSSProps<unknown>;
   /**
    * ## CSS Map
    *
@@ -53,11 +51,11 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
    * <div css={styles.solid} />
    * ```
    */
-  cssMap<TStylesMap extends CSSMapStyles<TSchema>>(
-    // We intersection type the generic both with the concrete type and the generic to ensure the output has the generic applied.
-    // Without both it would either have the input arg not have excess property check kick in allowing unexpected values or
-    // have all values set as the output making usage with XCSSProp have type violations unexpectedly.
-    styles: CSSMapStyles<TSchema> & TStylesMap
+  cssMap<
+    TObject extends Record<string, AllowedStyles<TAllowedMediaQueries>>,
+    TStylesMap extends ApplySchemaMap<TObject, TSchema>
+  >(
+    styles: Record<string, AllowedStyles<TAllowedMediaQueries>> & TStylesMap
   ): {
     readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
   };
@@ -116,7 +114,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
    *    typeof XCSSProp<
    *      XCSSAllProperties,
    *      '&:hover',
-   *      { requiredProperties: 'color', requiredPseudos: never }
+   *      { requiredProperties: 'color' }
    *     >
    *   >;
    * }
@@ -144,13 +142,17 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
     TAllowedPseudos extends CSSPseudos,
     TRequiredProperties extends {
       requiredProperties: TAllowedProperties;
-      requiredPseudos: TAllowedPseudos;
     } = never
-  >(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
+  >(): Internal$XCSSProp<
+    TAllowedProperties,
+    TAllowedPseudos,
+    TAllowedMediaQueries,
+    TSchema,
+    TRequiredProperties,
+    'strict'
+  >;
 }
 
-type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
-
 /**
  * ## Create Strict API
  *
@@ -165,17 +167,19 @@ type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
  *
  * To set up:
  *
- * 1. Declare the API in a module (either local or in a package):
+ * 1. Declare the API in a module (either local or in a package), optionally declaring accepted media queries.
  *
  * @example
  * ```tsx
  * // ./foo.ts
- * const { css } = createStrictAPI<{
+ * interface Schema {
  *   color: 'var(--ds-text)',
  *   '&:hover': { color: 'var(--ds-text-hover)' }
- * }>();
+ * }
+ *
+ * const { css, cssMap, XCSSProp, cx } = createStrictAPI<Schema, { media: '(min-width: 30rem)' }>();
  *
- * export { css };
+ * export { css, cssMap, XCSSProp, cx };
  * ```
  *
  * 2. Configure Compiled to pick up this module:
@@ -199,7 +203,10 @@ type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
  * <div css={styles} />
  * ```
  */
-export function createStrictAPI<TSchema extends CompiledSchema>(): CompiledAPI<TSchema> {
+export function createStrictAPI<
+  TSchema extends CompiledSchemaShape,
+  TCreateStrictAPIOptions extends StrictOptions = never
+>(): CompiledAPI<TSchema, TCreateStrictAPIOptions['media']> {
   return {
     css() {
       throw createStrictSetupError();

package/src/create-strict-api/types.ts

@@ -0,0 +1,69 @@
+import type {
+  StrictCSSProperties,
+  CSSPseudoClasses,
+  CSSPseudoElements,
+  CSSPseudos,
+} from '../types';
+
+/**
+ * This is the shape of the generic object that `createStrictAPI()` takes.
+ * It's deliberately a subset of `AllowedStyles` and does not take at rules
+ * and pseudo elements.
+ */
+export type CompiledSchemaShape = StrictCSSProperties & {
+  [Q in CSSPseudoClasses]?: StrictCSSProperties;
+};
+
+export type PseudosDeclarations = { [Q in CSSPseudos]?: StrictCSSProperties };
+
+export type MediaQueries<TMediaQuery extends string> = {
+  [Q in `@media ${TMediaQuery}`]?: StrictCSSProperties & PseudosDeclarations;
+};
+
+export type AllowedStyles<TMediaQuery extends string> = StrictCSSProperties &
+  PseudosDeclarations &
+  MediaQueries<TMediaQuery>;
+
+export type ApplySchemaValue<
+  TSchema,
+  TKey extends keyof StrictCSSProperties,
+  TPseudoKey extends CSSPseudoClasses | ''
+> = TKey extends keyof TSchema
+  ? // TKey is a valid property on the schema
+    TPseudoKey extends keyof TSchema
+    ? TKey extends keyof TSchema[TPseudoKey]
+      ? // We found a more specific value under TPseudoKey.
+        TSchema[TPseudoKey][TKey]
+      : // Did not found anything specific, use the top level TSchema value.
+        TSchema[TKey]
+    : // Did not found anything specific, use the top level TSchema value.
+      TSchema[TKey]
+  : // TKey wasn't found on the schema, fallback to the CSS property value
+    StrictCSSProperties[TKey];
+
+/**
+ * Recursively maps over object properties to resolve them to either a {@link TSchema}
+ * value if present, else fallback to its value from {@link StrictCSSProperties}. If
+ * the property isn't a known property its value will be resolved to `never`.
+ */
+export type ApplySchema<TObject, TSchema, TPseudoKey extends CSSPseudoClasses | '' = ''> = {
+  [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties
+    ? // TKey is a valid CSS property, try to resolve its value.
+      ApplySchemaValue<TSchema, TKey, TPseudoKey>
+    : TKey extends CSSPseudoClasses
+    ? // TKey is a valid pseudo class, recursively resolve its child properties
+      // while passing down the parent pseudo key to resolve any specific schema types.
+      ApplySchema<TObject[TKey], TSchema, TKey>
+    : TKey extends `@${string}` | CSSPseudoElements
+    ? // TKey is either an at rule or a pseudo element, either way we don't care about
+      // passing down the key so we recursively resolve its child properties starting at
+      // the base schema, treating it as if it's not inside an object.
+      ApplySchema<TObject[TKey], TSchema>
+    : // Fallback case, did not find a valid CSS property, at rule, or pseudo.
+      // Resolve the value to `never` which will end up being a type violation.
+      never;
+};
+
+export type ApplySchemaMap<TStylesMap, TSchema> = {
+  [P in keyof TStylesMap]: ApplySchema<TStylesMap[P], TSchema>;
+};

package/src/css/index.ts

@@ -9,6 +9,8 @@ import { createSetupError } from '../utils/error';
  * Create styles that are statically typed and useable with other Compiled APIs.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
+ * This API does not currently work with XCSS prop.
+ *
  * ### Style with objects
  *
  * @example