Custom root & shadow DOM support (#832)

packages/core/src/createStitches.js

@@ -34,6 +34,7 @@ export const createStitches = (config) => {
 			theme,
 			themeMap,
 			utils,
+			root,
 		}
 
 		/** Internal stylesheet. */

packages/core/src/utility/createMemo.js

@@ -1,13 +1,13 @@
-const stringifyReplacer = (name, data) => (typeof data === 'function' ? { '()': Function.prototype.toString.call(data) } : data)
+import { safeJsonStringify } from './safeJsonStringify.js'
 
-const stringify = (value) => JSON.stringify(value, stringifyReplacer)
+const stringifyReplacer = (name, data) => (typeof data === 'function' ? { '()': Function.prototype.toString.call(data) } : data)
 
 /** @type {() => <T = any, A = any[], F = (T, ...A) => any>(value: T, apply: F, ...args: A) => ReturnType<F>} */
 export const createMemo = () => {
 	const cache = Object.create(null)
 
 	return (value, apply, ...args) => {
-		const vjson = stringify(value)
+		const vjson = safeJsonStringify(value, stringifyReplacer)
 
 		return vjson in cache ? cache[vjson] : (cache[vjson] = apply(value, ...args))
 	}

packages/core/src/utility/safeJsonStringify.js

@@ -0,0 +1,63 @@
+// https://github.com/debitoor/safe-json-stringify/blob/master/index.js
+import { hasOwn } from './hasOwn.js'
+
+function throwsMessage(err) {
+	return '[Throws: ' + (err ? err.message : '?') + ']'
+}
+
+function safeGetValueFromPropertyOnObject(obj, property) {
+	if (hasOwn(obj, property)) {
+		try {
+			return obj[property]
+		} catch (error) {
+			return throwsMessage(error)
+		}
+	}
+	return obj[property]
+}
+
+function ensureProperties(obj) {
+	const seen = [] // store references to objects we have seen before
+
+	function visit(obj) {
+		if (obj === null || typeof obj !== 'object') {
+			return obj
+		}
+
+		if (seen.indexOf(obj) !== -1) {
+			return '[Circular]'
+		}
+
+		seen.push(obj)
+
+		if (typeof obj.toJSON === 'function') {
+			try {
+				const result = visit(obj.toJSON())
+				seen.pop()
+				return result
+			} catch(err) {
+				return throwsMessage(err)
+			}
+		}
+
+		if (Array.isArray(obj)) {
+			const result = obj.map(visit)
+			seen.pop()
+			return result
+		}
+
+		const result = Object.keys(obj).reduce(function(acc, prop) {
+			// prevent faulty defined getter properties
+			acc[prop] = visit(safeGetValueFromPropertyOnObject(obj, prop))
+			return acc
+		}, {})
+		seen.pop()
+		return result
+	}
+
+	return visit(obj)
+}
+
+export const safeJsonStringify = (data, replacer, space) => {
+	return JSON.stringify(ensureProperties(data), replacer, space)
+}

packages/core/tests/issue-832.js

@@ -0,0 +1,13 @@
+import { createStitches } from '../src/index.js'
+import { createMemo } from '../src/utility/createMemo.js'
+
+describe('Issue #832', () => {
+	test('Circular object bug reproduction', () => {
+		const circularObject = { }
+		circularObject.self = circularObject
+
+		expect(() => JSON.stringify(circularObject)).toThrow()
+		expect(() => createMemo(circularObject)).toNotThrow()
+		expect(() => createStitches(circularObject)).toNotThrow()
+	})
+})

packages/core/types/config.d.ts

@@ -44,6 +44,9 @@ declare namespace ConfigType {
 			[K in keyof CSSUtil.CSSProperties]?: CSSUtil.CSSProperties[K] | V
 		}) : never
 	}
+
+	/** Root interface. */
+	export type Root<T = Document> = T extends DocumentOrShadowRoot ? T : DocumentOrShadowRoot
 }
 
 /** Default ThemeMap. */
@@ -197,14 +200,16 @@ export type CreateStitches = {
 		Media extends {} = {},
 		Theme extends {} = {},
 		ThemeMap extends {} = DefaultThemeMap,
-		Utils extends {} = {}
+		Utils extends {} = {},
+		Root extends DocumentOrShadowRoot = Document
 	>(
 		config?: {
 			prefix?: ConfigType.Prefix<Prefix>
 			media?: ConfigType.Media<Media>
 			theme?: ConfigType.Theme<Theme>
 			themeMap?: ConfigType.ThemeMap<ThemeMap>
 			utils?: ConfigType.Utils<Utils>
+			root?: ConfigType.Root<Root>
 		}
 	): Stitches<Prefix, Media, Theme, ThemeMap, Utils>
 }

packages/react/types/config.d.ts

@@ -44,6 +44,9 @@ declare namespace ConfigType {
 			[K in keyof CSSUtil.CSSProperties]?: CSSUtil.CSSProperties[K] | V
 		}) : never
 	}
+
+	/** Root interface. */
+	export type Root<T = Document> = T extends DocumentOrShadowRoot ? T : DocumentOrShadowRoot
 }
 
 /** Default ThemeMap. */
@@ -197,14 +200,16 @@ export type CreateStitches = {
 		Media extends {} = {},
 		Theme extends {} = {},
 		ThemeMap extends {} = DefaultThemeMap,
-		Utils extends {} = {}
+		Utils extends {} = {},
+		Root extends DocumentOrShadowRoot = Document
 	>(
 		config?: {
 			prefix?: ConfigType.Prefix<Prefix>
 			media?: ConfigType.Media<Media>
 			theme?: ConfigType.Theme<Theme>
 			themeMap?: ConfigType.ThemeMap<ThemeMap>
 			utils?: ConfigType.Utils<Utils>
+			root?: ConfigType.Root<Root>
 		}
 	): Stitches<Prefix, Media, Theme, ThemeMap, Utils>
 }