Roots Vite Plugin Now Supports theme.json Partials

@roots/vite-plugin 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, 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 for the full changelog.