Gatsby plugin which wraps the vanilla-extract project for easy use in Gatsby.
yarn add gatsby-plugin-vanilla-extract
Add to your site's gatsby-config.js
.
module.exports = {
plugins: [`gatsby-plugin-vanilla-extract`],
};
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",
});