From 9609b1a579c02f529ec00a5a2ca1d207d4f8bf83 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Sun, 16 Jan 2022 20:32:26 -0500
Subject: [PATCH] feat(theme-ui): Add sx prop to BaseStyles component

---
 packages/theme-ui/src/index.ts                  | 17 +++++++++++------
 .../theme-ui/test/__snapshots__/index.tsx.snap  | 13 +++++++++++++
 packages/theme-ui/test/index.tsx                | 15 +++++++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
index 10deda679..7c8a3e0cb 100644
--- a/packages/theme-ui/src/index.ts
+++ b/packages/theme-ui/src/index.ts
@@ -1,4 +1,8 @@
-import { jsx as coreJsx, ThemeUIJSX } from '@theme-ui/core'
+import {
+  jsx as coreJsx,
+  ThemeUIJSX,
+  type ThemeUIStyleObject,
+} from '@theme-ui/core'
 export {
   __ThemeUIContext,
   merge,
@@ -29,7 +33,9 @@ export { ThemeProvider } from '@theme-ui/theme-provider'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'
 
-export const BaseStyles = (props: Record<string, unknown>) =>
+export const BaseStyles = (
+  props: Record<string, unknown> & { sx?: ThemeUIStyleObject }
+) =>
   jsx('div', {
     ...props,
     sx: {
@@ -37,6 +43,7 @@ export const BaseStyles = (props: Record<string, unknown>) =>
       lineHeight: 'body',
       fontWeight: 'body',
       variant: 'styles',
+      ...props.sx,
     },
   })
 
@@ -50,10 +57,8 @@ export declare namespace jsx {
       extends ThemeUIJSX.ElementAttributesProperty {}
     export interface ElementChildrenAttribute
       extends ThemeUIJSX.ElementChildrenAttribute {}
-    export type LibraryManagedAttributes<
-      C,
-      P
-    > = ThemeUIJSX.LibraryManagedAttributes<C, P>
+    export type LibraryManagedAttributes<C, P> =
+      ThemeUIJSX.LibraryManagedAttributes<C, P>
     export interface IntrinsicAttributes
       extends ThemeUIJSX.IntrinsicAttributes {}
     export interface IntrinsicClassAttributes<T>
diff --git a/packages/theme-ui/test/__snapshots__/index.tsx.snap b/packages/theme-ui/test/__snapshots__/index.tsx.snap
index 45ea61dd7..f52646d68 100644
--- a/packages/theme-ui/test/__snapshots__/index.tsx.snap
+++ b/packages/theme-ui/test/__snapshots__/index.tsx.snap
@@ -12,6 +12,19 @@ exports[`BaseStyles renders 1`] = `
 />
 `;
 
+exports[`BaseStyles renders sx prop styles 1`] = `
+.emotion-0 {
+  font-family: body;
+  line-height: body;
+  font-weight: body;
+  color: var(--theme-ui-colors-custom);
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`creates non-standard components 1`] = `
 .emotion-0 {
   color: tomato;
diff --git a/packages/theme-ui/test/index.tsx b/packages/theme-ui/test/index.tsx
index 2137d3d1a..f5dfb5737 100644
--- a/packages/theme-ui/test/index.tsx
+++ b/packages/theme-ui/test/index.tsx
@@ -217,6 +217,21 @@ test('BaseStyles renders', () => {
   expect(json).toMatchSnapshot()
 })
 
+test('BaseStyles renders sx prop styles', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      theme={{
+        colors: {
+          custom: 'tomato',
+        },
+      }}
+    >
+      <BaseStyles sx={{ color: 'custom' }} />
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+})
+
 test('custom pragma adds styles', () => {
   const json = renderJSON(
     jsx('div', {