refactor: move Theme to @theme-ui/css

Author: hasparus

packages/color/package.json

@@ -10,7 +10,6 @@
     "watch": "microbundle watch --no-compress"
   },
   "dependencies": {
-    "@theme-ui/core": "^0.3.1",
     "@theme-ui/css": "^0.3.1",
     "polished": "^3.4.1"
   },

packages/color/src/declarations.d.ts

@@ -1,6 +1,5 @@
 import * as P from 'polished'
-import { get } from '@theme-ui/css'
-import { Theme } from '@theme-ui/core'
+import { get, Theme } from '@theme-ui/css'
 
 const g = (t: Theme, c: string) =>
   get(t, `colors.${c}`, c)

packages/color/src/index.ts

@@ -4,15 +4,14 @@ import {
   InterpolationWithTheme,
 } from '@emotion/core'
 // @ts-ignore
-import { css } from '@theme-ui/css'
+import { css, Theme } from '@theme-ui/css'
 import React from 'react'
 import deepmerge from 'deepmerge'
 import { version as __EMOTION_VERSION__ } from '@emotion/core/package.json'
-import { Theme } from './theme'
 
 import './react-jsx'
 
-export * from './theme'
+export * from './types'
 
 const getCSS = props => {
   if (!props.sx && !props.css) return undefined

packages/core/src/index.ts

@@ -0,0 +1,55 @@
+import { SystemStyleObject } from '@styled-system/css'
+
+/**
+ * The `sx` prop accepts a `SxStyleProp` object and properties that are part of
+ * the `Theme` will be transformed to their corresponding values. Other valid
+ * CSS properties are also allowed.
+ */
+export type SxStyleProp = SystemStyleObject
+
+export interface SxProps {
+  /**
+   * The sx prop lets you style elements inline, using values from your
+   * theme. To use the sx prop, add the custom pragma as a comment to the
+   * top of your module and import the jsx function.
+   *
+   * ```ts
+   * // @jsx jsx
+   *
+   * import { jsx } from 'theme-ui'
+   * ```
+   */
+  sx?: SxStyleProp
+}
+
+export interface IntrinsicSxElements {
+  p: JSX.IntrinsicElements['p'] & SxProps
+  b: JSX.IntrinsicElements['b'] & SxProps
+  i: JSX.IntrinsicElements['i'] & SxProps
+  a: JSX.IntrinsicElements['a'] & SxProps
+  h1: JSX.IntrinsicElements['h1'] & SxProps
+  h2: JSX.IntrinsicElements['h2'] & SxProps
+  h3: JSX.IntrinsicElements['h3'] & SxProps
+  h4: JSX.IntrinsicElements['h4'] & SxProps
+  h5: JSX.IntrinsicElements['h5'] & SxProps
+  h6: JSX.IntrinsicElements['h6'] & SxProps
+  img: JSX.IntrinsicElements['img'] & SxProps
+  pre: JSX.IntrinsicElements['pre'] & SxProps
+  code: JSX.IntrinsicElements['code'] & SxProps
+  ol: JSX.IntrinsicElements['ol'] & SxProps
+  ul: JSX.IntrinsicElements['ul'] & SxProps
+  li: JSX.IntrinsicElements['li'] & SxProps
+  blockquote: JSX.IntrinsicElements['blockquote'] & SxProps
+  hr: JSX.IntrinsicElements['hr'] & SxProps
+  table: JSX.IntrinsicElements['table'] & SxProps
+  tr: JSX.IntrinsicElements['tr'] & SxProps
+  th: JSX.IntrinsicElements['th'] & SxProps
+  td: JSX.IntrinsicElements['td'] & SxProps
+  em: JSX.IntrinsicElements['em'] & SxProps
+  strong: JSX.IntrinsicElements['strong'] & SxProps
+  div: JSX.IntrinsicElements['div'] & SxProps
+  delete: JSX.IntrinsicElements['div'] & SxProps
+  inlineCode: JSX.IntrinsicElements['div'] & SxProps
+  thematicBreak: JSX.IntrinsicElements['div'] & SxProps
+  root: JSX.IntrinsicElements['div'] & SxProps
+}

packages/core/src/theme.ts

@@ -1,8 +1,10 @@
 {
   "name": "@theme-ui/css",
   "version": "0.3.1",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "prepare": "microbundle --no-compress",
@@ -12,5 +14,8 @@
   "license": "MIT",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "csstype": "^2.5.7"
   }
 }

packages/core/src/types.ts

@@ -1,7 +1,19 @@
-export const get = (obj, key, def, p, undef) => {
-  key = key && key.split ? key.split('.') : [key]
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef
+import * as CSS from 'csstype'
+
+import { SystemStyleObject, UseThemeFunction, Theme } from './types'
+
+export * from './types'
+
+export function get(
+  obj: object,
+  key: string | number,
+  def?: unknown,
+  p?: number,
+  undef?: unknown
+): any {
+  const path = key && typeof key === 'string' ? key.split('.') : [key]
+  for (p = 0; p < path.length; p++) {
+    obj = obj ? (obj as any)[path[p]] : undef
   }
   return obj === undef ? def : obj
 }
@@ -29,7 +41,8 @@ const aliases = {
   pl: 'paddingLeft',
   px: 'paddingX',
   py: 'paddingY',
-}
+} as const
+type Aliases = typeof aliases
 
 export const multiples = {
   marginX: ['marginLeft', 'marginRight'],
@@ -111,16 +124,17 @@ export const scales = {
   // svg
   fill: 'colors',
   stroke: 'colors',
-}
+} as const
+type Scales = typeof scales
 
-const positiveOrNegative = (scale, value) => {
+const positiveOrNegative = (scale: object, value: string | number) => {
   if (typeof value !== 'number' || value >= 0) {
     return get(scale, value, value)
   }
   const absolute = Math.abs(value)
   const n = get(scale, absolute, absolute)
   if (typeof n === 'string') return '-' + n
-  return n * -1
+  return Number(n) * -1
 }
 
 const transforms = [
@@ -143,9 +157,12 @@ const transforms = [
   {}
 )
 
-const responsive = styles => theme => {
-  const next = {}
-  const breakpoints = get(theme, 'breakpoints', defaultBreakpoints)
+const responsive = (styles: Exclude<SystemStyleObject, UseThemeFunction>) => (
+  theme?: Theme
+) => {
+  const next: Exclude<SystemStyleObject, UseThemeFunction> = {}
+  const breakpoints =
+    (theme && (theme.breakpoints as string[])) || defaultBreakpoints
   const mediaQueries = [
     null,
     ...breakpoints.map(n => `@media screen and (min-width: ${n})`),
@@ -175,8 +192,15 @@ const responsive = styles => theme => {
   return next
 }
 
-export const css = args => (props = {}) => {
-  const theme = { ...defaultTheme, ...(props.theme || props) }
+type CssPropsArgument = { theme: Theme } | Theme
+
+export const css = (args: SystemStyleObject = {}) => (
+  props: CssPropsArgument = {}
+): CSS.Properties => {
+  const theme: Theme = {
+    ...defaultTheme,
+    ...('theme' in props ? props.theme : props),
+  }
   let result = {}
   const obj = typeof args === 'function' ? args(theme) : args
   const styles = responsive(obj)(theme)
@@ -196,10 +220,10 @@ export const css = args => (props = {}) => {
       continue
     }
 
-    const prop = get(aliases, key, key)
-    const scaleName = get(scales, prop)
-    const scale = get(theme, scaleName, get(theme, prop, {}))
-    const transform = get(transforms, prop, get)
+    const prop = key in aliases ? aliases[key as keyof Aliases] : key
+    const scaleName = prop in scales ? scales[prop as keyof Scales] : undefined
+    const scale = get(theme, scaleName as any, get(theme, prop, {}))
+    const transform: any = get(transforms, prop, get)
     const value = transform(scale, val, val)
 
     if (multiples[prop]) {