fix: add SSR check before parsing and allowing CSSVariables

due to accessing window requirement

resolves #1805

Author: joshuaellis

packages/shared/src/helpers.ts

@@ -88,3 +88,11 @@ export const flushCalls = <T extends AnyFn>(
   queue: Set<T>,
   ...args: Parameters<T>
 ) => flush(queue, fn => fn(...args))
+
+// For server-side rendering: https://github.com/react-spring/zustand/pull/34
+// Deno support: https://github.com/pmndrs/zustand/issues/347
+
+export const isSSR = () =>
+  typeof window === 'undefined' ||
+  !window.navigator ||
+  /ServerSideRendering|^Deno\//.test(window.navigator.userAgent)

packages/shared/src/isAnimatedString.ts

@@ -1,5 +1,5 @@
 import * as G from './globals'
-import { is } from './helpers'
+import { is, isSSR } from './helpers'
 import { cssVariableRegex } from './regexs'
 
 // Not all strings can be animated (eg: {display: "none"})
@@ -8,7 +8,8 @@ export function isAnimatedString(value: unknown): value is string {
     is.str(value) &&
     (value[0] == '#' ||
       /\d/.test(value) ||
-      cssVariableRegex.test(value) ||
+      // Do not identify a CSS variable as an AnimatedString if its SSR
+      (!isSSR() && cssVariableRegex.test(value)) ||
       value in (G.colors || {}))
   )
 }

packages/shared/src/variableToRgba.ts

@@ -1,3 +1,4 @@
+import { isSSR } from './helpers'
 import { cssVariableRegex } from './regexs'
 
 /**
@@ -14,7 +15,7 @@ import { cssVariableRegex } from './regexs'
 export const variableToRgba = (input: string): string => {
   const [token, fallback] = parseCSSVariable(input)
 
-  if (!token) {
+  if (!token || isSSR()) {
     return input
   }