@compiled/react 0.16.2 → 0.16.4

package/dist/browser/class-names/index.d.ts

@@ -13,7 +13,7 @@ export interface ClassNamesProps<TProps> {
     }) => ReactNode;
 }
 /**
- * ## Class names
+ * ## Class Names
  *
  * Use a component where styles are not necessarily used on a JSX element.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).

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

@@ -0,0 +1,181 @@
+import type { StrictCSSProperties, CSSPseudos } from '../types';
+import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
+type PseudosDeclarations = {
+    [Q in CSSPseudos]?: StrictCSSProperties;
+};
+type EnforceSchema<TObject> = {
+    [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
+};
+type PickObjects<TObject> = {
+    [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
+};
+interface CompiledAPI<TSchema> {
+    /**
+     * ## 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).
+     *
+     * @example
+     * ```
+     * const redText = css({
+     *   color: 'red',
+     * });
+     *
+     * <div css={redText} />
+     * ```
+     */
+    css(styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>): StrictCSSProperties;
+    /**
+     * ## CSS Map
+     *
+     * Creates a collection of named styles that are statically typed and useable with other Compiled APIs.
+     * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+     *
+     * @example
+     * ```
+     * const styles = cssMap({
+     *  none: { borderStyle: 'none' },
+     *  solid: { borderStyle: 'solid' },
+     * });
+     *
+     * <div css={styles.solid} />
+     * ```
+     */
+    cssMap<TStyles extends Record<string, StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>>>(styles: TStyles): {
+        readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    };
+    /**
+     * ## CX
+     *
+     * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
+     * declared styles. Can only be used with the {@link cssMap} and {@link XCSSProp} APIs.
+     *
+     * @example
+     * ```
+     * const styles = cssMap({
+     *  text: { color: 'var(--ds-text)' },
+     *  primary: { color: 'var(--ds-text-brand)' },
+     * });
+     *
+     * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+     * ```
+     */
+    cx: typeof cx;
+    /**
+     * ## XCSSProp
+     *
+     * Declare styles your component takes with all other styles marked as violations
+     * by the TypeScript compiler. There are two primary use cases for xcss prop:
+     *
+     * - safe style overrides
+     * - inverting style declarations
+     *
+     * Interverting style declarations is interesting for platform teams as
+     * it means products only pay for styles they use as they're now the ones who declare
+     * the styles!
+     *
+     * The {@link XCSSProp} type has generics two of which must be defined — use to explicitly
+     * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+     * to enable all properties and pseudos.
+     *
+     * The third generic is used to declare what properties and pseudos should be required.
+     *
+     * ```tsx
+     * interface MyComponentProps {
+     *   // Color is accepted, all other properties / pseudos are considered violations.
+     *   xcss?: ReturnType<typeof XCSSProp<'color', never>>;
+     *
+     *   // Only backgrond color and hover pseudo is accepted.
+     *   xcss?: ReturnType<typeof XCSSProp<'backgroundColor', '&:hover'>>;
+     *
+     *   // All properties are accepted, all pseudos are considered violations.
+     *   xcss?: ReturnType<typeof XCSSProp<XCSSAllProperties, never>>;
+     *
+     *   // All properties are accepted, only the hover pseudo is accepted.
+     *   xcss?: ReturnType<typeof XCSSProp<XCSSAllProperties, '&:hover'>>;
+     *
+     *   // The xcss prop is required as well as the color property. No pseudos are required.
+     *   xcss: ReturnType<
+     *    typeof XCSSProp<
+     *      XCSSAllProperties,
+     *      '&:hover',
+     *      { requiredProperties: 'color', requiredPseudos: never }
+     *     >
+     *   >;
+     * }
+     *
+     * function MyComponent({ xcss }: MyComponentProps) {
+     *   return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
+     * }
+     * ```
+     *
+     * The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
+     *
+     * ```jsx
+     * // Declared as an inline object
+     * <Component xcss={{ color: 'var(--ds-text)' }} />
+     *
+     * // Declared with the cssMap API
+     * const styles = cssMap({ text: { color: 'var(--ds-text)' } });
+     * <Component xcss={styles.text} />
+     * ```
+     *
+     * To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
+     */
+    XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+        requiredProperties: TAllowedProperties;
+        requiredPseudos: TAllowedPseudos;
+    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
+}
+type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
+/**
+ * ## Create Strict API
+ *
+ * Returns a strict subset of Compiled APIs augmented by a type definition.
+ * This API does not change Compileds build time behavior — merely augmenting
+ * the returned API types which enforce:
+ *
+ * - all APIs use object types
+ * - property values declared in the type definition must be used (else fallback to defaults)
+ * - a strict subset of pseudo states/selectors
+ * - unknown properties to be a type violation
+ *
+ * To set up:
+ *
+ * 1. Declare the API in a module (either local or in a package):
+ *
+ * @example
+ * ```tsx
+ * // ./foo.ts
+ * const { css } = createStrictAPI<{
+ *   color: 'var(--ds-text)',
+ *   '&:hover': { color: 'var(--ds-text-hover)' }
+ * }>();
+ *
+ * export { css };
+ * ```
+ *
+ * 2. Configure Compiled to pick up this module:
+ *
+ * @example
+ * ```diff
+ * // .compiledcssrc
+ * {
+ * +  "importSources": ["./foo.ts"]
+ * }
+ * ```
+ *
+ * 3. Use the module in your application code:
+ *
+ * @example
+ * ```tsx
+ * import { css } from './foo';
+ *
+ * const styles = css({ color: 'var(--ds-text)' });
+ *
+ * <div css={styles} />
+ * ```
+ */
+export declare function createStrictAPI<TSchema extends CompiledSchema>(): CompiledAPI<TSchema>;
+export {};

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

@@ -0,0 +1,65 @@
+import { createStrictSetupError } from '../utils/error';
+import { cx } from '../xcss-prop';
+/**
+ * ## Create Strict API
+ *
+ * Returns a strict subset of Compiled APIs augmented by a type definition.
+ * This API does not change Compileds build time behavior — merely augmenting
+ * the returned API types which enforce:
+ *
+ * - all APIs use object types
+ * - property values declared in the type definition must be used (else fallback to defaults)
+ * - a strict subset of pseudo states/selectors
+ * - unknown properties to be a type violation
+ *
+ * To set up:
+ *
+ * 1. Declare the API in a module (either local or in a package):
+ *
+ * @example
+ * ```tsx
+ * // ./foo.ts
+ * const { css } = createStrictAPI<{
+ *   color: 'var(--ds-text)',
+ *   '&:hover': { color: 'var(--ds-text-hover)' }
+ * }>();
+ *
+ * export { css };
+ * ```
+ *
+ * 2. Configure Compiled to pick up this module:
+ *
+ * @example
+ * ```diff
+ * // .compiledcssrc
+ * {
+ * +  "importSources": ["./foo.ts"]
+ * }
+ * ```
+ *
+ * 3. Use the module in your application code:
+ *
+ * @example
+ * ```tsx
+ * import { css } from './foo';
+ *
+ * const styles = css({ color: 'var(--ds-text)' });
+ *
+ * <div css={styles} />
+ * ```
+ */
+export function createStrictAPI() {
+    return {
+        css() {
+            throw createStrictSetupError();
+        },
+        cssMap() {
+            throw createStrictSetupError();
+        },
+        cx,
+        XCSSProp() {
+            throw createStrictSetupError();
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

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

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

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

@@ -2,7 +2,7 @@ import type { CSSProps, CssObject, CssFunction } from '../types';
 /**
  * ## CSS
  *
- * Define styles that are statically typed and useable with other Compiled APIs.
+ * Create styles that are statically typed and useable with other Compiled APIs.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
  * ### Style with objects

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

@@ -78,9 +78,9 @@ type ExtendedSelectors = {
     selectors?: ExtendedSelector;
 };
 /**
- * ## cssMap
+ * ## CSS Map
  *
- * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * Creates a collection of named styles that are statically typed and useable with other Compiled APIs.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
  *
  * @example
@@ -90,9 +90,7 @@ type ExtendedSelectors = {
  *  solid: { borderStyle: 'solid' },
  * });
  *
- * const Component = ({ borderStyle }) => <div css={styles[borderStyle]} />
- *
- * <Component borderStyle="solid" />
+ * <div css={styles.solid} />
  * ```
  */
 export default function cssMap<TStyles extends Record<string, CSSProperties & WhitelistedSelector & ExtendedSelectors>>(_styles: TStyles): {

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

@@ -1,8 +1,8 @@
 import { createSetupError } from '../utils/error';
 /**
- * ## cssMap
+ * ## CSS Map
  *
- * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * Creates a collection of named styles that are statically typed and useable with other Compiled APIs.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
  *
  * @example
@@ -12,9 +12,7 @@ import { createSetupError } from '../utils/error';
  *  solid: { borderStyle: 'solid' },
  * });
  *
- * const Component = ({ borderStyle }) => <div css={styles[borderStyle]} />
- *
- * <Component borderStyle="solid" />
+ * <div css={styles.solid} />
  * ```
  */
 export default function cssMap(_styles) {

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;;;;;;;;;;;;;;;;;GAiBG;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;AAkFlD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAG5B,OAAgB;IAIhB,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/index.d.ts

@@ -7,6 +7,7 @@ export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
+export { createStrictAPI } from './create-strict-api';
 export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 export declare const jsx: typeof createElement;
 export declare namespace jsx {

package/dist/browser/index.js

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

package/dist/browser/index.js.map

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

package/dist/browser/types.d.ts

@@ -20,9 +20,14 @@ export type CssObject<TProps> = Readonly<{
 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';
 /**
- * The xcss prop must be given all known available properties even
- * if it takes a subset of them. This is ensure the (lack-of an)
+ * 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>>;
+/**
+ * A stricter subset of the {@link CSSProperties} type that excludes
+ * vendor and obsolete properties.
+ */
+export type StrictCSSProperties = Readonly<CSS.StandardProperties & CSS.SvgProperties>;

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/browser/xcss-prop/index.d.ts

@@ -1,12 +1,15 @@
 import type * as CSS from 'csstype';
 import type { CSSPseudos, CSSProperties } from '../types';
-type XCSSItem<TStyleDecl extends keyof CSSProperties> = {
-    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | string | number : never;
+type MarkAsRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
+    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
 };
 type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-}> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> : never;
+}, TCompiledTypedPseudo> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -47,7 +50,7 @@ export type XCSSAllProperties = keyof CSSProperties;
  */
 export type XCSSAllPseudos = CSSPseudos;
 /**
- * ## xcss prop
+ * ## XCSSProp
  *
  * Declare styles your component takes with all other styles marked as violations
  * by the TypeScript compiler. There are two primary use cases for xcss prop:
@@ -106,12 +109,13 @@ export type XCSSAllPseudos = CSSPseudos;
 export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = (MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
-type MarkAsRequired<T, K extends keyof T> = T & {
-    [P in K]-?: T[P];
-};
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+    requiredPseudos: TAllowedPseudos;
+}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
 /**
- * ## cx
+ * ## CX
  *
  * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
  * declared styles. Can only be used with the `cssMap()` and {@link XCSSProp} APIs.

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

@@ -1,6 +1,6 @@
 import { ac } from '../runtime';
 /**
- * ## cx
+ * ## CX
  *
  * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
  * declared styles. Can only be used with the `cssMap()` and {@link XCSSProp} APIs.

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

package/dist/cjs/class-names/index.d.ts

@@ -13,7 +13,7 @@ export interface ClassNamesProps<TProps> {
     }) => ReactNode;
 }
 /**
- * ## Class names
+ * ## Class Names
  *
  * Use a component where styles are not necessarily used on a JSX element.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).

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

@@ -0,0 +1,181 @@
+import type { StrictCSSProperties, CSSPseudos } from '../types';
+import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
+type PseudosDeclarations = {
+    [Q in CSSPseudos]?: StrictCSSProperties;
+};
+type EnforceSchema<TObject> = {
+    [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
+};
+type PickObjects<TObject> = {
+    [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
+};
+interface CompiledAPI<TSchema> {
+    /**
+     * ## 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).
+     *
+     * @example
+     * ```
+     * const redText = css({
+     *   color: 'red',
+     * });
+     *
+     * <div css={redText} />
+     * ```
+     */
+    css(styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>): StrictCSSProperties;
+    /**
+     * ## CSS Map
+     *
+     * Creates a collection of named styles that are statically typed and useable with other Compiled APIs.
+     * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+     *
+     * @example
+     * ```
+     * const styles = cssMap({
+     *  none: { borderStyle: 'none' },
+     *  solid: { borderStyle: 'solid' },
+     * });
+     *
+     * <div css={styles.solid} />
+     * ```
+     */
+    cssMap<TStyles extends Record<string, StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>>>(styles: TStyles): {
+        readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    };
+    /**
+     * ## CX
+     *
+     * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
+     * declared styles. Can only be used with the {@link cssMap} and {@link XCSSProp} APIs.
+     *
+     * @example
+     * ```
+     * const styles = cssMap({
+     *  text: { color: 'var(--ds-text)' },
+     *  primary: { color: 'var(--ds-text-brand)' },
+     * });
+     *
+     * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+     * ```
+     */
+    cx: typeof cx;
+    /**
+     * ## XCSSProp
+     *
+     * Declare styles your component takes with all other styles marked as violations
+     * by the TypeScript compiler. There are two primary use cases for xcss prop:
+     *
+     * - safe style overrides
+     * - inverting style declarations
+     *
+     * Interverting style declarations is interesting for platform teams as
+     * it means products only pay for styles they use as they're now the ones who declare
+     * the styles!
+     *
+     * The {@link XCSSProp} type has generics two of which must be defined — use to explicitly
+     * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+     * to enable all properties and pseudos.
+     *
+     * The third generic is used to declare what properties and pseudos should be required.
+     *
+     * ```tsx
+     * interface MyComponentProps {
+     *   // Color is accepted, all other properties / pseudos are considered violations.
+     *   xcss?: ReturnType<typeof XCSSProp<'color', never>>;
+     *
+     *   // Only backgrond color and hover pseudo is accepted.
+     *   xcss?: ReturnType<typeof XCSSProp<'backgroundColor', '&:hover'>>;
+     *
+     *   // All properties are accepted, all pseudos are considered violations.
+     *   xcss?: ReturnType<typeof XCSSProp<XCSSAllProperties, never>>;
+     *
+     *   // All properties are accepted, only the hover pseudo is accepted.
+     *   xcss?: ReturnType<typeof XCSSProp<XCSSAllProperties, '&:hover'>>;
+     *
+     *   // The xcss prop is required as well as the color property. No pseudos are required.
+     *   xcss: ReturnType<
+     *    typeof XCSSProp<
+     *      XCSSAllProperties,
+     *      '&:hover',
+     *      { requiredProperties: 'color', requiredPseudos: never }
+     *     >
+     *   >;
+     * }
+     *
+     * function MyComponent({ xcss }: MyComponentProps) {
+     *   return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
+     * }
+     * ```
+     *
+     * The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
+     *
+     * ```jsx
+     * // Declared as an inline object
+     * <Component xcss={{ color: 'var(--ds-text)' }} />
+     *
+     * // Declared with the cssMap API
+     * const styles = cssMap({ text: { color: 'var(--ds-text)' } });
+     * <Component xcss={styles.text} />
+     * ```
+     *
+     * To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
+     */
+    XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+        requiredProperties: TAllowedProperties;
+        requiredPseudos: TAllowedPseudos;
+    } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
+}
+type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
+/**
+ * ## Create Strict API
+ *
+ * Returns a strict subset of Compiled APIs augmented by a type definition.
+ * This API does not change Compileds build time behavior — merely augmenting
+ * the returned API types which enforce:
+ *
+ * - all APIs use object types
+ * - property values declared in the type definition must be used (else fallback to defaults)
+ * - a strict subset of pseudo states/selectors
+ * - unknown properties to be a type violation
+ *
+ * To set up:
+ *
+ * 1. Declare the API in a module (either local or in a package):
+ *
+ * @example
+ * ```tsx
+ * // ./foo.ts
+ * const { css } = createStrictAPI<{
+ *   color: 'var(--ds-text)',
+ *   '&:hover': { color: 'var(--ds-text-hover)' }
+ * }>();
+ *
+ * export { css };
+ * ```
+ *
+ * 2. Configure Compiled to pick up this module:
+ *
+ * @example
+ * ```diff
+ * // .compiledcssrc
+ * {
+ * +  "importSources": ["./foo.ts"]
+ * }
+ * ```
+ *
+ * 3. Use the module in your application code:
+ *
+ * @example
+ * ```tsx
+ * import { css } from './foo';
+ *
+ * const styles = css({ color: 'var(--ds-text)' });
+ *
+ * <div css={styles} />
+ * ```
+ */
+export declare function createStrictAPI<TSchema extends CompiledSchema>(): CompiledAPI<TSchema>;
+export {};