@compiled/react 0.16.0 → 0.16.1

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

@@ -0,0 +1,130 @@
+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 XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+}> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> : never;
+};
+/**
+ * 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 = {
+    selectors?: never;
+} & {
+    [Q in CSS.AtRules]?: never;
+};
+type CompiledPropertyDeclarationReference = {
+    ['__COMPILED_PROPERTY_DECLARATION_REFERENCE_DO_NOT_WRITE_DIRECTLY__']: true;
+};
+/**
+ * Used to mark styles that have been flushed through an API as being generated
+ * from Compiled. This is useful when you want other ends of the API to ensure they
+ * 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;
+};
+/**
+ * Please think twice before using this type, you're better off declaring explicitly
+ * what your API should be, for example only defining `"color"`.
+ *
+ * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
+ * your component.
+ */
+export type XCSSAllProperties = keyof CSSProperties;
+/**
+ * Please think twice before using this type, you're better off declaring explicitly
+ * what your API should be, for example not allowing any pseudos at all using the
+ * `never` type.
+ *
+ * Use in conjunction with {@link XCSSProp} to allow all pseudos to be given to
+ * your component.
+ */
+export type XCSSAllPseudos = CSSPseudos;
+/**
+ * ## xcss prop
+ *
+ * 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.
+ *
+ * @example
+ * ```
+ * interface MyComponentProps {
+ *   // Color is accepted, all other properties / pseudos are considered violations.
+ *   xcss?: XCSSProp<'color', never>;
+ *
+ *   // Only backgrond color and hover pseudo is accepted.
+ *   xcss?: XCSSProp<'backgroundColor', '&:hover'>;
+ *
+ *   // All properties are accepted, all pseudos are considered violations.
+ *   xcss?: XCSSProp<XCSSAllProperties, never>;
+ *
+ *   // All properties are accepted, only the hover pseudo is accepted.
+ *   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 }>;
+ * }
+ *
+ * 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.
+ *
+ * @example
+ * ```
+ * // 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} {@link cx} functions.
+ */
+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];
+};
+/**
+ * ## 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.
+ *
+ * @example
+ * ```
+ * const styles = cssMap({
+ *  text: { color: 'var(--ds-text)' },
+ *  primary: { color: 'var(--ds-text-brand)' },
+ * });
+ *
+ * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+ * ```
+ */
+export declare const cx: <TStyles extends XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
+export {};

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+const runtime_1 = require("../runtime");
+/**
+ * ## 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.
+ *
+ * @example
+ * ```
+ * const styles = cssMap({
+ *  text: { color: 'var(--ds-text)' },
+ *  primary: { color: 'var(--ds-text-brand)' },
+ * });
+ *
+ * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+ * ```
+ */
+const cx = (...styles) => {
+    // At runtime TStyles is resolved down to strings, but not at compile time.
+    // We circumvent the type system here because of that.
+    const actualStyles = styles;
+    // The output should be a union type of passed in styles. This ensures the call
+    // site of xcss prop can raise violations when disallowed styles have been passed.
+    return (0, runtime_1.ac)(actualStyles);
+};
+exports.cx = cx;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":";;;AAEA,wCAAgC;AAiJhC;;;;;;;;;;;;;;;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/css-map/index.d.ts

@@ -1,30 +1,18 @@
-import type { Properties, AtRules } from 'csstype';
-import type { Pseudos } from './pseudos';
-/**
- * These are all the CSS props that will exist.
- * Only 'string' and 'number' are valid CSS values.
- *
- * @example
- * ```
- * const style: CssProps = {
- *  color: 'red',
- *  margin: 10,
- * };
- * ```
- */
-type CssProps = Readonly<Properties<string | number>>;
+import type * as CSS from 'csstype';
+import type { CSSPseudos, CSSProperties } from '../types';
+import type { CompiledStyles } from '../xcss-prop';
 type AllPseudos = {
-    [key in Pseudos]?: CssProps & AllPseudos;
+    [key in CSSPseudos]?: CSSProperties & AllPseudos;
 };
 type AtRuleSecondHalf = string;
 type WhitelistedAtRule = {
-    [atRuleFirstHalf in AtRules]?: {
-        [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+    [atRuleFirstHalf in CSS.AtRules]?: {
+        [atRuleSecondHalf in AtRuleSecondHalf]: CSSProperties & AllPseudos & WhitelistedAtRule;
     };
 };
 type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
 type ExtendedSelector = {
-    [key: string]: CssProps | ExtendedSelector;
+    [key: string]: CSSProperties | ExtendedSelector;
 } & {
     /**
      * Using `selectors` is not valid here - you cannot nest a `selectors` object
@@ -89,8 +77,6 @@ type ExtendedSelectors = {
      */
     selectors?: ExtendedSelector;
 };
-type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
-type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
 /**
  * ## cssMap
  *
@@ -99,14 +85,17 @@ type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
  *
  * @example
  * ```
- * const borderStyleMap = cssMap({
- *     none: { borderStyle: 'none' },
- *     solid: { borderStyle: 'solid' },
+ * const styles = cssMap({
+ *  none: { borderStyle: 'none' },
+ *  solid: { borderStyle: 'solid' },
  * });
- * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * const Component = ({ borderStyle }) => <div css={styles[borderStyle]} />
  *
  * <Component borderStyle="solid" />
  * ```
  */
-export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
+export default function cssMap<TStyles extends Record<string, CSSProperties & WhitelistedSelector & ExtendedSelectors>>(_styles: TStyles): {
+    readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+};
 export {};

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

@@ -7,11 +7,12 @@ import { createSetupError } from '../utils/error';
  *
  * @example
  * ```
- * const borderStyleMap = cssMap({
- *     none: { borderStyle: 'none' },
- *     solid: { borderStyle: 'solid' },
+ * const styles = cssMap({
+ *  none: { borderStyle: 'none' },
+ *  solid: { borderStyle: 'solid' },
  * });
- * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * const Component = ({ borderStyle }) => <div css={styles[borderStyle]} />
  *
  * <Component borderStyle="solid" />
  * ```

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAmB,OAAoB;IACnE,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;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAG5B,OAAgB;IAIhB,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/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 { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 export declare const jsx: typeof createElement;
 export declare namespace jsx {
     namespace JSX {

package/dist/esm/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 { 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/esm/index.js.map

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

package/dist/esm/jsx/jsx-local-namespace.d.ts

@@ -58,7 +58,11 @@ export declare namespace CompiledJSX {
     type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
     type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
     type IntrinsicElements = {
-        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+        [K in keyof ReactJSXIntrinsicElements]: Omit<ReactJSXIntrinsicElements[K], 'className'> & {
+            /**
+             * The class name prop now can be given the output of xcss prop from `@compiled/react`.
+             */
+            className?: string | Record<string, any> | null | false;
             css?: CssFunction<void> | CssFunction<void>[];
         };
     };

package/dist/esm/runtime/ac.d.ts

@@ -33,9 +33,9 @@ declare class AtomicGroups {
  *
  * @param classes
  */
-export declare function ac(classNames: (AtomicGroups | string | undefined | false)[]): AtomicGroups | undefined;
+export declare function ac(classNames: (AtomicGroups | string | null | undefined | false)[]): AtomicGroups | undefined;
 export declare function memoizedAc(classNames: (AtomicGroups | string | undefined | false)[]): AtomicGroups | undefined;
-declare const _default: typeof ac;
+declare const _default: typeof memoizedAc;
 export default _default;
 /**
  * Provide an opportunity to clear the cache to prevent memory leak.

package/dist/esm/runtime/ac.js.map

@@ -1 +1 @@
-{"version":3,"file":"ac.js","sourceRoot":"","sources":["../../../src/runtime/ac.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ac.js","sourceRoot":"","sources":["../../../src/runtime/ac.ts"],"names":[],"mappings":"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"}

package/dist/esm/runtime/ax.d.ts

@@ -19,4 +19,4 @@
  *
  * @param classes
  */
-export default function ax(classNames: (string | undefined | false)[]): string | undefined;
+export default function ax(classNames: (string | undefined | null | false)[]): string | undefined;

package/dist/esm/runtime/ax.js.map

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,MAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAAiD;IAC1E,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,MAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}

package/dist/esm/types.d.ts

@@ -17,4 +17,12 @@ export type CSSProps<TProps> = Readonly<CSS.Properties<CssFunction<TProps>>>;
 export type CssObject<TProps> = Readonly<{
     [key: string]: CssFunction<TProps>;
 }>;
-export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;
+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)
+ * 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>>;

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

@@ -0,0 +1,130 @@
+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 XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+}> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> : never;
+};
+/**
+ * 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 = {
+    selectors?: never;
+} & {
+    [Q in CSS.AtRules]?: never;
+};
+type CompiledPropertyDeclarationReference = {
+    ['__COMPILED_PROPERTY_DECLARATION_REFERENCE_DO_NOT_WRITE_DIRECTLY__']: true;
+};
+/**
+ * Used to mark styles that have been flushed through an API as being generated
+ * from Compiled. This is useful when you want other ends of the API to ensure they
+ * 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;
+};
+/**
+ * Please think twice before using this type, you're better off declaring explicitly
+ * what your API should be, for example only defining `"color"`.
+ *
+ * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
+ * your component.
+ */
+export type XCSSAllProperties = keyof CSSProperties;
+/**
+ * Please think twice before using this type, you're better off declaring explicitly
+ * what your API should be, for example not allowing any pseudos at all using the
+ * `never` type.
+ *
+ * Use in conjunction with {@link XCSSProp} to allow all pseudos to be given to
+ * your component.
+ */
+export type XCSSAllPseudos = CSSPseudos;
+/**
+ * ## xcss prop
+ *
+ * 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.
+ *
+ * @example
+ * ```
+ * interface MyComponentProps {
+ *   // Color is accepted, all other properties / pseudos are considered violations.
+ *   xcss?: XCSSProp<'color', never>;
+ *
+ *   // Only backgrond color and hover pseudo is accepted.
+ *   xcss?: XCSSProp<'backgroundColor', '&:hover'>;
+ *
+ *   // All properties are accepted, all pseudos are considered violations.
+ *   xcss?: XCSSProp<XCSSAllProperties, never>;
+ *
+ *   // All properties are accepted, only the hover pseudo is accepted.
+ *   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 }>;
+ * }
+ *
+ * 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.
+ *
+ * @example
+ * ```
+ * // 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} {@link cx} functions.
+ */
+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];
+};
+/**
+ * ## 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.
+ *
+ * @example
+ * ```
+ * const styles = cssMap({
+ *  text: { color: 'var(--ds-text)' },
+ *  primary: { color: 'var(--ds-text-brand)' },
+ * });
+ *
+ * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+ * ```
+ */
+export declare const cx: <TStyles extends XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
+export {};

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

@@ -0,0 +1,26 @@
+import { ac } from '../runtime';
+/**
+ * ## 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.
+ *
+ * @example
+ * ```
+ * const styles = cssMap({
+ *  text: { color: 'var(--ds-text)' },
+ *  primary: { color: 'var(--ds-text-brand)' },
+ * });
+ *
+ * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+ * ```
+ */
+export const cx = (...styles) => {
+    // At runtime TStyles is resolved down to strings, but not at compile time.
+    // We circumvent the type system here because of that.
+    const actualStyles = styles;
+    // The output should be a union type of passed in styles. This ensures the call
+    // site of xcss prop can raise violations when disallowed styles have been passed.
+    return ac(actualStyles);
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -78,7 +78,7 @@
     "@compiled/benchmark": "^1.1.0",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
-    "@types/react-dom": "^17.0.20",
+    "@types/react-dom": "^17.0.22",
     "expect-type": "^0.17.3",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",

package/src/css/__tests__/types.test.ts

@@ -1,4 +1,5 @@
 /** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { css } from '@compiled/react';
 import { expectTypeOf } from 'expect-type';
 

package/src/css-map/index.ts

@@ -1,37 +1,23 @@
-import type { Properties, AtRules } from 'csstype';
+import type * as CSS from 'csstype';
 
+import type { CSSPseudos, CSSProperties } from '../types';
 import { createSetupError } from '../utils/error';
+import type { CompiledStyles } from '../xcss-prop';
 
-import type { Pseudos } from './pseudos';
-
-/**
- * These are all the CSS props that will exist.
- * Only 'string' and 'number' are valid CSS values.
- *
- * @example
- * ```
- * const style: CssProps = {
- *  color: 'red',
- *  margin: 10,
- * };
- * ```
- */
-type CssProps = Readonly<Properties<string | number>>;
-
-type AllPseudos = { [key in Pseudos]?: CssProps & AllPseudos };
+type AllPseudos = { [key in CSSPseudos]?: CSSProperties & AllPseudos };
 
 // The `screen and (max-width: 768px)` part of `@media screen and (max-width: 768px)`.
 // Ideally we would do type checking to forbid this from containing the `@media` part,
 // but TypeScript doesn't provide a good way to do this.
 type AtRuleSecondHalf = string;
 type WhitelistedAtRule = {
-  [atRuleFirstHalf in AtRules]?: {
-    [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+  [atRuleFirstHalf in CSS.AtRules]?: {
+    [atRuleSecondHalf in AtRuleSecondHalf]: CSSProperties & AllPseudos & WhitelistedAtRule;
   };
 };
 type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
 
-type ExtendedSelector = { [key: string]: CssProps | ExtendedSelector } & {
+type ExtendedSelector = { [key: string]: CSSProperties | ExtendedSelector } & {
   /**
    * Using `selectors` is not valid here - you cannot nest a `selectors` object
    * inside another `selectors` object.
@@ -97,12 +83,6 @@ type ExtendedSelectors = {
   selectors?: ExtendedSelector;
 };
 
-type Variants<VariantName extends string> = Record<
-  VariantName,
-  CssProps & WhitelistedSelector & ExtendedSelectors
->;
-type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
-
 /**
  * ## cssMap
  *
@@ -111,16 +91,22 @@ type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
  *
  * @example
  * ```
- * const borderStyleMap = cssMap({
- *     none: { borderStyle: 'none' },
- *     solid: { borderStyle: 'solid' },
+ * const styles = cssMap({
+ *  none: { borderStyle: 'none' },
+ *  solid: { borderStyle: 'solid' },
  * });
- * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * const Component = ({ borderStyle }) => <div css={styles[borderStyle]} />
  *
  * <Component borderStyle="solid" />
  * ```
  */
-
-export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>> {
+export default function cssMap<
+  TStyles extends Record<string, CSSProperties & WhitelistedSelector & ExtendedSelectors>
+>(
+  _styles: TStyles
+): {
+  readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+} {
   throw createSetupError();
 }

package/src/index.ts

@@ -10,6 +10,7 @@ export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
+export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, 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.