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