gatsby-plugin-vanilla-extract

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

Setup

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

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

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

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

`js
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:

`tsx
import * as React from "react";

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

export default function Index() {
return

;
}
`

src/styles/index.css.ts:

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

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

$3

Kick off your project using Gatsby's example project

Useful Links

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