@compiled/react 0.16.10 → 0.17.1

package/dist/browser/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/browser/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/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;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/browser/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/browser/create-strict-api/types.js

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

package/dist/browser/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/browser/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/browser/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/browser/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/browser/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/browser/index.d.ts

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

package/dist/browser/index.js

@@ -5,7 +5,7 @@ export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
 export { styled } from './styled';
-export { cx } from './xcss-prop';
+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.
 export const jsx = createElement;

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;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"}
+{"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;AAQtD,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;AAS/C,OAAO,EAML,EAAE,GACH,MAAM,aAAa,CAAC;AAErB,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}

package/dist/browser/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/browser/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/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;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/dist/cjs/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/cjs/create-strict-api/index.js

@@ -17,17 +17,19 @@ const xcss_prop_1 = require("../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/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;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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":";;;AACA,0CAAwD;AACxD,4CAA+E;AAyJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,SAAgB,eAAe;IAI7B,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;AAhBD,0CAgBC"}

package/dist/cjs/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/cjs/create-strict-api/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/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/cjs/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/cjs/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":";AAAA,kCAAkC;;AAGlC,0CAAkD;AAuClD,SAAwB,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":";AAAA,kCAAkC;;AAGlC,0CAAkD;AAyClD,SAAwB,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}

package/dist/cjs/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/cjs/css-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":";;AAGA,0CAAkD;AAkFlD;;;;;;;;;;;;;;;GAeG;AACH,SAAwB,MAAM,CAG5B,OAAgB;IAIhB,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AARD,yBAQC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":";;AAGA,0CAAkD;AAiGlD;;;;;;;;;;;;;;;GAeG;AACH,SAAwB,MAAM,CAM5B,OAAgB;IAIhB,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AAXD,yBAWC"}

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"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"}
+{"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;AAQxB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAA+C;AAAtC,gGAAA,MAAM,OAAA;AASf,yCAOqB;AADnB,+FAAA,EAAE,OAAA;AAGJ,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}

package/dist/cjs/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.