split theme into a theme object and createTheme function

implydata · Jul 30, 2021 · ef78f97 · ef78f97
1 parent af256f0
commit ef78f97
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 72 deletions.
diff --git a/packages/core/src/createStitches.js b/packages/core/src/createStitches.js
@@ -45,21 +45,23 @@ export const createStitches = (config) => {
 			css: createComponentFunction(config, sheet),
 			globalCss: createGlobalFunction(config, sheet),
 			keyframes: createKeyframesFunction(config, sheet),
-			theme: createThemeFunction(config, sheet),
+			createTheme: createThemeFunction(config, sheet),
 			reset() {
 				sheet.reset()
-				defaultTheme.toString()
+				returnValue.theme.toString()
 			},
+			theme: {},
 			sheet,
 			config,
 			prefix,
 			getCssString: sheet.toString,
 			toString: sheet.toString,
 		}
 
-		const defaultTheme = returnValue.theme(theme)
-		Object.assign(returnValue.theme, defaultTheme)
-		defaultTheme.toString()
+		// initialize default theme
+		String(
+			returnValue.theme = returnValue.createTheme(theme)
+		)
 
 		return returnValue
 	})

diff --git a/packages/core/src/index.js b/packages/core/src/index.js
@@ -3,6 +3,8 @@ import { getCachedConfig } from './utility/getCachedConfig.js'
 export { createStitches } from './createStitches.js'
 export { defaultThemeMap } from './default/defaultThemeMap.js'
 
-export const css = (...args) => getCachedConfig().css(...args)
+export const createTheme = (...args) => getCachedConfig().createTheme(...args)
 export const globalCss = (...args) => getCachedConfig().globalCss(...args)
 export const keyframes = (...args) => getCachedConfig().keyframes(...args)
+
+export const css = (...args) => getCachedConfig().css(...args)
diff --git a/packages/core/tests/basic.js b/packages/core/tests/basic.js
@@ -8,7 +8,7 @@ describe('Basic', () => {
 		expect(stitches.css).toBeInstanceOf(Function)
 		expect(stitches.globalCss).toBeInstanceOf(Function)
 		expect(stitches.keyframes).toBeInstanceOf(Function)
-		expect(stitches.theme).toBeInstanceOf(Function)
+		expect(stitches.createTheme).toBeInstanceOf(Function)
 	})
 
 	test('Functionality of getCssString()', () => {
@@ -88,10 +88,10 @@ describe('Basic', () => {
 		expect(cssString1of1).toBe(`--stitches{--:1 k-jOrSYg}@media{@keyframes k-jOrSYg{0%{color:Black}100%{color:White}}}`)
 	})
 
-	test('Functionality of theme()', () => {
-		const { theme, getCssString } = createStitches()
+	test('Functionality of createTheme()', () => {
+		const { createTheme, getCssString } = createStitches()
 
-		const rendering1of1 = theme({
+		const rendering1of1 = createTheme({
 			colors: {
 				red: 'Crimson',
 				blue: 'DodgerBlue',

diff --git a/packages/core/tests/theme.js b/packages/core/tests/theme.js
@@ -1,10 +1,10 @@
 import { createStitches } from '../src/index.js'
 
 describe('Theme', () => {
-	test('Expected behavior for the theme() method', () => {
-		const { theme, getCssString } = createStitches()
+	test('Expected behavior for the createTheme() method', () => {
+		const { createTheme, getCssString } = createStitches()
 
-		const myTheme = theme('my', {
+		const myTheme = createTheme('my', {
 			colors: {
 				blue: 'dodgerblue',
 			},
@@ -17,7 +17,7 @@ describe('Theme', () => {
 		expect(myTheme.selector).toBe('.my')
 	})
 
-	test('theme() support for non-strings', () => {
+	test('createTheme() support for non-strings', () => {
 		{
 			const { getCssString } = createStitches({
 				theme: {

diff --git a/packages/core/tests/universal-prefix.js b/packages/core/tests/universal-prefix.js
@@ -4,25 +4,25 @@ describe('Prefix', () => {
 	const prefix = 'fusion'
 
 	test('Authors can define a prefix applied to themes', () => {
-		const { theme, toString } = createStitches({ prefix })
+		const { createTheme, toString } = createStitches({ prefix })
 
 		expect(toString()).toBe('')
 
 		const hash = 'iknykm'
 
-		expect(theme({ colors: { red: 'tomato' } }).toString()).toBe(`${prefix}-t-${hash}`)
+		expect(createTheme({ colors: { red: 'tomato' } }).toString()).toBe(`${prefix}-t-${hash}`)
 
 		expect(toString()).toBe(`--stitches{--:0 fusion-t-iknykm}@media{.${prefix}-t-${hash}{--fusion-colors-red:tomato}}`)
 	})
 
 	test('Authors can define a prefix not applied to named themes', () => {
-		const { theme, toString } = createStitches({ prefix })
+		const { createTheme, toString } = createStitches({ prefix })
 
 		expect(toString()).toBe('')
 
 		const themeName = 'my-theme-name'
 
-		const myTheme = theme(themeName, { colors: { red: 'tomato' } })
+		const myTheme = createTheme(themeName, { colors: { red: 'tomato' } })
 
 		expect(myTheme.toString()).toBe(`${themeName}`)
 

diff --git a/packages/core/tests/universal-serialization.js b/packages/core/tests/universal-serialization.js
@@ -2,7 +2,7 @@ import { createStitches } from '../src/index.js'
 
 describe('Serialization', () => {
 	const sheet = createStitches()
-	const { css, getCssString, toString, theme } = sheet
+	const { css, getCssString, toString, createTheme } = sheet
 
 	const myComponent = css({
 		all: 'unset',
@@ -12,7 +12,7 @@ describe('Serialization', () => {
 	})
 	const myComponentClassName = 'c-cLikna'
 
-	const myTheme = theme({
+	const myTheme = createTheme({
 		colors: {
 			blue: 'dodgerblue',
 		},

diff --git a/packages/core/tests/universal-tokens.js b/packages/core/tests/universal-tokens.js
@@ -234,9 +234,9 @@ describe('Tokens', () => {
 	})
 
 	test('Authors can use tokens from a new theme object', () => {
-		const { globalCss, theme, getCssString } = createStitches()
+		const { globalCss, createTheme, getCssString } = createStitches()
 
-		const mytheme = theme('my-theme', {
+		const mytheme = createTheme('my-theme', {
 			space: {
 				sp1: '100px',
 				sp2: '200px',

diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
@@ -38,11 +38,14 @@ export type ScaleValue<K> = { readonly [CSSUtil.$$ScaleValue]: K }
 /** Returns a type that suggests variants from a component as possible prop values. */
 export type VariantProps<Component> = StyledComponent.TransformProps<Component[StyledComponent.$$StyledComponentProps], Component[StyledComponent.$$StyledComponentMedia]>
 
+/** Map of CSS properties to token scales. */
+export declare const defaultThemeMap: DefaultThemeMap
+
 /** Returns a library used to create styles. */
 export declare const createStitches: CreateStitches
 
-/** Map of CSS properties to token scales. */
-export declare const defaultThemeMap: DefaultThemeMap
+/** Returns an object representing a theme. */
+export declare const createTheme: Sheet['createTheme']
 
 /** Returns a function that applies globalCss styles. */
 export declare const globalCss: Sheet['globalCss']

diff --git a/packages/core/types/sheet.d.ts b/packages/core/types/sheet.d.ts
@@ -37,48 +37,54 @@ export default interface Sheet<
 			name: string
 		}
 	},
-	theme: string & {
-		(
-			nameOrScalesArg0: (
+	createTheme: {
+		<
+			Argument0 extends (
 				| string
 				| (
-					& {
-						[scale in keyof Theme]?: {
-							[token in keyof Theme[scale]]?: boolean | number | string
-						} & {
-							[token in keyof number | string]: boolean | number | string
+					{
+						[Scale in keyof Theme]?: {
+							[Token in keyof Theme[Scale]]?: boolean | number | string
 						}
-					}
-					& {
+					} & {
 						[scale in string]: {
-							[token in keyof number | string]: boolean | number | string
+							[token in number | string]: boolean | number | string
 						}
 					}
 				)
 			),
-			nameOrScalesArg1?: (
+			Argument1 extends (
 				| string
 				| (
-					& {
-						[scale in keyof Theme]?: {
-							[token in keyof number | string]: boolean | number | string
+					{
+						[Scale in keyof Theme]?: {
+							[Token in keyof Theme[Scale]]?: boolean | number | string
 						}
-					}
-					& {
+					} & {
 						[scale in string]: {
-							[token in keyof number | string]: boolean | number | string
+							[token in number | string]: boolean | number | string
 						}
 					}
 				)
 			)
+		>(
+			nameOrScalesArg0: Argument0,
+			nameOrScalesArg1?: Argument1
 		):
 			& string
 			& {
 				className: string
 				selector: string
 			}
-			& ThemeTokens<Extract<typeof nameOrScalesArg0 | typeof nameOrScalesArg1, { [scale: string] : unknown }>, Prefix>
-	} & {
+			& (
+				Argument0 extends {}
+					? ThemeTokens<Argument0, Prefix>
+				: Argument1 extends {}
+					? ThemeTokens<Argument1, Prefix>
+				: {}
+			)
+	}
+	theme: string & {
 		[Scale in keyof Theme]: {
 			[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
 		}
@@ -132,3 +138,14 @@ export default interface Sheet<
 		>
 	},
 }
+
+type ThemeTokens<Values, Prefix> = {
+	[Scale in keyof Values]: {
+		[Token in keyof Values[Scale]]: ThemeUtil.Token<
+			Token,
+			Values[Scale][Token],
+			Scale,
+			Prefix
+		>
+	}
+}
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
@@ -3,7 +3,9 @@ import { getCachedConfig } from './utility/getCachedConfig.js'
 export { createStitches } from './createStitches.js'
 export { defaultThemeMap } from '../../core/src/default/defaultThemeMap.js'
 
-export const css = (...args) => getCachedConfig().css(...args)
+export const createTheme = (...args) => getCachedConfig().createTheme(...args)
 export const globalCss = (...args) => getCachedConfig().globalCss(...args)
 export const keyframes = (...args) => getCachedConfig().keyframes(...args)
+
+export const css = (...args) => getCachedConfig().css(...args)
 export const styled = (...args) => getCachedConfig().styled(...args)
diff --git a/packages/react/tests/universal-serialization.js b/packages/react/tests/universal-serialization.js
@@ -2,7 +2,7 @@ import { createStitches } from '../src/index.js'
 
 describe('Serialization', () => {
 	const sheet = createStitches()
-	const { styled, getCssString, toString, theme } = sheet
+	const { styled, getCssString, toString, createTheme } = sheet
 
 	const myComponent = styled('button', {
 		all: 'unset',
@@ -12,7 +12,7 @@ describe('Serialization', () => {
 	})
 	const myComponentSelector = '.c-cLikna'
 
-	const myTheme = theme({
+	const myTheme = createTheme({
 		colors: {
 			blue: 'dodgerblue',
 		},

diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
@@ -38,11 +38,14 @@ export type ScaleValue<K> = { readonly [CSSUtil.$$ScaleValue]: K }
 /** Returns a type that suggests variants from a component as possible prop values. */
 export type VariantProps<Component> = StyledComponent.TransformProps<Component[StyledComponent.$$StyledComponentProps], Component[StyledComponent.$$StyledComponentMedia]>
 
+/** Map of CSS properties to token scales. */
+export declare const defaultThemeMap: DefaultThemeMap
+
 /** Returns a library used to create styles. */
 export declare const createStitches: CreateStitches
 
-/** Map of CSS properties to token scales. */
-export declare const defaultThemeMap: DefaultThemeMap
+/** Returns an object representing a theme. */
+export declare const createTheme: Sheet['createTheme']
 
 /** Returns a function that applies globalCss styles. */
 export declare const globalCss: Sheet['globalCss']

diff --git a/packages/react/types/sheet.d.ts b/packages/react/types/sheet.d.ts
@@ -37,48 +37,54 @@ export default interface Sheet<
 			name: string
 		}
 	},
-	theme: string & {
-		(
-			nameOrScalesArg0: (
+	createTheme: {
+		<
+			Argument0 extends (
 				| string
 				| (
-					& {
-						[scale in keyof Theme]?: {
-							[token in keyof Theme[scale]]?: boolean | number | string
-						} & {
-							[token in keyof number | string]: boolean | number | string
+					{
+						[Scale in keyof Theme]?: {
+							[Token in keyof Theme[Scale]]?: boolean | number | string
 						}
-					}
-					& {
+					} & {
 						[scale in string]: {
-							[token in keyof number | string]: boolean | number | string
+							[token in number | string]: boolean | number | string
 						}
 					}
 				)
 			),
-			nameOrScalesArg1?: (
+			Argument1 extends (
 				| string
 				| (
-					& {
-						[scale in keyof Theme]?: {
-							[token in keyof number | string]: boolean | number | string
+					{
+						[Scale in keyof Theme]?: {
+							[Token in keyof Theme[Scale]]?: boolean | number | string
 						}
-					}
-					& {
+					} & {
 						[scale in string]: {
-							[token in keyof number | string]: boolean | number | string
+							[token in number | string]: boolean | number | string
 						}
 					}
 				)
 			)
+		>(
+			nameOrScalesArg0: Argument0,
+			nameOrScalesArg1?: Argument1
 		):
 			& string
 			& {
 				className: string
 				selector: string
 			}
-			& ThemeTokens<Extract<typeof nameOrScalesArg0 | typeof nameOrScalesArg1, { [scale: string] : unknown }>, Prefix>
-	} & {
+			& (
+				Argument0 extends {}
+					? ThemeTokens<Argument0, Prefix>
+				: Argument1 extends {}
+					? ThemeTokens<Argument1, Prefix>
+				: {}
+			)
+	}
+	theme: string & {
 		[Scale in keyof Theme]: {
 			[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
 		}
@@ -211,8 +217,13 @@ export default interface Sheet<
 	}
 }
 
-type ThemeTokens<Theme extends object, Prefix extends string> = {
-	[Scale in keyof Theme]: {
-		[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
+type ThemeTokens<Values, Prefix> = {
+	[Scale in keyof Values]: {
+		[Token in keyof Values[Scale]]: ThemeUtil.Token<
+			Token,
+			Values[Scale][Token],
+			Scale,
+			Prefix
+		>
 	}
 }