feat(css): add makeTheme constrained identity function

Defined presets in a typesafe way. You can read more on CIFs at: https://kentcdodds.com/blog/how-to-write-a-constrained-identity-function-in-typescript
system-ui · Jul 27, 2021 · 54af5ba · 54af5ba
1 parent d195a96
commit 54af5ba
Show file tree

Hide file tree

Showing 44 changed files with 1,370 additions and 1,356 deletions.
diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts
@@ -1,7 +1,7 @@
 import * as P from 'polished'
 import { ColorModesScale, get, Theme } from '@theme-ui/css'
 
-type Color = ColorModesScale['primary']
+type Color = ColorModesScale[string]
 
 /**
  * Get color from theme.colors
@@ -69,7 +69,7 @@ export const desaturate = (c: Color, n: number) => (t: Theme) =>
 /**
  * Saturate a color by an amount 0–1
  */
-export const saturate = (c: Color, n: number) => (t: Theme) => 
+export const saturate = (c: Color, n: number) => (t: Theme) =>
   P.saturate(n, getColor(t, c))
 
 /**
@@ -94,8 +94,10 @@ export const alpha = (c: Color, n: number) => (t: Theme) =>
 /**
  * Mix two colors by a specific ratio
  */
-export const mix = (a: Color, b: Color, n = 0.5) => (t: Theme) =>
-  P.mix(n, getColor(t, a), getColor(t, b))
+export const mix =
+  (a: Color, b: Color, n = 0.5) =>
+  (t: Theme) =>
+    P.mix(n, getColor(t, a), getColor(t, b))
 
 /**
  * Get the complement of a color

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -16,5 +16,11 @@
     "@emotion/react": "^11.1.1",
     "csstype": "^3.0.5"
   },
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "utils.ts"
+    ]
+  },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }
diff --git a/packages/css/src/utils.ts b/packages/css/src/utils.ts
@@ -0,0 +1,15 @@
+import type { ColorModesScale, Theme, ThemeStyles } from './types'
+
+/**
+ * Constrained identity function used to constrain user's theme type to Theme
+ * while preserving its exact type.
+ */
+export const makeTheme = <T extends Theme>(theme: T): T => theme
+
+/**
+ * Constrained identity function used to create a styles dictionary
+ * assignable to ThemeStyles while preserving its exact type.
+ */
+export const makeStyles = <T extends ThemeStyles>(styles: T): T => styles
+
+export const makeColorsScale = <T extends ColorModesScale>(colors: T) => colors
diff --git a/packages/css/utils/package.json b/packages/css/utils/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/theme-ui-css-utils.cjs.js",
+  "module": "dist/theme-ui-css-utils.esm.js"
+}
diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json
@@ -8,6 +8,9 @@
   "repository": "system-ui/theme-ui",
   "scripts": {},
   "source": "src/index.ts",
+  "peerDependencies": {
+    "@theme-ui/css": ">=0.10.0"
+  },
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/preset-base/src/index.ts b/packages/preset-base/src/index.ts
@@ -1,11 +1,13 @@
+import { makeTheme } from '@theme-ui/css/utils'
+
 const heading = {
   color: 'text',
   fontFamily: 'heading',
   lineHeight: 'heading',
   fontWeight: 'heading',
 }
 
-export const base = {
+export const base = makeTheme({
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
     body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -95,7 +97,7 @@ export const base = {
     img: {
       maxWidth: '100%',
     },
-  } as const,
-}
+  },
+})
 
 export default base
diff --git a/packages/preset-base/test/index.ts b/packages/preset-base/test/index.ts
diff --git a/packages/preset-bootstrap/package.json b/packages/preset-bootstrap/package.json
@@ -12,5 +12,8 @@
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "@theme-ui/css": ">=0.10.0"
+  },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }
diff --git a/packages/preset-bootstrap/src/index.ts b/packages/preset-bootstrap/src/index.ts
@@ -1,3 +1,5 @@
+import { makeStyles, makeTheme } from '@theme-ui/css/utils'
+
 export const baseColors = {
   white: '#fff',
   black: '#000',
@@ -131,7 +133,7 @@ const text = {
   display,
 }
 
-export const styles = {
+export const styles = makeStyles({
   root: {
     fontFamily: 'body',
     lineHeight: 'body',
@@ -208,9 +210,9 @@ export const styles = {
     maxWidth: '100%',
     height: 'auto',
   },
-} as const
+})
 
-export const bootstrap = {
+export const bootstrap = makeTheme({
   breakpoints,
   colors,
   space,
@@ -223,6 +225,6 @@ export const bootstrap = {
   radii,
   text,
   styles,
-}
+})
 
 export default bootstrap
diff --git a/packages/preset-bootstrap/test/index.ts b/packages/preset-bootstrap/test/index.ts
diff --git a/packages/preset-bulma/package.json b/packages/preset-bulma/package.json
@@ -11,6 +11,9 @@
   "dependencies": {
     "@theme-ui/preset-base": "0.10.0"
   },
+  "peerDependencies": {
+    "@theme-ui/css": ">=0.10.0"
+  },
   "publishConfig": {
     "access": "public"
   },