Support custom VitePlugins in the Tina config

.changeset/young-donuts-poke.md

@@ -0,0 +1,6 @@
+---
+'@tinacms/schema-tools': minor
+'@tinacms/cli': minor
+---
+
+Support custom VitePlugins in the Tina config. This is intended to provide advanced ways to customise the Admin Portal build output. One example use case is to provide a custom tailwind plugin (similar to the TinaTailwind plugin) and build CSS for any custom React components we load in the Tina Admin portal via Tina field plugins. Otherwise the Tailwind classes we use in Tina field plugins do not appear in the Tina Admin portal CSS.

packages/@tinacms/cli/src/next/config-manager.ts

@@ -3,6 +3,7 @@ import path from 'path'
 import os from 'os'
 import * as esbuild from 'esbuild'
 import type { Loader } from 'esbuild'
+import type { Plugin } from 'vite'
 import { Config } from '@tinacms/schema-tools'
 import * as dotenv from 'dotenv'
 import normalizePath from 'normalize-path'
@@ -55,6 +56,7 @@ export class ConfigManager {
   spaRootPath: string
   spaMainPath: string
   spaHTMLPath: string
+  vitePlugins?: Array<(configManager: ConfigManager) => Plugin>
   tinaGraphQLVersionFromCLI?: string
   legacyNoSDK?: boolean
   watchList?: string[]
@@ -261,6 +263,7 @@ export class ConfigManager {
     )
     this.spaMainPath = require.resolve('@tinacms/app')
     this.spaRootPath = path.join(this.spaMainPath, '..', '..')
+    this.vitePlugins = this.config.ui?.vitePlugins
     // =================
     // End of paths that depend on the config file
   }

packages/@tinacms/cli/src/next/vite/index.ts

@@ -139,6 +139,9 @@ export const createConfig = async ({
       }
     }
   })
+  const customPlugins: Plugin[] = configManager.vitePlugins
+    ? configManager.vitePlugins.map((pluginFn) => pluginFn(configManager))
+    : []
 
   const staticMediaPath: string = path.join(
     configManager.generatedFolderPath,
@@ -251,6 +254,7 @@ export const createConfig = async ({
       }),
       splitVendorChunkPlugin(),
       tinaTailwind(configManager.spaRootPath, configManager.prebuildFilePath),
+      ...customPlugins,
       ...plugins,
     ],
   }

packages/@tinacms/schema-tools/package.json

@@ -30,6 +30,7 @@
     "jest": "^29.5.0",
     "react": "17.0.2",
     "typescript": "4.3.5",
+    "vite": "^4.3.9",
     "yup": "^0.32.0"
   },
   "peerDependencies": {

packages/@tinacms/schema-tools/src/types/index.ts

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type React from 'react'
+import type { Plugin } from 'vite'
 
 type Meta = {
   active?: boolean
@@ -555,6 +556,13 @@ export interface Config<
      * [more info](https://vercel.com/docs/concepts/deployments/generated-urls#url-with-git-branch)
      */
     previewUrl: (context: { branch: string }) => { url: string }
+    /**
+     * An array of functions that return a vite Plugin to be loaded when building the Tina Admin Portal.
+     * One use case for this is to provide a custom tailwind plugin (similar to the TinaTailwind plugin)
+     * and build CSS for any new components you load in the Tina Admin portal (e.g. Tina field plugins).
+     * Otherwise Tailwind classes used in Tina field plugins may not appear in the Tina Admin portal CSS
+     */
+    vitePlugins?: Array<(configManager: any) => Plugin>
   }
   /**
    * Configurations for the autogenerated GraphQL HTTP client