Merge pull request #201 from chakra-ui/refactor/chakra-plugin-to-local

refactor: remove chakra plugin in favor of local setup

Author: segunadebayo

gatsby-browser.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { GatsbyBrowser } from "gatsby";
+import { WrapRootElement } from "./src/provider";
+
+export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = ({ element }) => (
+   <WrapRootElement element={element} />
+)

gatsby-config.ts

@@ -8,13 +8,6 @@ const config: GatsbyConfig = {
   // If you use VSCode you can also use the GraphQL plugin
   // Learn more at: https://gatsby.dev/graphql-typegen
   graphqlTypegen: true,
-  plugins: [
-    {
-      // https://chakra-ui.com/getting-started/gatsby-guide
-      resolve: "@chakra-ui/gatsby-plugin",
-      options: {},
-    },
-  ],
 };
 
 export default config;

gatsby-ssr.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { GatsbySSR } from "gatsby";
+import { ColorModeScript } from "@chakra-ui/react";
+import { WrapRootElement } from "./src/provider";
+import { customTheme } from "./src/theme";
+
+export const onRenderBody: GatsbySSR['onRenderBody'] = ({ setPreBodyComponents }) => {
+  setPreBodyComponents([
+    <ColorModeScript
+      initialColorMode={customTheme.config.initialColorMode}
+      key="chakra-ui-no-flash"
+    />,
+  ])
+}
+
+export const wrapRootElement: GatsbySSR['wrapRootElement'] = ({ element }) => (
+   <WrapRootElement element={element} />
+)

package-lock.json

@@ -15,11 +15,10 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "typecheck": "tsc --noEmit",
-    "theme": "chakra-cli tokens path/to/theme.ts",
-    "theme:watch": "chakra-cli tokens path/to/theme.ts --watch"
+    "theme": "chakra-cli tokens src/theme/index.ts",
+    "theme:watch": "chakra-cli tokens src/theme/index.ts --watch"
   },
   "dependencies": {
-    "@chakra-ui/gatsby-plugin": "^3.1.1",
     "@chakra-ui/react": "^2.5.5",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
@@ -35,4 +34,4 @@
     "@types/react-dom": "^18.0.11",
     "typescript": "^5.0.2"
   }
-}
+}

package.json

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import type { WrapRootElementBrowserArgs } from "gatsby";
+import { customTheme } from "./theme";
+export const WrapRootElement = ({ element }: Pick<WrapRootElementBrowserArgs, 'element'>) => (
+    // Or ChakraBaseProvider if you only want to compile the default Chakra theme tokens
+    <ChakraProvider theme={customTheme}>
+        {element}
+    </ChakraProvider>
+)

src/provider.tsx

@@ -0,0 +1,4 @@
+import { extendTheme } from "@chakra-ui/react";
+
+// Or export `extendBaseTheme` if you only want the default Chakra theme tokens to extend (no default component themes)
+export const customTheme = extendTheme({})

src/theme/index.ts

@@ -98,5 +98,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
+  "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"],
 }