Fix packages/editor types and use CSS.Properties instead of Fallback

Author: hasparus

packages/css/src/types.ts

@@ -5,7 +5,7 @@
 
 import * as CSS from 'csstype'
 
-type StandardCSSProperties = CSS.PropertiesFallback<number | string>
+type StandardCSSProperties = CSS.Properties<number | string>
 
 /**
  * The `css` function accepts arrays as values for mobile-first responsive styles.

packages/editor/src/Styles.tsx

@@ -1,14 +1,15 @@
 /** @jsx jsx */
-import { jsx, useThemeUI } from 'theme-ui'
+import { jsx, useThemeUI, AllThemeUICSSProperties } from 'theme-ui'
 import { Fragment } from 'react'
 import Sx from './Sx'
 import { EditorContextValue } from './types'
 
-export default ({ tag = 'root' }) => {
+export default function Styles({ tag = 'root' }) {
   const context = useThemeUI() as EditorContextValue
   const { styles = {} } = context.theme || {}
 
-  const style = styles[tag] || {}
+  // unsafe
+  const style = (styles[tag] || {}) as AllThemeUICSSProperties
 
   const setStyle = next => {
     context.setTheme({

packages/editor/src/Sx/Space.tsx

@@ -1,12 +1,40 @@
 /** @jsx jsx */
-import { jsx, Theme, SxStyleProp } from 'theme-ui'
+import { jsx, SxStyleProp, AllThemeUICSSProperties } from 'theme-ui'
 import { useState, useEffect } from 'react'
 import { Field, Label, Checkbox } from '@theme-ui/components'
 
 export interface SpaceProps {
   tag?: string
   property?: 'margin' | 'padding'
-  value?: Theme['space']
+  value?: Partial<
+    Pick<
+      AllThemeUICSSProperties,
+      | 'paddingTop'
+      | 'marginTop'
+      | 'paddingBottom'
+      | 'marginBottom'
+      | 'paddingLeft'
+      | 'marginLeft'
+      | 'paddingRight'
+      | 'marginRight'
+      | 'paddingX'
+      | 'paddingY'
+      | 'marginX'
+      | 'marginY'
+      | 'mt'
+      | 'pt'
+      | 'mb'
+      | 'pb'
+      | 'ml'
+      | 'pl'
+      | 'mr'
+      | 'pr'
+      | 'px'
+      | 'py'
+      | 'mx'
+      | 'my'
+    >
+  >
   onChange: (sx: SxStyleProp) => void
 }
 

packages/editor/src/Sx/ThemeColorPicker.tsx

@@ -23,12 +23,13 @@ export const ThemeColorPicker = ({
   // const { colors } = theme || context.theme || {}
   const _theme = theme || context.theme || {}
   const colors = _theme.colors || {}
-  const value = props.value && (colors[props.value] || props.value)
+  // bug: only supports flat color scales
+  const value = String(props.value && (colors[props.value] || props.value))
   const options = [
     'transparent',
     ...Object.keys(colors)
       .map((key) => colors[key])
-      .filter((color) => typeof color === 'string')
+      .filter((color): color is string => typeof color === 'string')
       .filter((color) => /^#/.test(color)),
   ]
   const onChange = (color: ColorState) => {

packages/editor/src/Sx/Typography.tsx

@@ -4,19 +4,22 @@ import { Fragment } from 'react'
 import { Field } from '@theme-ui/components'
 import Combobox from '../Combobox'
 
-type OnChangeArg =
-  | { fontFamily: string }
-  | { fontSize: number }
-  | { fontWeight: string }
-  | { lineHeight: string }
+type TypographyPropsValue = {
+  fontFamily?: string
+  fontSize?: string | number
+  fontWeight?: string | number
+  lineHeight?: string | number
+}
+
+type OnChangeArg = {
+  [P in keyof TypographyPropsValue]: {
+    [K in P]: Exclude<TypographyPropsValue[P], undefined>
+  }
+}[keyof TypographyPropsValue]
+
 export interface TypographyProps {
   tag?: string
-  value?: {
-    fontFamily?: string
-    fontSize?: string | number
-    fontWeight?: string
-    lineHeight?: string
-  }
+  value?: TypographyPropsValue
   theme?: Theme
   onChange: (arg: OnChangeArg) => void
 }
@@ -40,7 +43,7 @@ export const SxTypography = ({
         name={prefixName('fontFamily')}
         label="Font Family"
         value={fontFamily || ''}
-        onChange={(fontFamily) => {
+        onChange={fontFamily => {
           onChange({ fontFamily })
         }}
         options={['inherit', ...Object.keys(fonts)]}
@@ -56,7 +59,7 @@ export const SxTypography = ({
           label="Font Size"
           value={fontSize || ''}
           type="number"
-          onChange={(e) => {
+          onChange={e => {
             const fontSize = Number(e.target.value)
             onChange({ fontSize })
           }}
@@ -65,7 +68,7 @@ export const SxTypography = ({
           name={prefixName('fontWeight')}
           label="Font Weight"
           value={fontWeight || ''}
-          onChange={(fontWeight) => {
+          onChange={fontWeight => {
             onChange({ fontWeight })
           }}
           options={['inherit', ...Object.keys(fontWeights)]}
@@ -74,7 +77,7 @@ export const SxTypography = ({
           name={prefixName('lineHeight')}
           label="Line Height"
           value={lineHeight || ''}
-          onChange={(lineHeight) => {
+          onChange={lineHeight => {
             onChange({ lineHeight })
           }}
           options={['inherit', ...Object.keys(lineHeights)]}

packages/editor/src/types.ts

@@ -1,5 +1,5 @@
 import { Theme, ContextValue } from 'theme-ui'
 
-export type EditorContextValue = ContextValue & {
+export interface EditorContextValue extends ContextValue {
   setTheme: React.Dispatch<Theme>
 }

packages/theme-ui/src/index.ts

@@ -22,7 +22,8 @@ export {
   CSSProperties,
   CSSPseudoSelectorProps,
   ResponsiveStyleValue,
-  SystemCssProperties,
+  AllThemeUICSSProperties,
+  ThemeUIRecursiveCSSProperties,
   SystemStyleObject,
   Theme,
   TLengthStyledSystem,