gatsby

To use filbert-js with gatsbyjs, follow below steps

  1. use @filbert-js/macro in pages
  2. use @filbert-js/server-stylesheet to support SSR/Client Hydration
1// pages/app.js
2import { styled } from '@filbert-js/macro';
3
4import React from 'react';
5
6const Box = styled.div`
7 color: red;
8`;
9export default function App() {
10 return <Box>Gatsby.js is awesome</Box>;
11}
1// gatsby-ssr.js
2import { createStylesheet } from '@filbert-js/server-stylesheet';
3
4const sheetByPathname = new Map();
5
6export const wrapRootElement = ({ element, pathname }) => {
7 const sheet = createStylesheet();
8 sheetByPathname.set(pathname, sheet);
9 return sheet.collectStyles(element);
10};
11
12export 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