Merge pull request #2457 from system-ui/filter-scale-tuples

Filter scale tuples in Theme type inside .sx prop

.github/workflows/ci.yml

@@ -13,15 +13,15 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: 'pnpm'
 
       - name: Install
@@ -74,18 +74,18 @@ jobs:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
-
-      - name: Prepare repository
-        run: git fetch --unshallow --tags
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 100
+          fetch-tags: true
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
@@ -105,6 +105,7 @@ jobs:
         # continue-on-error: true
         env:
           GITHUB_TOKEN: ${{ secrets.AUTO_RELEASE_GH_TOKEN }}
+          BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
         run: pnpm release
 
       - name: Check published prerelease

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/monorepo",
-  "version": "0.16.1",
+  "version": "0.16.2-scale-tuples.0",
   "private": true,
   "scripts": {
     "build": "preconstruct build",

packages/components/src/Box.tsx

@@ -2,7 +2,6 @@ import {
   ArrayInterpolation,
   CSSObject,
   Interpolation,
-  jsx,
   useTheme,
 } from '@emotion/react'
 import React, { forwardRef } from 'react'
@@ -12,6 +11,7 @@ import {
   ThemeUICSSProperties,
   ThemeUIStyleObject,
 } from '@theme-ui/css'
+import { Theme } from '@theme-ui/core'
 import type { Assign, ForwardRef } from './types'
 import type { __ThemeUIComponentsInternalProps } from './util'
 
@@ -59,7 +59,7 @@ export interface BoxOwnProps extends BoxSystemProps {
   as?: React.ElementType
   variant?: string
   css?: Interpolation<any>
-  sx?: ThemeUIStyleObject
+  sx?: ThemeUIStyleObject<Theme>
 }
 
 export interface BoxProps

packages/core/src/index.ts

@@ -23,7 +23,6 @@ export type {
   Scale,
   StylePropertyValue,
   TLengthStyledSystem,
-  Theme,
   ThemeDerivedStyles,
   ThemeStyles,
   ThemeUICSSObject,

packages/core/src/types.ts

@@ -1,5 +1,29 @@
 import { Interpolation } from '@emotion/react'
-import { ThemeUIStyleObject, Theme as ThemeUITheme } from '@theme-ui/css'
+import {
+  Scale,
+  ScaleDict,
+  ThemeUIStyleObject,
+  Theme as ThemeUITheme,
+} from '@theme-ui/css'
+
+export interface UserThemes {}
+
+/** @internal */
+export type _UserTheme = UserThemes[keyof UserThemes]
+
+/** Theme without array scales, so it's easier to read from inside of .sx prop */
+export type WidenedTheme = {
+  [P in keyof ThemeUITheme]: ThemeUITheme[P] extends Scale<infer R> | undefined
+    ? ScaleDict<R>
+    : ThemeUITheme[P]
+} & ThemeUITheme
+
+export type Theme<TTheme = {}> = _UserTheme extends never
+  ? ThemeUITheme<TTheme>
+  : _UserTheme
+
+/** @internal */
+export type _JSXTheme = _UserTheme extends never ? WidenedTheme : _UserTheme
 
 export interface SxProp {
   /**
@@ -8,7 +32,7 @@ export interface SxProp {
    *
    * @see https://theme-ui.com/sx-prop/
    */
-  sx?: ThemeUIStyleObject
+  sx?: ThemeUIStyleObject<_JSXTheme>
   /**
    * Theme UI uses Emotion's JSX function. You can pass styles to it directly
    * using `css` prop.

packages/core/test/react-jsx.tsx

@@ -4,8 +4,11 @@
  */
 /* eslint-disable no-lone-blocks */
 import { renderJSON, NotHas, Assert, expecter } from '@theme-ui/test-utils'
+import { matchers } from '@emotion/jest'
 
-import { SxProp, ThemeUIJSX } from '../src'
+import { SxProp, ThemeProvider, ThemeUIJSX } from '../src'
+
+expect.extend(matchers)
 
 describe('JSX', () => {
   test('accepts sx prop', () => {
@@ -30,6 +33,24 @@ describe('JSX', () => {
     ).toMatchSnapshot()
   })
 
+  test('sx prop gives a theme that can be read as array or object', () => {
+    const json = renderJSON(
+      <ThemeProvider
+        theme={{ shadows: { small: '0 0 4px rgba(0, 0, 0, .125)' } }}
+      >
+        <div
+          sx={(t) => ({
+            boxShadow: t.shadows?.small,
+            '&:hover': {
+              boxShadow: t.shadows?.[2],
+            },
+          })}
+        />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule('box-shadow', '0 0 4px rgba(0, 0, 0, .125)')
+  })
+
   test('accepts css prop', () => {
     const expectSnippet = expecter(
       `/** @jsxImportSource ./packages/core */

packages/css/src/index.ts

@@ -305,9 +305,12 @@ const transforms = [
 )
 
 const responsive =
-  (styles: Exclude<ThemeUIStyleObject, ThemeDerivedStyles>) =>
+  (styles: Exclude<ThemeUIStyleObject<Theme>, ThemeDerivedStyles<Theme>>) =>
   (theme?: Theme) => {
-    const next: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> = {}
+    const next: Exclude<
+      ThemeUIStyleObject<Theme>,
+      ThemeDerivedStyles<Theme>
+    > = {}
     const breakpoints =
       (theme && (theme.breakpoints as string[])) || defaultBreakpoints
     const mediaQueries = [
@@ -348,12 +351,12 @@ const responsive =
 type CssPropsArgument = { theme: Theme } | Theme
 
 export const css =
-  (args: ThemeUIStyleObject = {}) =>
+  <TTheme extends Theme<{}>>(args: ThemeUIStyleObject<TTheme> = {}) =>
   (props: CssPropsArgument = {}): CSSObject => {
-    const theme: Theme = {
+    const theme = {
       ...defaultTheme,
       ...('theme' in props ? props.theme : props),
-    }
+    } as TTheme
     // insert variant props before responsive styles, so they can be merged
     // we need to maintain order of the style props, so if a variant is place in the middle
     // of other props, it will extends its props at that same location order.