gatsby-plugin-vanilla-extract

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

Setup

npm install gatsby-plugin-vanilla-extract @vanilla-extract/css @vanilla-extract/webpack-plugin

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

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

You can also pass any vanilla-extract configuration object to the plugin.

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

How to use

See the vanilla-extract website for full documentation.

src/pages/index.tsx:

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",
});

Example Project

Kick off your project using Gatsby's example project

Useful Links

• TypeScript & Gatsby
• vanilla-extract website
• Talk/Video Explanation