To use filbert-js
with gatsbyjs
, follow below steps
@filbert-js/macro
in pages@filbert-js/server-stylesheet
to support SSR/Client Hydration1// pages/app.js2import { styled } from '@filbert-js/macro';34import React from 'react';56const Box = styled.div`7 color: red;8`;9export default function App() {10 return <Box>Gatsby.js is awesome</Box>;11}
1// gatsby-ssr.js2import { createStylesheet } from '@filbert-js/server-stylesheet';34const sheetByPathname = new Map();56export const wrapRootElement = ({ element, pathname }) => {7 const sheet = createStylesheet();8 sheetByPathname.set(pathname, sheet);9 return sheet.collectStyles(element);10};1112export const onRenderBody = ({ setHeadComponents, pathname }) => {13 const sheet = sheetByPathname.get(pathname);14 if (sheet) {15 const styleTags = sheet.getReactElements();16 setHeadComponents(styleTags);17 sheetByPathname.delete(pathname);18 }19};
Or
Directly use gatsby-plugin-filbert
👉 Checkout starter kit