@compiled/react 0.16.2 → 0.16.3

package/src/css-map/index.ts

@@ -84,9 +84,9 @@ type ExtendedSelectors = {
 };
 
 /**
- * ## 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
@@ -96,9 +96,7 @@ type ExtendedSelectors = {
  *  solid: { borderStyle: 'solid' },
  * });
  *
- * const Component = ({ borderStyle }) => <div css={styles[borderStyle]} />
- *
- * <Component borderStyle="solid" />
+ * <div css={styles.solid} />
  * ```
  */
 export default function cssMap<

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 { createStrictAPI } from './create-strict-api';
 export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
 
 // Pass through the (classic) jsx runtime.

package/src/types.ts

@@ -95,9 +95,15 @@ export type CSSPseudos =
   | '&: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/src/xcss-prop/index.ts

@@ -3,19 +3,30 @@ import type * as CSS from 'csstype';
 import { ac } from '../runtime';
 import type { CSSPseudos, CSSProperties } from '../types';
 
-type XCSSItem<TStyleDecl extends keyof CSSProperties> = {
+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 | string | number
+    ?
+        | CompiledPropertyDeclarationReference
+        | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q])
     : never;
 };
 
 type XCSSPseudos<
   TAllowedProperties extends keyof CSSProperties,
   TAllowedPseudos extends CSSPseudos,
-  TRequiredProperties extends { requiredProperties: TAllowedProperties }
+  TRequiredProperties extends { requiredProperties: TAllowedProperties },
+  TCompiledTypedPseudo
 > = {
   [Q in CSSPseudos]?: Q extends TAllowedPseudos
-    ? MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']>
+    ? MarkAsRequired<
+        XCSSItem<
+          TAllowedProperties,
+          Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object
+        >,
+        TRequiredProperties['requiredProperties']
+      >
     : never;
 };
 
@@ -69,7 +80,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:
@@ -132,10 +143,24 @@ export type XCSSProp<
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
   } = 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>, TRequiredProperties['requiredProperties']> &
+  | (MarkAsRequired<
+      XCSSItem<TAllowedProperties, TCompiledTypedProperty>,
+      TRequiredProperties['requiredProperties']
+    > &
       MarkAsRequired<
-        XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties>,
+        XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>,
         TRequiredProperties['requiredPseudos']
       > &
       BlockedRules)
@@ -143,10 +168,8 @@ export type XCSSProp<
   | null
   | undefined;
 
-type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-
 /**
- * ## 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.