fix: make disable default style env variable work for client side bun…

…dler and nextjs (#787)

close #713

sandpack-react/src/styles/index.ts

@@ -12,11 +12,10 @@ import { createStitchesMock } from "./stitches-mock";
 export const THEME_PREFIX = "sp";
 
 const getNodeProcess = (): false | string | undefined => {
-  if (typeof process !== "undefined") {
-    return process.env.SANDPACK_BARE_COMPONENTS;
-  }
-
-  return false;
+  return (
+    process.env.SANDPACK_BARE_COMPONENTS ||
+    process.env.NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS
+  );
 };
 
 /**

website/docs/src/pages/getting-started/layout.mdx

@@ -34,7 +34,7 @@ This pattern is compatible with most modern styling systems, including Tailwind,
 
 `@codesanbdox/sandpack-react` relies on [@stitches/core](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return bare components, which will eliminate all Sandpack CSS style.
 
-To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components.
+To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable (`NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS` for Nextjs) as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components.
 
 ## Themes