@compiled/react 0.16.10 → 0.17.0

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

@@ -1,22 +1,27 @@
 import type * as CSS from 'csstype';
-import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
+import type { ApplySchemaValue } from '../create-strict-api/types';
+import type { CSSPseudos, CSSPseudoClasses, CSSProperties, StrictCSSProperties } from '../types';
 type MarkAsRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-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 XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends CSSPseudoClasses | ''> = {
+    [Q in keyof StrictCSSProperties]: Q extends TStyleDecl ? ApplySchemaValue<TSchema, Q, TPseudoKey> : never;
 };
-type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+type XCSSPseudo<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
 }, TSchema> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
+};
+type XCSSMediaQuery<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema> = {
+    [Q in `@media ${TAllowedMediaQueries}`]?: XCSSValue<TAllowedProperties, TSchema, ''> | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
  * must declare them so the (lack-of a) excess property check doesn't bite us and allow
  * unexpected values through.
  */
-type BlockedRules = {
+type BlockedRules<TMode extends 'loose' | 'strict'> = {
+    '@media [loose]'?: TMode extends 'loose' ? any : never;
     selectors?: never;
 } & {
     [Q in CSS.AtRules]?: never;
@@ -30,7 +35,7 @@ type CompiledPropertyDeclarationReference = {
  * take Compiled generated styles and not some arbitrary object.
  */
 export type CompiledStyles<TObject> = {
-    [Q in keyof TObject]: TObject[Q] extends Record<string, unknown> ? CompiledStyles<TObject[Q]> : CompiledPropertyDeclarationReference;
+    [Q in keyof TObject]: TObject[Q] extends Record<string, unknown> ? CompiledStyles<TObject[Q]> : CompiledPropertyDeclarationReference & TObject[Q];
 };
 /**
  * Please think twice before using this type, you're better off declaring explicitly
@@ -84,7 +89,7 @@ export type XCSSAllPseudos = CSSPseudos;
  *   xcss?: XCSSProp<XCSSAllProperties, '&:hover'>;
  *
  *   // The xcss prop is required as well as the color property. No pseudos are required.
- *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color', requiredPseudos: never }>;
+ *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color' }>;
  * }
  *
  * function MyComponent({ xcss }: MyComponentProps) {
@@ -106,14 +111,12 @@ export type XCSSAllPseudos = CSSPseudos;
  *
  * To concatenate and conditonally apply styles use the {@link cssMap} {@link cx} functions.
  */
-export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+export type XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
-} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
-export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, string, object, TRequiredProperties, 'loose'>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
-}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
+}, TMode extends 'loose' | 'strict'> = (MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, ''>, TRequiredProperties['requiredProperties']> & XCSSPseudo<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema> & XCSSMediaQuery<TAllowedProperties, TAllowedPseudos, TAllowedMediaQueries, TSchema> & BlockedRules<TMode>) | 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;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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":";;;AAGA,wCAAgC;AAsLhC;;;;;;;;;;;;;;;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

@@ -1,20 +1,18 @@
-import type { StrictCSSProperties, CSSPseudos } from '../types';
+import type { StrictCSSProperties, CSSPseudos, CSSProps } from '../types';
 import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
-type PseudosDeclarations = {
-    [Q in CSSPseudos]?: StrictCSSProperties;
-};
-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>>;
-interface CompiledAPI<TSchema extends CompiledSchema> {
+import type { AllowedStyles, ApplySchema, ApplySchemaMap, CompiledSchemaShape } from './types';
+export interface StrictOptions {
+    media: string;
+}
+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({
@@ -24,7 +22,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
      * <div css={redText} />
      * ```
      */
-    css(styles: CSSStyles<TSchema>): StrictCSSProperties;
+    css<TStyles extends ApplySchema<TStyles, TSchema>>(styles: AllowedStyles<TAllowedMediaQueries> & TStyles): CSSProps<unknown>;
     /**
      * ## CSS Map
      *
@@ -41,7 +39,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
      * <div css={styles.solid} />
      * ```
      */
-    cssMap<TStylesMap extends CSSMapStyles<TSchema>>(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]>;
     };
     /**
@@ -99,7 +97,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
      *    typeof XCSSProp<
      *      XCSSAllProperties,
      *      '&:hover',
-     *      { requiredProperties: 'color', requiredPseudos: never }
+     *      { requiredProperties: 'color' }
      *     >
      *   >;
      * }
@@ -124,10 +122,8 @@ 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, TRequiredProperties>;
+    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TAllowedMediaQueries, TSchema, TRequiredProperties, 'strict'>;
 }
-type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
 /**
  * ## Create Strict API
  *
@@ -142,17 +138,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:
@@ -176,5 +174,4 @@ type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
  * <div css={styles} />
  * ```
  */
-export declare function createStrictAPI<TSchema extends CompiledSchema>(): CompiledAPI<TSchema>;
-export {};
+export declare function createStrictAPI<TSchema extends CompiledSchemaShape, TCreateStrictAPIOptions extends StrictOptions = never>(): CompiledAPI<TSchema, TCreateStrictAPIOptions['media']>;

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

@@ -14,17 +14,19 @@ import { cx } from '../xcss-prop';
  *
  * 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:

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;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"}
+{"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;AAyJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,UAAU,eAAe;IAI7B,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/create-strict-api/types.d.ts

@@ -0,0 +1,28 @@
+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 ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : 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 ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends CSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
+};
+export type ApplySchemaMap<TStylesMap, TSchema> = {
+    [P in keyof TStylesMap]: ApplySchema<TStylesMap[P], TSchema>;
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/create-strict-api/types.ts"],"names":[],"mappings":""}

package/dist/esm/css/index.d.ts

@@ -5,6 +5,8 @@ import type { CSSProps, CssObject, CssFunction } from '../types';
  * 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

package/dist/esm/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAyClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/css-map/index.d.ts

@@ -77,6 +77,19 @@ type ExtendedSelectors = {
      */
     selectors?: ExtendedSelector;
 };
+type LooseMediaQueries = Record<`@media ${string}`, CSSProperties & AllPseudos>;
+/**
+ * We remap media query keys to `"@media"` so it's blocked inside the strict APIs.
+ * This is done as it's currently impossible to ensure type safety end-to-end — when
+ * passing in unknown media queries from the loose API into the strict API you end up
+ * being also able to pass any styles you want, which makes the whole point of the strict
+ * API meaningless.
+ *
+ * Sorry folks!
+ */
+type RemapMedia<TStyles> = {
+    [Q in keyof TStyles as Q extends `@media ${string}` ? '@media [loose]' : Q]: TStyles[Q];
+};
 /**
  * ## CSS Map
  *
@@ -93,7 +106,7 @@ type ExtendedSelectors = {
  * <div css={styles.solid} />
  * ```
  */
-export default function cssMap<TStyles extends Record<string, CSSProperties & WhitelistedSelector & ExtendedSelectors>>(_styles: TStyles): {
-    readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+export default function cssMap<TStyles extends Record<string, CSSProperties & WhitelistedSelector & ExtendedSelectors & LooseMediaQueries>>(_styles: TStyles): {
+    readonly [P in keyof TStyles]: CompiledStyles<RemapMedia<TStyles[P]>>;
 };
 export {};

package/dist/esm/css-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkFlD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAG5B,OAAgB;IAIhB,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAiGlD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAM5B,OAAgB;IAIhB,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/types.d.ts

@@ -18,14 +18,16 @@ export type CssObject<TProps> = Readonly<{
     [key: string]: CssFunction<TProps>;
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
-export type CSSPseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
+export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
+export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
+export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even
  * if it takes a subset of them. This ensures the (lack-of an)
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<string | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

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

@@ -1,22 +1,27 @@
 import type * as CSS from 'csstype';
-import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
+import type { ApplySchemaValue } from '../create-strict-api/types';
+import type { CSSPseudos, CSSPseudoClasses, CSSProperties, StrictCSSProperties } from '../types';
 type MarkAsRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-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 XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends CSSPseudoClasses | ''> = {
+    [Q in keyof StrictCSSProperties]: Q extends TStyleDecl ? ApplySchemaValue<TSchema, Q, TPseudoKey> : never;
 };
-type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+type XCSSPseudo<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
 }, TSchema> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
+};
+type XCSSMediaQuery<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema> = {
+    [Q in `@media ${TAllowedMediaQueries}`]?: XCSSValue<TAllowedProperties, TSchema, ''> | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
  * must declare them so the (lack-of a) excess property check doesn't bite us and allow
  * unexpected values through.
  */
-type BlockedRules = {
+type BlockedRules<TMode extends 'loose' | 'strict'> = {
+    '@media [loose]'?: TMode extends 'loose' ? any : never;
     selectors?: never;
 } & {
     [Q in CSS.AtRules]?: never;
@@ -30,7 +35,7 @@ type CompiledPropertyDeclarationReference = {
  * take Compiled generated styles and not some arbitrary object.
  */
 export type CompiledStyles<TObject> = {
-    [Q in keyof TObject]: TObject[Q] extends Record<string, unknown> ? CompiledStyles<TObject[Q]> : CompiledPropertyDeclarationReference;
+    [Q in keyof TObject]: TObject[Q] extends Record<string, unknown> ? CompiledStyles<TObject[Q]> : CompiledPropertyDeclarationReference & TObject[Q];
 };
 /**
  * Please think twice before using this type, you're better off declaring explicitly
@@ -84,7 +89,7 @@ export type XCSSAllPseudos = CSSPseudos;
  *   xcss?: XCSSProp<XCSSAllProperties, '&:hover'>;
  *
  *   // The xcss prop is required as well as the color property. No pseudos are required.
- *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color', requiredPseudos: never }>;
+ *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color' }>;
  * }
  *
  * function MyComponent({ xcss }: MyComponentProps) {
@@ -106,14 +111,12 @@ export type XCSSAllPseudos = CSSPseudos;
  *
  * To concatenate and conditonally apply styles use the {@link cssMap} {@link cx} functions.
  */
-export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+export type XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
-} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
-export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, string, object, TRequiredProperties, 'loose'>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
-}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
+}, TMode extends 'loose' | 'strict'> = (MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, ''>, TRequiredProperties['requiredProperties']> & XCSSPseudo<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema> & XCSSMediaQuery<TAllowedProperties, TAllowedPseudos, TAllowedMediaQueries, TSchema> & BlockedRules<TMode>) | 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;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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAsLhC;;;;;;;;;;;;;;;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.10",
+  "version": "0.17.0",
   "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

@@ -6,29 +6,29 @@ 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)';
+type Space = 'var(--ds-space-050)' | 'var(--ds-space-0)';
 
 interface Properties {
   color: Color;
   backgroundColor: Background;
+  padding: Space;
 }
 
-interface HoveredProperties extends Omit<Properties, 'backgroundColor' | 'color'> {
+interface HoveredProperties {
   color: ColorHovered;
   backgroundColor: BackgroundHovered;
 }
 
-interface PressedProperties extends Omit<Properties, 'backgroundColor' | 'color'> {
+interface PressedProperties {
   color: ColorPressed;
   backgroundColor: BackgroundPressed;
 }
 
-interface StrictAPI extends Properties {
+interface CSSPropertiesSchema extends Properties {
   '&:hover': HoveredProperties;
   '&:active': PressedProperties;
-  '&::before': Properties;
-  '&::after': Properties;
 }
 
-const { css, XCSSProp, cssMap, cx } = createStrictAPI<StrictAPI>();
+const { css, cssMap, cx, XCSSProp } = createStrictAPI<CSSPropertiesSchema>();
 
 export { css, XCSSProp, cssMap, cx };

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

@@ -1,13 +1,24 @@
 import { createStrictAPI } from '../../index';
 
-const { css, XCSSProp, cssMap, cx } = createStrictAPI<{
+interface CSSPropertiesSchema {
   '&:hover': {
     color: 'var(--ds-text-hover)';
     background: 'var(--ds-surface-hover)' | 'var(--ds-surface-sunken-hover)';
   };
-  color: 'var(--ds-text)';
+  color: 'var(--ds-text)' | 'var(--ds-text-bold)';
   background: 'var(--ds-surface)' | 'var(--ds-surface-sunken)';
   bkgrnd: 'red' | 'green';
-}>();
+}
+
+type MediaQuery =
+  | '(min-width: 30rem)'
+  | '(min-width: 48rem)'
+  | '(min-width: 64rem)'
+  | '(min-width: 90rem)'
+  | '(min-width: 110rem)'
+  | '(prefers-color-scheme: dark)'
+  | '(prefers-color-scheme: light)';
+
+const { css, XCSSProp, cssMap, cx } = createStrictAPI<CSSPropertiesSchema, { media: MediaQuery }>();
 
 export { css, XCSSProp, cssMap, cx };

package/src/create-strict-api/__tests__/css-func.test.tsx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from '@compiled/react';
+import type { XCSSProp } from '@fixture/strict-api-test';
+import { css as strictCSS } from '@fixture/strict-api-test';
+import { render } from '@testing-library/react';
+
+function Button({
+  xcss,
+  testId,
+}: {
+  testId: string;
+  xcss: ReturnType<typeof XCSSProp<'backgroundColor', '&:hover'>>;
+}) {
+  return <button data-testid={testId} className={xcss} />;
+}
+
+describe('css func from strict api', () => {
+  it('should type error when passing css func result into xcss prop', () => {
+    const strictStyles = strictCSS({
+      backgroundColor: 'var(--ds-surface)',
+    });
+    const looseStyles = css({
+      backgroundColor: 'red',
+    });
+
+    const { getByTestId } = render(
+      <>
+        <Button
+          testId="button-1"
+          // @ts-expect-error — CSS func currently doesn't work with XCSS prop so should type error
+          xcss={strictStyles}
+        />
+        <Button
+          testId="button-2"
+          // @ts-expect-error — CSS func currently doesn't work with XCSS prop so should type error
+          xcss={looseStyles}
+        />
+        <div data-testid="div-1" css={[strictStyles, looseStyles]} />
+        <div data-testid="div-2" css={[looseStyles, strictStyles]} />
+      </>
+    );
+
+    expect(getByTestId('button-1').className).toEqual('');
+    expect(getByTestId('button-2').className).toEqual('');
+    expect(getByTestId('div-1')).toHaveCompiledCss('background-color', 'red');
+    expect(getByTestId('div-2')).toHaveCompiledCss('background-color', 'var(--ds-surface)');
+  });
+});

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)',
           },