@compiled/react 0.16.3 → 0.16.5

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

@@ -9,7 +9,9 @@ type EnforceSchema<TObject> = {
 type PickObjects<TObject> = {
     [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
 };
-interface CompiledAPI<TSchema> {
+type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
+type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
+interface CompiledAPI<TSchema extends CompiledSchema> {
     /**
      * ## CSS
      *
@@ -25,7 +27,7 @@ interface CompiledAPI<TSchema> {
      * <div css={redText} />
      * ```
      */
-    css(styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>): StrictCSSProperties;
+    css(styles: CSSStyles<TSchema>): StrictCSSProperties;
     /**
      * ## CSS Map
      *
@@ -42,8 +44,8 @@ interface CompiledAPI<TSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStyles extends Record<string, StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>>>(styles: TStyles): {
-        readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema>): {
+        readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
     };
     /**
      * ## CX

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

@@ -1,4 +1,4 @@
-import { createSetupError } from '../utils/error';
+import { createStrictSetupError } from '../utils/error';
 import { cx } from '../xcss-prop';
 /**
  * ## Create Strict API
@@ -51,14 +51,14 @@ import { cx } from '../xcss-prop';
 export function createStrictAPI() {
     return {
         css() {
-            throw createSetupError();
+            throw createStrictSetupError();
         },
         cssMap() {
-            throw createSetupError();
+            throw createStrictSetupError();
         },
         cx,
         XCSSProp() {
-            throw createSetupError();
+            throw createStrictSetupError();
         },
     };
 }

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,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AA+J/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC;QACD,MAAM;YACJ,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,gBAAgB,EAAE,CAAC;QAC3B,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;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"}

package/dist/browser/utils/error.d.ts

@@ -1 +1,2 @@
 export declare const createSetupError: () => Error;
+export declare const createStrictSetupError: () => Error;

package/dist/browser/utils/error.js

@@ -17,4 +17,23 @@ export const createSetupError = () => {
   Good luck!
 `);
 };
+export const createStrictSetupError = () => {
+    return new Error(`
+ ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
+██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝
+
+  @compiled/react
+
+  Code was executed when it shouldn't have. To resolve make sure to:
+
+  1. Set up Compiled.
+  2. Configure importSources in your Compiled config to point to the module that exports the output of createStrictAPI().
+
+  For more information visit https://compiledcssinjs.com/docs/installation and follow the instructions.
+`);
+};
 //# sourceMappingURL=error.js.map

package/dist/browser/utils/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAU,EAAE;IAChD,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}

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

@@ -9,7 +9,9 @@ type EnforceSchema<TObject> = {
 type PickObjects<TObject> = {
     [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
 };
-interface CompiledAPI<TSchema> {
+type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
+type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
+interface CompiledAPI<TSchema extends CompiledSchema> {
     /**
      * ## CSS
      *
@@ -25,7 +27,7 @@ interface CompiledAPI<TSchema> {
      * <div css={redText} />
      * ```
      */
-    css(styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>): StrictCSSProperties;
+    css(styles: CSSStyles<TSchema>): StrictCSSProperties;
     /**
      * ## CSS Map
      *
@@ -42,8 +44,8 @@ interface CompiledAPI<TSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStyles extends Record<string, StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>>>(styles: TStyles): {
-        readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema>): {
+        readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
     };
     /**
      * ## CX

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

@@ -54,14 +54,14 @@ const xcss_prop_1 = require("../xcss-prop");
 function createStrictAPI() {
     return {
         css() {
-            throw (0, error_1.createSetupError)();
+            throw (0, error_1.createStrictSetupError)();
         },
         cssMap() {
-            throw (0, error_1.createSetupError)();
+            throw (0, error_1.createStrictSetupError)();
         },
         cx: xcss_prop_1.cx,
         XCSSProp() {
-            throw (0, error_1.createSetupError)();
+            throw (0, error_1.createStrictSetupError)();
         },
     };
 }

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,0CAAkD;AAClD,4CAA+E;AA+J/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,SAAgB,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,IAAA,wBAAgB,GAAE,CAAC;QAC3B,CAAC;QACD,MAAM;YACJ,MAAM,IAAA,wBAAgB,GAAE,CAAC;QAC3B,CAAC;QACD,EAAE,EAAF,cAAE;QACF,QAAQ;YACN,MAAM,IAAA,wBAAgB,GAAE,CAAC;QAC3B,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;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"}

package/dist/cjs/utils/error.d.ts

@@ -1 +1,2 @@
 export declare const createSetupError: () => Error;
+export declare const createStrictSetupError: () => Error;

package/dist/cjs/utils/error.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSetupError = void 0;
+exports.createStrictSetupError = exports.createSetupError = void 0;
 const createSetupError = () => {
     return new Error(`
  ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
@@ -21,4 +21,24 @@ const createSetupError = () => {
 `);
 };
 exports.createSetupError = createSetupError;
+const createStrictSetupError = () => {
+    return new Error(`
+ ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
+██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝
+
+  @compiled/react
+
+  Code was executed when it shouldn't have. To resolve make sure to:
+
+  1. Set up Compiled.
+  2. Configure importSources in your Compiled config to point to the module that exports the output of createStrictAPI().
+
+  For more information visit https://compiledcssinjs.com/docs/installation and follow the instructions.
+`);
+};
+exports.createStrictSetupError = createStrictSetupError;
 //# sourceMappingURL=error.js.map

package/dist/cjs/utils/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":";;;AAAO,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B"}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":";;;AAAO,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B;AAEK,MAAM,sBAAsB,GAAG,GAAU,EAAE;IAChD,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC;AAlBW,QAAA,sBAAsB,0BAkBjC"}

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

@@ -9,7 +9,9 @@ type EnforceSchema<TObject> = {
 type PickObjects<TObject> = {
     [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
 };
-interface CompiledAPI<TSchema> {
+type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
+type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
+interface CompiledAPI<TSchema extends CompiledSchema> {
     /**
      * ## CSS
      *
@@ -25,7 +27,7 @@ interface CompiledAPI<TSchema> {
      * <div css={redText} />
      * ```
      */
-    css(styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>): StrictCSSProperties;
+    css(styles: CSSStyles<TSchema>): StrictCSSProperties;
     /**
      * ## CSS Map
      *
@@ -42,8 +44,8 @@ interface CompiledAPI<TSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStyles extends Record<string, StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>>>(styles: TStyles): {
-        readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(styles: CSSMapStyles<TSchema>): {
+        readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
     };
     /**
      * ## CX

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

@@ -1,4 +1,4 @@
-import { createSetupError } from '../utils/error';
+import { createStrictSetupError } from '../utils/error';
 import { cx } from '../xcss-prop';
 /**
  * ## Create Strict API
@@ -51,14 +51,14 @@ import { cx } from '../xcss-prop';
 export function createStrictAPI() {
     return {
         css() {
-            throw createSetupError();
+            throw createStrictSetupError();
         },
         cssMap() {
-            throw createSetupError();
+            throw createStrictSetupError();
         },
         cx,
         XCSSProp() {
-            throw createSetupError();
+            throw createStrictSetupError();
         },
     };
 }

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,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AA+J/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC;QACD,MAAM;YACJ,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,gBAAgB,EAAE,CAAC;QAC3B,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;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"}

package/dist/esm/utils/error.d.ts

@@ -1 +1,2 @@
 export declare const createSetupError: () => Error;
+export declare const createStrictSetupError: () => Error;

package/dist/esm/utils/error.js

@@ -17,4 +17,23 @@ export const createSetupError = () => {
   Good luck!
 `);
 };
+export const createStrictSetupError = () => {
+    return new Error(`
+ ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
+██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝
+
+  @compiled/react
+
+  Code was executed when it shouldn't have. To resolve make sure to:
+
+  1. Set up Compiled.
+  2. Configure importSources in your Compiled config to point to the module that exports the output of createStrictAPI().
+
+  For more information visit https://compiledcssinjs.com/docs/installation and follow the instructions.
+`);
+};
 //# sourceMappingURL=error.js.map

package/dist/esm/utils/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAU,EAAE;IAChD,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { createStrictAPI } from '@compiled/react';
+import { createStrictAPI } from '../../index';
 
 const { css, XCSSProp, cssMap, cx } = createStrictAPI<{
   '&:hover': {

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

@@ -86,6 +86,56 @@ describe('createStrictAPI()', () => {
 
       expect(getByTestId('div')).toHaveCompiledCss('all', 'inherit');
     });
+
+    it('should type error with css properties not in the style scope', () => {
+      // NOTE: These are split into mutliple `css()` calls to ensure the type errors are not hidden
+      // as only one will error at a time when combined into one query
+
+      const bgStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        // @ts-expect-error - Object literal may only specify known properties, and 'bg' does not exist in type …
+        bg: 'red',
+      });
+
+      const colourStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+        colour: 'var(--ds-text)',
+      });
+
+      const hoverStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        '&:hover': {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+          colour: 'var(--ds-text-hover)',
+        },
+      });
+
+      const invalidPsuedoStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        // @ts-expect-error - bject literal may only specify known properties, and ''&:invalid-pseudo'' does not exist in type …
+        '&:invalid-pseudo': {
+          color: 'var(--ds-text)',
+        },
+      });
+
+      const { getByTestId } = render(
+        <div css={[bgStyles, colourStyles, hoverStyles, invalidPsuedoStyles]} data-testid="div" />
+      );
+
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold');
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold', {
+        target: ':hover',
+      });
+
+      // These still get compiled to css, even if they're not valid
+      expect(getByTestId('div')).toHaveCompiledCss('bg', 'red');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text)');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text-hover)', {
+        target: ':hover',
+      });
+    });
   });
 
   describe('cssMap()', () => {
@@ -152,6 +202,72 @@ describe('createStrictAPI()', () => {
 
       expect(getByTestId('div')).toHaveCompiledCss('val', 'ok', { target: ':hover' });
     });
+
+    it('should type error with css properties not in the style scope', () => {
+      // NOTE: These are split into mutliple `css()` calls to ensure the type errors are not hidden
+      // as only one will error at a time when combined into one query
+
+      const bgStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - Object literal may only specify known properties, and 'bg' does not exist in type …
+          bg: 'red',
+        },
+      });
+
+      const colourStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+          colour: 'var(--ds-text)',
+        },
+      });
+
+      const hoverStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          '&:hover': {
+            fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+            // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+            colour: 'var(--ds-text-hover)',
+          },
+        },
+      });
+
+      const invalidPsuedoStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - bject literal may only specify known properties, and ''&:invalid-pseudo'' does not exist in type …
+          '&:invalid-pseudo': {
+            color: 'var(--ds-text)',
+          },
+        },
+      });
+
+      const { getByTestId } = render(
+        <div
+          css={[
+            bgStyles.primary,
+            colourStyles.primary,
+            hoverStyles.primary,
+            invalidPsuedoStyles.primary,
+          ]}
+          data-testid="div"
+        />
+      );
+
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold');
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold', {
+        target: ':hover',
+      });
+
+      // These still get compiled to css, even if they're not valid
+      expect(getByTestId('div')).toHaveCompiledCss('bg', 'red');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text)');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text-hover)', {
+        target: ':hover',
+      });
+    });
   });
 
   describe('XCSSProp', () => {

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

@@ -1,5 +1,5 @@
 import type { StrictCSSProperties, CSSPseudos } from '../types';
-import { createSetupError } from '../utils/error';
+import { createStrictSetupError } from '../utils/error';
 import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
 
 type PseudosDeclarations = {
@@ -18,7 +18,12 @@ type PickObjects<TObject> = {
   [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
 };
 
-interface CompiledAPI<TSchema> {
+type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties &
+  PseudosDeclarations &
+  EnforceSchema<TSchema>;
+type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
+
+interface CompiledAPI<TSchema extends CompiledSchema> {
   /**
    * ## CSS
    *
@@ -34,9 +39,7 @@ interface CompiledAPI<TSchema> {
    * <div css={redText} />
    * ```
    */
-  css(
-    styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>
-  ): StrictCSSProperties;
+  css(styles: CSSStyles<TSchema>): StrictCSSProperties;
   /**
    * ## CSS Map
    *
@@ -53,15 +56,12 @@ interface CompiledAPI<TSchema> {
    * <div css={styles.solid} />
    * ```
    */
-  cssMap<
-    TStyles extends Record<
-      string,
-      StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>
-    >
-  >(
-    styles: TStyles
+  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>
   ): {
-    readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
   };
   /**
    * ## CX
@@ -210,14 +210,14 @@ type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
 export function createStrictAPI<TSchema extends CompiledSchema>(): CompiledAPI<TSchema> {
   return {
     css() {
-      throw createSetupError();
+      throw createStrictSetupError();
     },
     cssMap() {
-      throw createSetupError();
+      throw createStrictSetupError();
     },
     cx,
     XCSSProp() {
-      throw createSetupError();
+      throw createStrictSetupError();
     },
   };
 }

package/src/utils/error.ts

@@ -17,3 +17,23 @@ export const createSetupError = (): Error => {
   Good luck!
 `);
 };
+
+export const createStrictSetupError = (): Error => {
+  return new Error(`
+ ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
+██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝
+
+  @compiled/react
+
+  Code was executed when it shouldn't have. To resolve make sure to:
+
+  1. Set up Compiled.
+  2. Configure importSources in your Compiled config to point to the module that exports the output of createStrictAPI().
+
+  For more information visit https://compiledcssinjs.com/docs/installation and follow the instructions.
+`);
+};