(css): Allow injecting UserTheme and typecheck colors against scale

CHANGELOG.md

@@ -20,6 +20,10 @@
   - `SxStyleProp`, an alias for `ThemeUIStyleObject` removed. Use `ThemeUIStyleObject` instead.
 - Fix: Add `sx` props types to all props accepting `className`. PR #1308
 - Fix WithPoorAsProp to work with ComponentProps utility type. PR #1308
+- Don't pass `false`, `undefined` and `null` to Emotion. Allow them as style values in TypeScript. PR #1090
+- Allow to inject user's exact theme type. PR #1090
+  - Add `theme.options.strictMode` object with configuration for Theme UI strict mode.
+  - TODO short excerpt from the docs on how to use it
 
 ## v0.5.0-alpha.2 2020-11-30
 

lerna.json

@@ -2,7 +2,5 @@
   "version": "0.6.0-alpha.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ]
+  "packages": ["packages/*"]
 }

package.json

@@ -45,7 +45,8 @@
     "prettier": "^2.2.0",
     "react-test-renderer": "^16.8.6",
     "ts-jest": "^26.4.4",
-    "typescript": "^4"
+    "typescript": "^4.1.2",
+    "ts-snippet": "^5.0.1"
   },
   "jest": {
     "preset": "ts-jest/presets/js-with-babel",
@@ -116,5 +117,8 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "resolutions": {
+    "typescript": "4.1.2"
   }
 }

packages/core/src/index.ts

@@ -31,6 +31,8 @@ export type {
   ThemeUIExtendedCSSProperties,
   ThemeUIStyleObject,
   VariantProperty,
+  BaseTheme,
+  UserTheme,
 } from '@theme-ui/css'
 export * from './types'
 

packages/css/package.json

@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "@emotion/react": "^11.1.1",
-    "csstype": "^3.0.5"
+    "csstype": "^3.0.5",
+    "ts-toolbelt": "^8.0.7"
   },
   "gitHead": "87e9ebb0cc66d8a5e1fcde7bb60f2077266aa437"
 }

packages/css/src/exact-theme.ts

@@ -0,0 +1,3 @@
+import { BaseTheme } from './types'
+
+export const makeTheme = <T extends BaseTheme>(t: T) => t

packages/css/src/index.ts

@@ -2,9 +2,13 @@ import {
   CSSObject,
   ThemeUIStyleObject,
   ThemeDerivedStyles,
-  Theme,
   ThemeUICSSObject,
+  Theme,
 } from './types'
+import { scales, Scales } from './scales'
+
+export { scales } from './scales'
+export type { Scales } from './scales'
 
 export * from './types'
 
@@ -58,139 +62,6 @@ export const multiples = {
   size: ['width', 'height'],
 }
 
-export const scales = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  columnRuleColor: 'colors',
-  opacity: 'opacities',
-  transition: 'transitions',
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginX: 'space',
-  marginY: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingX: 'space',
-  paddingY: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollPaddingX: 'space',
-  scrollPaddingY: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space',
-  fontFamily: 'fonts',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
-  lineHeight: 'lineHeights',
-  letterSpacing: 'letterSpacings',
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderWidth: 'borderWidths',
-  borderStyle: 'borderStyles',
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderTopWidth: 'borderWidths',
-  borderTopColor: 'colors',
-  borderTopStyle: 'borderStyles',
-  borderBottomWidth: 'borderWidths',
-  borderBottomColor: 'colors',
-  borderBottomStyle: 'borderStyles',
-  borderLeftWidth: 'borderWidths',
-  borderLeftColor: 'colors',
-  borderLeftStyle: 'borderStyles',
-  borderRightWidth: 'borderWidths',
-  borderRightColor: 'colors',
-  borderRightStyle: 'borderStyles',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStart: 'borders',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockStyle: 'borderStyles',
-  borderBlockWidth: 'borderWidths',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStart: 'borders',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineStyle: 'borderStyles',
-  borderInlineWidth: 'borderWidths',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii',
-  outlineColor: 'colors',
-  boxShadow: 'shadows',
-  textShadow: 'shadows',
-  zIndex: 'zIndices',
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  size: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes',
-  // svg
-  fill: 'colors',
-  stroke: 'colors',
-} as const
-type Scales = typeof scales
-
 const positiveOrNegative = (scale: object, value: string | number) => {
   if (typeof value !== 'number' || value >= 0) {
     if (typeof value === 'string' && value.startsWith('-')) {
@@ -234,7 +105,7 @@ const transforms = [
 
 const responsive = (
   styles: Exclude<ThemeUIStyleObject, ThemeDerivedStyles>
-) => (theme?: Theme) => {
+) => (theme: Theme) => {
   const next: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> = {}
   const breakpoints =
     (theme && (theme.breakpoints as string[])) || defaultBreakpoints
@@ -247,7 +118,7 @@ const responsive = (
     const key = k as keyof typeof styles
     let value = styles[key]
     if (typeof value === 'function') {
-      value = value(theme || {})
+      value = value(theme)
     }
 
     if (value == null) continue
@@ -262,22 +133,22 @@ const responsive = (
         continue
       }
       next[media] = next[media] || {}
-      if (value[i] == null) continue;
-      (next[media] as Record<string, any>)[key] = value[i]
+      if (value[i] == null) continue
+      ;(next[media] as Record<string, any>)[key] = value[i]
     }
   }
   return next
 }
 
-type CssPropsArgument = { theme: Theme } | Theme
+type CssPropsArgument = { theme?: Theme } | Theme
 
 export const css = (args: ThemeUIStyleObject = {}) => (
   props: CssPropsArgument = {}
 ): CSSObject => {
-  const theme: Theme = {
+  const theme = {
     ...defaultTheme,
     ...('theme' in props ? props.theme : props),
-  }
+  } as Theme
   let obj = typeof args === 'function' ? args(theme) : args
   let result: CSSObject = {}
 
@@ -298,10 +169,17 @@ export const css = (args: ThemeUIStyleObject = {}) => (
   } else {
     result = obj as CSSObject ;
   }
+
   const styles = responsive(result as ThemeUICSSObject)(theme)
   result = {}
+
   for (const key in styles) {
     const x = styles[key as keyof typeof styles]
+
+    if (x === false || x == null) {
+      continue
+    }
+
     const val = typeof x === 'function' ? x(theme) : x
 
     if (val && typeof val === 'object') {

packages/css/src/scales/borderStyles.ts

@@ -0,0 +1,81 @@
+import * as CSS from 'csstype'
+
+import { Theme } from '../types'
+
+import { ScaleProperty } from './scales-utility-types'
+
+export const borderStyles: Record<
+  keyof BorderStylesCSSProperties,
+  'borderStyles'
+> = {
+  borderStyle: 'borderStyles',
+  borderTopStyle: 'borderStyles',
+  borderBottomStyle: 'borderStyles',
+  borderLeftStyle: 'borderStyles',
+  borderRightStyle: 'borderStyles',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStyle: 'borderStyles',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStyle: 'borderStyles',
+}
+export type BorderStyle = ScaleProperty<Theme['borderStyles']>
+
+export interface BorderStylesCSSProperties {
+  borderStyle?: BorderStyle | CSS.Property.BorderStyle
+  /**
+   * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
+   */
+  borderTopStyle?: BorderStyle
+  /**
+   * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
+   */
+  borderBottomStyle?: BorderStyle | CSS.Property.BorderBottomStyle
+  /**
+   * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
+   */
+  borderLeftStyle?: BorderStyle | CSS.Property.BorderLeftStyle
+  /**
+   * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
+   */
+  borderRightStyle?: BorderStyle | CSS.Property.BorderRightStyle
+  borderBlockEndStyle?: BorderStyle | CSS.Property.BorderBlockEndStyle
+  borderBlockStartStyle?: BorderStyle | CSS.Property.BorderBlockStartStyle
+  borderBlockStyle?: BorderStyle | CSS.Property.BorderBlockStyle
+  borderInlineEndStyle?: BorderStyle | CSS.Property.BorderInlineEndStyle
+  borderInlineStartStyle?: BorderStyle | CSS.Property.BorderInlineStartStyle
+  borderInlineStyle?: BorderStyle | CSS.Property.BorderInlineStyle
+}