fix: make var check ssr friendly (#908)

document and window are not defined in node environments, so trying to use ui-kit with an isomorphic framework like next will fail saying document/window is not defined. Adding a check that window is not undefined before trying to operate on document seems to fix the issue. There may be more places like this in ui-kit but this is all I've run up against so far.
d2iq · Dec 13, 2022 · 74d355c · 74d355c
1 parent 37984f8
commit 74d355c
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/utilities/getCSSVarValue.ts b/packages/utilities/getCSSVarValue.ts
@@ -1,10 +1,14 @@
 const getCSSVarValue = cssVar => {
-  if (document.documentElement !== null) {
-    // Get the content between the parentheses in "var()"
-    // and split the args from a string to an array
-    const cssVarArgsString = cssVar.match(/\(([^)]+)\)/)[1];
-    const cssVarArgs = cssVarArgsString.replace(/\s/g, "").split(",");
+  // Get the content between the parentheses in "var()"
+  // and split the args from a string to an array
+  const cssVarArgsString = cssVar.match(/\(([^)]+)\)/)[1];
+  const cssVarArgs = cssVarArgsString.replace(/\s/g, "").split(",");
 
+  if (typeof window === "undefined") {
+    return cssVarArgs[1];
+  }
+
+  if (document?.documentElement !== null) {
     // If there's a custom property defined on :root (<html>), return that.
     // Otherwise, return the fallback value.
     return (