tighten up cssMap type

atlassian-labs · Sep 6, 2023 · bfd1cf8 · bfd1cf8
1 parent 7e212f7
commit bfd1cf8
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 12 deletions.
diff --git a/.changeset/red-yaks-relate.md b/.changeset/red-yaks-relate.md
@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Update `cssMap` type
diff --git a/examples/parcel/src/ui/css-map.jsx b/examples/parcel/src/ui/css-map.jsx
@@ -1,5 +1,9 @@
 import { css, cssMap } from '@compiled/react';
 
+const base = css({
+  backgroundColor: 'blue',
+});
+
 const styles = cssMap({
   danger: {
     color: 'red',
@@ -9,4 +13,4 @@ const styles = cssMap({
   },
 });
 
-export default ({ variant, children }) => <div css={css(styles[variant])}>{children}</div>;
+export default ({ variant, children }) => <div css={[base, styles[variant]]}>{children}</div>;
diff --git a/examples/webpack/src/ui/css-map.jsx b/examples/webpack/src/ui/css-map.jsx
@@ -1,5 +1,9 @@
 import { css, cssMap } from '@compiled/react';
 
+const base = css({
+  backgroundColor: 'blue',
+});
+
 const styles = cssMap({
   danger: {
     color: 'red',
@@ -9,4 +13,4 @@ const styles = cssMap({
   },
 });
 
-export default ({ variant, children }) => <div css={css(styles[variant])}>{children}</div>;
+export default ({ variant, children }) => <div css={[base, styles[variant]]}>{children}</div>;
diff --git a/packages/react/src/css-map/index.js.flow b/packages/react/src/css-map/index.js.flow
@@ -4,7 +4,37 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { CSSProps, CssObject } from '../types';
+import * as CSS from 'csstype';
+/**
+ * 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,
+ * };
+ * ```
+ */
+declare type CssProps = $ReadOnly<CSS.Properties<string, number>>;
+/**
+ * Recursively typed CSS object because nested objects are allowed.
+ * @example ```
+ * const style: CssObject = {
+ *  "@media screen and (min-width: 480px)": {
+ *    ":hover": {
+ *      color: 'red'
+ *   }
+ *  }
+ * }
+ * ```
+ */
+declare type CssObject = $ReadOnly<
+  | {
+      [key: string]: CssObject,
+    }
+  | CssProps
+>;
+declare type returnType<T: string> = { [key: T]: CssProps };
 /**
  * ## cssMap
  *
@@ -20,7 +50,6 @@ import type { CSSProps, CssObject } from '../types';
  * <Component borderStyle="solid" />
  * ```
  */
-declare type returnType<T: string, P> = { [key: T]: CSSProps<P> };
-declare export default function cssMap<T: string, TProps>(_styles: {
-  [key: T]: CssObject<TProps>,
-}): $ReadOnly<returnType<T, TProps>>;
+declare export default function cssMap<T: string>(_styles: { [key: T]: CssObject }): $ReadOnly<
+  returnType<T>
+>;
diff --git a/packages/react/src/css-map/index.ts b/packages/react/src/css-map/index.ts
@@ -1,6 +1,44 @@
-import type { CSSProps, CssObject } from '../types';
+import type * as CSS from 'csstype';
+
 import { createSetupError } from '../utils/error';
 
+/**
+ * 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<CSS.Properties<string, number>>;
+
+/**
+ * Recursively typed CSS object because nested objects are allowed.
+ *
+ * @example
+ * ```
+ * const style: CssObject = {
+ *  "@media screen and (min-width: 480px)": {
+ *    ":hover": {
+ *      color: 'red'
+ *   }
+ *  }
+ * }
+ * ```
+ */
+type CssObject = Readonly<
+  | {
+      [key: string]: CssObject;
+    }
+  | CssProps
+>;
+
+type returnType<T extends string> = Record<T, CssProps>;
+
 /**
  * ## cssMap
  *
@@ -18,10 +56,9 @@ import { createSetupError } from '../utils/error';
  * <Component borderStyle="solid" />
  * ```
  */
-type returnType<T extends string, P> = Record<T, CSSProps<P>>;
 
-export default function cssMap<T extends string, TProps = unknown>(
-  _styles: Record<T, CssObject<TProps>>
-): Readonly<returnType<T, TProps>> {
+export default function cssMap<T extends string>(
+  _styles: Record<T, CssObject>
+): Readonly<returnType<T>> {
   throw createSetupError();
 }