From 467b044ee0834fbb3d9d56b9f3a2d41695c1b652 Mon Sep 17 00:00:00 2001 From: Jokcy Date: Wed, 1 Mar 2023 20:07:23 +0800 Subject: [PATCH 1/2] make disable default style env variable work for client side bundler and nextjs --- sandpack-react/src/styles/index.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/sandpack-react/src/styles/index.ts b/sandpack-react/src/styles/index.ts index 97873ca80..d7606e17c 100644 --- a/sandpack-react/src/styles/index.ts +++ b/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 + ); }; /** From c95a960a4d4ccee1b39ee11542f583db45cbffcb Mon Sep 17 00:00:00 2001 From: Jokcy Date: Thu, 2 Mar 2023 09:07:14 +0800 Subject: [PATCH 2/2] add doc for NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS --- website/docs/src/pages/getting-started/layout.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/src/pages/getting-started/layout.mdx b/website/docs/src/pages/getting-started/layout.mdx index 4ef2c5096..e2a9d055e 100644 --- a/website/docs/src/pages/getting-started/layout.mdx +++ b/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