@compiled/react 0.16.5 → 0.16.7

package/dist/browser/create-strict-api/index.d.ts

@@ -6,9 +6,6 @@ type PseudosDeclarations = {
 type EnforceSchema<TObject> = {
     [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
 };
-type PickObjects<TObject> = {
-    [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
-};
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
 interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -44,7 +41,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema>): {
+    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema> & TStylesMap): {
         readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
     };
     /**
@@ -128,7 +125,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
     XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
         requiredProperties: TAllowedProperties;
         requiredPseudos: TAllowedPseudos;
-    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
+    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
 }
 type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
 /**

package/dist/browser/create-strict-api/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AA+J/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AAuJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/browser/index.d.ts

@@ -1,13 +1,12 @@
 import { createElement } from 'react';
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
-import type { CssFunction, CSSProps, CssType } from './types';
-export type { CSSProps, CssFunction, CssType };
-export { keyframes } from './keyframes';
-export { styled } from './styled';
 export { ClassNames } from './class-names';
+export { createStrictAPI } from './create-strict-api';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
-export { createStrictAPI } from './create-strict-api';
+export { keyframes } from './keyframes';
+export { styled } from './styled';
+export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
 export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 export declare const jsx: typeof createElement;
 export declare namespace jsx {

package/dist/browser/index.js

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-export { keyframes } from './keyframes';
-export { styled } from './styled';
 export { ClassNames } from './class-names';
+export { createStrictAPI } from './create-strict-api';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
-export { createStrictAPI } from './create-strict-api';
+export { keyframes } from './keyframes';
+export { styled } from './styled';
 export { cx } from './xcss-prop';
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.

package/dist/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}

package/dist/browser/xcss-prop/index.d.ts

@@ -1,15 +1,15 @@
 import type * as CSS from 'csstype';
-import type { CSSPseudos, CSSProperties } from '../types';
+import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
 type MarkAsRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
-    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
+type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
+    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q]) : never;
 };
 type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-}, TCompiledTypedPseudo> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
+}, TSchema> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -39,7 +39,7 @@ export type CompiledStyles<TObject> = {
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
  * your component.
  */
-export type XCSSAllProperties = keyof CSSProperties;
+export type XCSSAllProperties = keyof StrictCSSProperties;
 /**
  * Please think twice before using this type, you're better off declaring explicitly
  * what your API should be, for example not allowing any pseudos at all using the
@@ -109,11 +109,11 @@ export type XCSSAllPseudos = CSSPseudos;
 export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
-export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
+}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
 /**
  * ## CX
  *

package/dist/browser/xcss-prop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAwKhC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,EAAE,CAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAoKhC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,EAAE,CAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC"}

package/dist/cjs/create-strict-api/index.d.ts

@@ -6,9 +6,6 @@ type PseudosDeclarations = {
 type EnforceSchema<TObject> = {
     [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
 };
-type PickObjects<TObject> = {
-    [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
-};
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
 interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -44,7 +41,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema>): {
+    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema> & TStylesMap): {
         readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
     };
     /**
@@ -128,7 +125,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
     XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
         requiredProperties: TAllowedProperties;
         requiredPseudos: TAllowedPseudos;
-    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
+    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
 }
 type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
 /**

package/dist/cjs/create-strict-api/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":";;;AACA,0CAAwD;AACxD,4CAA+E;AA+J/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,SAAgB,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,EAAE,EAAF,cAAE;QACF,QAAQ;YACN,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC;AAbD,0CAaC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":";;;AACA,0CAAwD;AACxD,4CAA+E;AAuJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,SAAgB,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,EAAE,EAAF,cAAE;QACF,QAAQ;YACN,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC;AAbD,0CAaC"}

package/dist/cjs/index.d.ts

@@ -1,13 +1,12 @@
 import { createElement } from 'react';
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
-import type { CssFunction, CSSProps, CssType } from './types';
-export type { CSSProps, CssFunction, CssType };
-export { keyframes } from './keyframes';
-export { styled } from './styled';
 export { ClassNames } from './class-names';
+export { createStrictAPI } from './create-strict-api';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
-export { createStrictAPI } from './create-strict-api';
+export { keyframes } from './keyframes';
+export { styled } from './styled';
+export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
 export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 export declare const jsx: typeof createElement;
 export declare namespace jsx {

package/dist/cjs/index.js

@@ -3,20 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsx = exports.cx = exports.createStrictAPI = exports.cssMap = exports.css = exports.ClassNames = exports.styled = exports.keyframes = void 0;
+exports.jsx = exports.cx = exports.styled = exports.keyframes = exports.cssMap = exports.css = exports.createStrictAPI = exports.ClassNames = void 0;
 const react_1 = require("react");
-var keyframes_1 = require("./keyframes");
-Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
-var styled_1 = require("./styled");
-Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.styled; } });
 var class_names_1 = require("./class-names");
 Object.defineProperty(exports, "ClassNames", { enumerable: true, get: function () { return class_names_1.ClassNames; } });
+var create_strict_api_1 = require("./create-strict-api");
+Object.defineProperty(exports, "createStrictAPI", { enumerable: true, get: function () { return create_strict_api_1.createStrictAPI; } });
 var css_1 = require("./css");
 Object.defineProperty(exports, "css", { enumerable: true, get: function () { return __importDefault(css_1).default; } });
 var css_map_1 = require("./css-map");
 Object.defineProperty(exports, "cssMap", { enumerable: true, get: function () { return __importDefault(css_map_1).default; } });
-var create_strict_api_1 = require("./create-strict-api");
-Object.defineProperty(exports, "createStrictAPI", { enumerable: true, get: function () { return create_strict_api_1.createStrictAPI; } });
+var keyframes_1 = require("./keyframes");
+Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
+var styled_1 = require("./styled");
+Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.styled; } });
 var xcss_prop_1 = require("./xcss-prop");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return xcss_prop_1.cx; } });
 // Pass through the (classic) jsx runtime.

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AAOtC,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yCAA6F;AAAxB,+FAAA,EAAE,OAAA;AAEvE,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AAItC,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AASf,yCAA6F;AAAxB,+FAAA,EAAE,OAAA;AAEvE,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}

package/dist/cjs/xcss-prop/index.d.ts

@@ -1,15 +1,15 @@
 import type * as CSS from 'csstype';
-import type { CSSPseudos, CSSProperties } from '../types';
+import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
 type MarkAsRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
-    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
+type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
+    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q]) : never;
 };
 type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-}, TCompiledTypedPseudo> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
+}, TSchema> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -39,7 +39,7 @@ export type CompiledStyles<TObject> = {
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
  * your component.
  */
-export type XCSSAllProperties = keyof CSSProperties;
+export type XCSSAllProperties = keyof StrictCSSProperties;
 /**
  * Please think twice before using this type, you're better off declaring explicitly
  * what your API should be, for example not allowing any pseudos at all using the
@@ -109,11 +109,11 @@ export type XCSSAllPseudos = CSSPseudos;
 export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
-export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
+}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
 /**
  * ## CX
  *

package/dist/cjs/xcss-prop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":";;;AAEA,wCAAgC;AAwKhC;;;;;;;;;;;;;;;GAeG;AACI,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,IAAA,YAAE,EAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC;AAVW,QAAA,EAAE,MAUb"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":";;;AAEA,wCAAgC;AAoKhC;;;;;;;;;;;;;;;GAeG;AACI,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,IAAA,YAAE,EAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC;AAVW,QAAA,EAAE,MAUb"}

package/dist/esm/create-strict-api/index.d.ts

@@ -6,9 +6,6 @@ type PseudosDeclarations = {
 type EnforceSchema<TObject> = {
     [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
 };
-type PickObjects<TObject> = {
-    [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
-};
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
 interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -44,7 +41,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema>): {
+    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema> & TStylesMap): {
         readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
     };
     /**
@@ -128,7 +125,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
     XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
         requiredProperties: TAllowedProperties;
         requiredPseudos: TAllowedPseudos;
-    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
+    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
 }
 type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
 /**

package/dist/esm/create-strict-api/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AA+J/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AAuJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/esm/index.d.ts

@@ -1,13 +1,12 @@
 import { createElement } from 'react';
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
-import type { CssFunction, CSSProps, CssType } from './types';
-export type { CSSProps, CssFunction, CssType };
-export { keyframes } from './keyframes';
-export { styled } from './styled';
 export { ClassNames } from './class-names';
+export { createStrictAPI } from './create-strict-api';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
-export { createStrictAPI } from './create-strict-api';
+export { keyframes } from './keyframes';
+export { styled } from './styled';
+export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
 export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 export declare const jsx: typeof createElement;
 export declare namespace jsx {

package/dist/esm/index.js

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-export { keyframes } from './keyframes';
-export { styled } from './styled';
 export { ClassNames } from './class-names';
+export { createStrictAPI } from './create-strict-api';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
-export { createStrictAPI } from './create-strict-api';
+export { keyframes } from './keyframes';
+export { styled } from './styled';
 export { cx } from './xcss-prop';
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}

package/dist/esm/xcss-prop/index.d.ts

@@ -1,15 +1,15 @@
 import type * as CSS from 'csstype';
-import type { CSSPseudos, CSSProperties } from '../types';
+import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
 type MarkAsRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
-    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
+type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
+    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q]) : never;
 };
 type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-}, TCompiledTypedPseudo> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
+}, TSchema> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -39,7 +39,7 @@ export type CompiledStyles<TObject> = {
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
  * your component.
  */
-export type XCSSAllProperties = keyof CSSProperties;
+export type XCSSAllProperties = keyof StrictCSSProperties;
 /**
  * Please think twice before using this type, you're better off declaring explicitly
  * what your API should be, for example not allowing any pseudos at all using the
@@ -109,11 +109,11 @@ export type XCSSAllPseudos = CSSPseudos;
 export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
-export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
+}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
 /**
  * ## CX
  *

package/dist/esm/xcss-prop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAwKhC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,EAAE,CAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAoKhC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,EAAE,CAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.16.5",
+  "version": "0.16.7",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/create-strict-api/__tests__/__fixtures__/strict-api-recursive.ts

@@ -0,0 +1,34 @@
+import { createStrictAPI } from '../../index';
+
+type Color = 'var(--ds-text)';
+type ColorHovered = 'var(--ds-text-hovered)';
+type ColorPressed = 'var(--ds-text-pressed)';
+type Background = 'var(--ds-bold)' | 'var(--ds-success)';
+type BackgroundHovered = 'var(--ds-bold-hovered)' | 'var(--ds-success-hovered)';
+type BackgroundPressed = 'var(--ds-bold-pressed)' | 'var(--ds-success-pressed)';
+
+interface Properties {
+  color: Color;
+  backgroundColor: Background;
+}
+
+interface HoveredProperties extends Omit<Properties, 'backgroundColor' | 'color'> {
+  color: ColorHovered;
+  backgroundColor: BackgroundHovered;
+}
+
+interface PressedProperties extends Omit<Properties, 'backgroundColor' | 'color'> {
+  color: ColorPressed;
+  backgroundColor: BackgroundPressed;
+}
+
+interface StrictAPI extends Properties {
+  '&:hover': HoveredProperties;
+  '&:active': PressedProperties;
+  '&::before': Properties;
+  '&::after': Properties;
+}
+
+const { css, XCSSProp, cssMap, cx } = createStrictAPI<StrictAPI>();
+
+export { css, XCSSProp, cssMap, cx };

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

@@ -0,0 +1,235 @@
+/** @jsxImportSource @compiled/react */
+import { render } from '@testing-library/react';
+
+import type { XCSSProp } from './__fixtures__/strict-api-recursive';
+import { css, cssMap } from './__fixtures__/strict-api-recursive';
+
+describe('createStrictAPI()', () => {
+  describe('type violations', () => {
+    it('should violate types for css()', () => {
+      const styles = css({
+        // @ts-expect-error — Type '""' is not assignable to type ...
+        color: '',
+        // @ts-expect-error — Type '""' is not assignable to type ...
+        backgroundColor: '',
+        '&:hover': {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: '',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+        },
+        '&:active': {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: '',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+        },
+        '&::before': {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: '',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+        },
+        '&::after': {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: '',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toBeDefined();
+    });
+
+    it('should violate types for cssMap()', () => {
+      const styles = cssMap({
+        primary: {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: 's',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+          '&:hover': {
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+          },
+          '&:active': {
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+          },
+          '&::before': {
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+          },
+          '&::after': {
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+          },
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+
+      expect(getByTestId('div')).toBeDefined();
+    });
+
+    it('should violate types for xcss prop', () => {
+      function Component(_: {
+        xcss: ReturnType<
+          typeof XCSSProp<
+            'backgroundColor' | 'color',
+            '&:hover' | '&:active' | '&::before' | '&::after'
+          >
+        >;
+      }) {
+        return <div data-testid="div" />;
+      }
+
+      const { getByTestId } = render(
+        <Component
+          xcss={{
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+            '&:hover': {
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              color: '',
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              backgroundColor: '',
+            },
+            '&:active': {
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              color: '',
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              backgroundColor: '',
+            },
+            '&::before': {
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              color: '',
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              backgroundColor: '',
+            },
+            '&::after': {
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              color: '',
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              backgroundColor: '',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('div')).toBeDefined();
+    });
+  });
+
+  describe('type success', () => {
+    it('should pass type check for css()', () => {
+      const styles = css({
+        color: 'var(--ds-text)',
+        backgroundColor: 'var(--ds-bold)',
+        '&:hover': {
+          color: 'var(--ds-text-hovered)',
+          backgroundColor: 'var(--ds-bold-hovered)',
+        },
+        '&:active': {
+          color: 'var(--ds-text-pressed)',
+          backgroundColor: 'var(--ds-bold-pressed)',
+        },
+        '&::before': {
+          color: 'var(--ds-text)',
+          backgroundColor: 'var(--ds-bold)',
+        },
+        '&::after': {
+          color: 'var(--ds-text)',
+          backgroundColor: 'var(--ds-bold)',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+
+    it('should pass type check for cssMap()', () => {
+      const styles = cssMap({
+        primary: {
+          color: 'var(--ds-text)',
+          backgroundColor: 'var(--ds-bold)',
+          '&:hover': {
+            color: 'var(--ds-text-hovered)',
+            backgroundColor: 'var(--ds-bold-hovered)',
+          },
+          '&:active': {
+            color: 'var(--ds-text-pressed)',
+            backgroundColor: 'var(--ds-bold-pressed)',
+          },
+          '&::before': {
+            color: 'var(--ds-text)',
+            backgroundColor: 'var(--ds-bold)',
+          },
+          '&::after': {
+            color: 'var(--ds-text)',
+            backgroundColor: 'var(--ds-bold)',
+          },
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+
+    it('should pass type check for 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={{
+            color: 'var(--ds-text)',
+            backgroundColor: 'var(--ds-bold)',
+            '&:hover': {
+              color: 'var(--ds-text-hovered)',
+              backgroundColor: 'var(--ds-bold-hovered)',
+            },
+            '&:active': {
+              color: 'var(--ds-text-pressed)',
+              backgroundColor: 'var(--ds-bold-pressed)',
+            },
+            '&::before': {
+              color: 'var(--ds-text)',
+              backgroundColor: 'var(--ds-bold)',
+            },
+            '&::after': {
+              color: 'var(--ds-text)',
+              backgroundColor: 'var(--ds-bold)',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+  });
+});

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

@@ -271,6 +271,146 @@ describe('createStrictAPI()', () => {
   });
 
   describe('XCSSProp', () => {
+    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)');
+    });
+
+    it('should disallow invalid values from cssMap', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const styles = cssMap({ bg: { accentColor: 'red' } });
+      const { getByTestId } = render(
+        <Button
+          // @ts-expect-error — Type 'CompiledStyles<{ accentColor: "red"; }>' is not assignable to type ...
+          xcss={styles.bg}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('accent-color', 'red');
+    });
+
+    it('should allow constrained background and pseudo', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', '&:hover'>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const styles = cssMap({
+        primary: {
+          background: 'var(--ds-surface)',
+          '&:hover': { background: 'var(--ds-surface-hover)' },
+        },
+      });
+
+      const { getByTestId } = render(<Button xcss={styles.primary} />);
+
+      expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
+    });
+
+    it('should type error on a partially invalid declaration', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', '&:hover'>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const styles = cssMap({
+        bad: {
+          // @ts-expect-error — Property 'bad' is incompatible with index signature.
+          foo: 'bar',
+          color: 'var(--ds-text)',
+        },
+      });
+
+      const { getByTestId } = render(
+        <Button
+          // @ts-expect-error — Type 'CompiledStyles<{ foo: string; color: "var(--ds-text)"; }>' is not assignable to type
+          xcss={styles.bad}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+
+    it('should error with values not in the strict `CompiledAPI`', () => {
+      function Button({
+        xcss,
+      }: {
+        xcss: ReturnType<typeof XCSSProp<'background' | 'color', '&:hover'>>;
+      }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const styles = 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)' },
+        },
+      });
+
+      const { getByTestId } = render(
+        <Button
+          // @ts-expect-error -- Errors because `color` conflicts with the `XCSSProp` schema–`color` should be a css variable.
+          xcss={styles.primary}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
+    });
+
+    it('should error with properties not in the `XCSSProp`', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'color', '&:focus'>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const styles = cssMap({
+        primary: {
+          background: 'var(--ds-surface)',
+          '&:hover': { background: 'var(--ds-surface-hover)' },
+        },
+      });
+
+      const { getByTestId } = render(
+        <Button
+          // @ts-expect-error -- Errors because `background` + `&:hover` are not in the `XCSSProp` schema.
+          xcss={styles.primary}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
+    });
+
+    it('should error with invalid values', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', '&:hover'>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const styles = cssMap({
+        primary: {
+          // @ts-expect-error -- Fails because `foo` is not assignable to our CSSProperties whatsoever.
+          foo: 'bar',
+          background: 'var(--ds-surface)',
+          '&:hover': {
+            // This does not fail, but would if the above was removed; this should be tested in raw `cssMap` fully.
+            foo: 'bar',
+            background: 'var(--ds-surface-hover)',
+          },
+        },
+      });
+
+      const { getByTestId } = render(<Button xcss={styles.primary} />);
+
+      expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
+    });
+
     it('should allow valid values', () => {
       function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
         return <button data-testid="button" className={xcss} />;

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

@@ -14,13 +14,10 @@ type EnforceSchema<TObject> = {
     : never;
 };
 
-type PickObjects<TObject> = {
-  [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
-};
-
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties &
   PseudosDeclarations &
   EnforceSchema<TSchema>;
+
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
 
 interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -57,9 +54,10 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
    * ```
    */
   cssMap<TStylesMap extends CSSMapStyles<TSchema>>(
-    // NOTE: This should match the generic `TStylesMap extends …` as we want this arg to strictly satisfy this type, not just extend it.
-    // The "extends" functionality is to infer and build the return type, this is to enforce the input type.
-    styles: 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
   ): {
     readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
   };
@@ -148,13 +146,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
       requiredProperties: TAllowedProperties;
       requiredPseudos: TAllowedPseudos;
     } = never
-  >(): Internal$XCSSProp<
-    TAllowedProperties,
-    TAllowedPseudos,
-    TSchema,
-    PickObjects<TSchema>,
-    TRequiredProperties
-  >;
+  >(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
 }
 
 type CompiledSchema = StrictCSSProperties & PseudosDeclarations;

package/src/index.ts

@@ -1,16 +1,21 @@
 import { createElement } from 'react';
 
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
-import type { CssFunction, CSSProps, CssType } from './types';
 
-export type { CSSProps, CssFunction, CssType };
-
-export { keyframes } from './keyframes';
-export { styled } from './styled';
 export { ClassNames } from './class-names';
+export { createStrictAPI } from './create-strict-api';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
-export { createStrictAPI } from './create-strict-api';
+export { keyframes } from './keyframes';
+export { styled } from './styled';
+export type {
+  CSSProperties,
+  CSSProps,
+  CSSPseudos,
+  CssFunction,
+  CssType,
+  StrictCSSProperties,
+} from './types';
 export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 
 // Pass through the (classic) jsx runtime.

package/src/xcss-prop/index.ts

@@ -1,15 +1,15 @@
 import type * as CSS from 'csstype';
 
 import { ac } from '../runtime';
-import type { CSSPseudos, CSSProperties } from '../types';
+import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
 
 type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
-type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
+type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
   [Q in keyof CSSProperties]: Q extends TStyleDecl
     ?
         | CompiledPropertyDeclarationReference
-        | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q])
+        | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q])
     : never;
 };
 
@@ -17,14 +17,11 @@ type XCSSPseudos<
   TAllowedProperties extends keyof CSSProperties,
   TAllowedPseudos extends CSSPseudos,
   TRequiredProperties extends { requiredProperties: TAllowedProperties },
-  TCompiledTypedPseudo
+  TSchema
 > = {
   [Q in CSSPseudos]?: Q extends TAllowedPseudos
     ? MarkAsRequired<
-        XCSSItem<
-          TAllowedProperties,
-          Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object
-        >,
+        XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>,
         TRequiredProperties['requiredProperties']
       >
     : never;
@@ -67,7 +64,7 @@ export type CompiledStyles<TObject> = {
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
  * your component.
  */
-export type XCSSAllProperties = keyof CSSProperties;
+export type XCSSAllProperties = keyof StrictCSSProperties;
 
 /**
  * Please think twice before using this type, you're better off declaring explicitly
@@ -143,24 +140,23 @@ export type XCSSProp<
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
   } = never
-> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
+> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
 
 export type Internal$XCSSProp<
   TAllowedProperties extends keyof CSSProperties,
   TAllowedPseudos extends CSSPseudos,
-  TCompiledTypedProperty,
-  TCompiledTypedPseudo,
+  TSchema,
   TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
   }
 > =
   | (MarkAsRequired<
-      XCSSItem<TAllowedProperties, TCompiledTypedProperty>,
+      XCSSItem<TAllowedProperties, TSchema>,
       TRequiredProperties['requiredProperties']
     > &
       MarkAsRequired<
-        XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>,
+        XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>,
         TRequiredProperties['requiredPseudos']
       > &
       BlockedRules)