MadeByMike / gatsby-plugin-vanilla-extract

Gatsby plugin which wraps the vanilla-extract package for easy use

gatsby-plugin-vanilla-extract

Gatsby plugin which wraps the vanilla-extract project for easy use in Gatsby.

Setup

yarn add gatsby-plugin-vanilla-extract

Add to your site's gatsby-config.js.

module.exports = {
  plugins: [`gatsby-plugin-vanilla-extract`],
};

How to use

See the vanilla-extract README for full documentation.

Simple example.

src/pages/index.ts

import * as React from "react";

import { className } from "../styles/index.css.ts";

export default function Index() {
  return <div className={className}>Pizza</div>;
}

src/styles/index.css.ts

import { style } from "@vanilla-extract/css";

export const className = style({
  background: "red",
});