babel-plugin-stitches

Input

let foo = styled("div", {});

Output

let foo = styled.withConfig({ displayName: "foo" })("div", {});

Installation

1. Install packages

$ npm install @stitches/[email protected] babel-plugin-stitches

2. Extend babelrc .babelrc

{
  "plugins": ["stitches"]
}

3. Use createStitches

import { createStitches } from "@stitches/react";

// Using createStitches is required!!!
const { styled } = createStitches();

const StyledForm = styled("form", {
  background: "red",
});

Acknowledgements

This plugin is adapted from @babel/plugin-transform-react-display-name many thanks to the Babel team.