# Roots Vite Plugin Now Supports theme.json Partials

[`@roots/vite-plugin` v2.1.0](https://github.com/roots/vite-plugin/releases/tag/v2.1.0) ships with support for `theme.json` partials. You can now split your `theme.json` styles across multiple `.theme.js` files and co-locate them next to the templates they belong to, instead of maintaining one giant `theme.json` at the root of your theme.

## How it works

The plugin scans your `resources/` directory for any `*.theme.js` files and deep merges them into the generated `theme.json`. Files are merged in alphabetical order, and changes trigger a rebuild during development.

Partials support two export formats. The **shorthand** format treats `blocks` and `elements` at the top level as part of `styles`, which covers the common case of styling blocks and elements:

```
// resources/views/blocks/_global.theme.js
export default {
  blocks: {
    "core/paragraph": {
      spacing: { margin: { bottom: "1rem" } },
    },
  },
  elements: {
    h1: {
      typography: {
        fontSize: "var(--wp--preset--font-size--4-xl)",
        fontWeight: "600",
        lineHeight: "1.25",
      },
    },
  },
};

```

The **full** format is merged at the root, so you can target any part of `theme.json`:

```
// resources/views/blocks/button.theme.js
export default {
  styles: {
    blocks: {
      "core/button": {
        border: { radius: "0" },
        color: {
          background: "var(--wp--preset--color--black)",
          text: "var(--wp--preset--color--white)",
        },
        variations: {
          outline: {
            border: {
              width: "1px",
              color: "var(--wp--preset--color--black)",
            },
            color: {
              background: "transparent",
              text: "var(--wp--preset--color--black)",
            },
          },
        },
      },
    },
  },
};

```

In [Radicle](https://roots.io/radicle/), we were using the Vite config to handle this merging. It's now supported in our core Vite plugin.

## Configuration

Partials are enabled by default and look in `resources/`. You can point them somewhere else, pass an array of directories, or disable the feature entirely:

```
// vite.config.js
import { defineConfig } from "vite";
import { wordpressThemeJson } from "@roots/vite-plugin";

export default defineConfig({
  plugins: [
    wordpressThemeJson({
      partials: ["resources/views/blocks", "resources/styles"],
    }),
  ],
});

```

Update to the latest version to start using it:

```
npm install @roots/vite-plugin@latest --save-dev
```

See the [v2.1.0 release notes](https://github.com/roots/vite-plugin/releases/tag/v2.1.0) for the full changelog.