Remove zustand dependency

packages/create-styles/package.json

@@ -20,7 +20,6 @@
     "@emotion/is-prop-valid": "^0.8.8",
     "@wordpress/data": "^4.26.1",
     "@wordpress/is-shallow-equal": "^2.3.0",
-    "@wp-g2/substate": "^0.0.132",
     "@wp-g2/utils": "^0.0.132",
     "create-emotion": "^10.0.27",
     "emotion": "^10.0.27",

packages/create-styles/src/components/theme-provider/use-theme-styles-store.js

@@ -0,0 +1,36 @@
+import { useReducer } from 'react';
+
+/** @typedef {{ type: 'SET_THEME', theme: string }} SetThemeAction */
+
+/**
+ * @param {string} theme
+ * @return {SetThemeAction}
+ */
+export const setTheme = (theme) => ({
+	type: 'SET_THEME',
+	theme,
+});
+
+/**
+ * @param {{ theme: string }} state
+ * @param {SetThemeAction} action
+ */
+const reducer = (state, action) => {
+	switch (action.type) {
+		case 'SET_THEME': {
+			return {
+				...state,
+				theme: action.theme,
+			};
+		}
+		default: {
+			return state;
+		}
+	}
+};
+
+const useThemeStylesStore = (initialTheme = '') => {
+	return useReducer(reducer, { theme: initialTheme });
+};
+
+export default useThemeStylesStore;

packages/create-styles/src/components/theme-provider/utils.js

@@ -1,10 +1,10 @@
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
-import { createStore } from '@wp-g2/substate';
 import { is, useIsomorphicLayoutEffect } from '@wp-g2/utils';
 import { useEffect, useRef } from 'react';
 
 import { transformValuesToVariablesString } from '../../create-style-system/utils';
 import { useReducedMotion } from '../../hooks';
+import useThemeStylesStore, { setTheme } from './use-theme-styles-store';
 
 /**
  * @typedef UseColorBlindModeProps
@@ -134,25 +134,6 @@ export function useReducedMotionMode({
 	}, [isGlobal, isReducedMotion, ref]);
 }
 
-/**
- * @param {string} initialTheme
- * @returns {import('@wp-g2/substate').UseStore<{ theme: string, setTheme: (next: string) => void }>}
- */
-function createThemeStore(initialTheme = '') {
-	return createStore((set) => ({
-		theme: initialTheme,
-		setTheme: (/** @type {string} */ next) => {
-			set(() => {
-				return { theme: next };
-			});
-		},
-	}));
-}
-
-export function useThemeStylesStore() {
-	return useRef(createThemeStore());
-}
-
 /**
  * @typedef UseThemeStyles
  * @property {import('create-emotion').Emotion['injectGlobal']} injectGlobal
@@ -172,8 +153,7 @@ export function useThemeStyles({
 	theme = {},
 	selector = ':root',
 }) {
-	const store = useThemeStylesStore();
-	const { setTheme: setThemeStyles, theme: themeStyles } = store.current();
+	const [{ theme: themeStyles }, dispatch] = useThemeStylesStore();
 
 	/**
 	 * Used to track/compare changes for theme prop changes.
@@ -241,9 +221,9 @@ export function useThemeStyles({
 			 * Otherwise, we can set it to the themeStyles state, which will be
 			 * rendered as custom properties on the ThemeProvider (HTMLDivElement).
 			 */
-			setThemeStyles(nextThemeHtml);
+			dispatch(setTheme(nextThemeHtml));
 		}
-	}, [injectGlobal, isGlobal, setThemeStyles, theme]);
+	}, [injectGlobal, isGlobal, dispatch, theme]);
 
 	return themeStyles;
 }