# gatsby-plugin-vanilla-extract

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

Latest version **4.0.2** (published 2024-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-vanilla-extract
pnpm add gatsby-plugin-vanilla-extract
yarn add gatsby-plugin-vanilla-extract
bun add gatsby-plugin-vanilla-extract
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2024-01-01 |
| First published | 2021-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 57 |
| Author | Kyle Mathews |
| Maintainers | lekoarts, moonmeister, kylemathews |
| Keywords | gatsby, gatsby-plugin |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-vanilla-extract
- Repository: https://github.com/gatsby-uc/plugins
- Homepage: https://github.com/gatsby-uc/plugins/tree/main/packages/gatsby-plugin-vanilla-extract#readme
- Issues: https://github.com/gatsby-uc/plugins/issues
- npm.io page: https://npm.io/package/gatsby-plugin-vanilla-extract

## Recent versions

- 4.0.2 (latest) — 2024-01-01
- 4.0.1 — 2022-12-29
- 4.0.0 — 2022-11-18
- 3.0.1 — 2022-11-08
- 3.0.0 — 2022-09-23
- 2.0.1 — 2022-02-02
- 2.0.0 — 2022-02-01
- 1.0.6 — 2021-12-14
- 1.0.5 — 2021-05-28
- 1.0.4 — 2021-05-07
- 1.0.3 — 2021-03-30
- 1.0.2 — 2021-03-29
- 1.0.1 — 2021-03-29
- 1.0.0 — 2021-03-29

## README

# gatsby-plugin-vanilla-extract

Gatsby plugin which wraps the [vanilla-extract](https://vanilla-extract.style/) 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](https://vanilla-extract.style/documentation/setup/#configuration) to the plugin.

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

## How to use

See the [vanilla-extract website](https://vanilla-extract.style/) 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 <div className={className}>Pizza</div>;
}
```

`src/styles/index.css.ts`:

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

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

### Example Project

Kick off your project using Gatsby's [example project](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-vanilla-extract)

## Useful Links

- [TypeScript & Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
- [vanilla-extract website](https://vanilla-extract.style/)
- [Talk/Video Explanation](https://www.youtube.com/watch?v=23VqED_kO2Q)

---
_Source: https://npm.io/package/gatsby-plugin-vanilla-extract · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._