refactor: env package

.changeset/many-rivers-listen.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/react-env": patch
+---
+
+- Omit rendered env span when the environment prop is passed. - Add `id` and
+  `hidden` attributes to the rendered env span

packages/env/package.json

@@ -31,9 +31,6 @@
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"
   },
-  "dependencies": {
-    "@chakra-ui/utils": "workspace:*"
-  },
   "peerDependencies": {
     "react": ">=18"
   },

packages/env/src/env.tsx

@@ -1,4 +1,3 @@
-import { isBrowser, __DEV__ } from "@chakra-ui/utils"
 import {
   createContext,
   startTransition,
@@ -20,13 +19,12 @@ const mockEnv = {
   document: ssrDocument,
 }
 
-const defaultEnv: Environment = isBrowser ? { window, document } : mockEnv
+const defaultEnv: Environment =
+  typeof window !== "undefined" ? { window, document } : mockEnv
 
 const EnvironmentContext = createContext(defaultEnv)
 
-if (__DEV__) {
-  EnvironmentContext.displayName = "EnvironmentContext"
-}
+EnvironmentContext.displayName = "EnvironmentContext"
 
 export function useEnvironment() {
   return useContext(EnvironmentContext)
@@ -45,18 +43,24 @@ export function EnvironmentProvider(props: EnvironmentProviderProps) {
   useEffect(() => setMounted(true), [])
 
   const context = useMemo(() => {
+    if (environmentProp) {
+      return environmentProp
+    }
+
     const doc = node?.ownerDocument
     const win = node?.ownerDocument.defaultView
-    const nodeEnv = doc ? { document: doc, window: win } : undefined
-    const env = environmentProp ?? nodeEnv ?? defaultEnv
+
+    const env = doc ? { document: doc, window: win } : defaultEnv
     return env as Environment
   }, [node, environmentProp])
 
   return (
     <EnvironmentContext.Provider value={context}>
       {children}
-      {mounted && (
+      {!environmentProp && mounted && (
         <span
+          id="__chakra_env"
+          hidden
           ref={(el) => {
             startTransition(() => {
               if (el) setNode(el)
@@ -68,6 +72,4 @@ export function EnvironmentProvider(props: EnvironmentProviderProps) {
   )
 }
 
-if (__DEV__) {
-  EnvironmentProvider.displayName = "EnvironmentProvider"
-}
+EnvironmentProvider.displayName = "EnvironmentProvider"