Vite-plugin-imba NPM

vite-plugin-imba

The official Imba plugin for Vite.

Usage

// vite.config.js
import { defineConfig } from 'vite';
import { imba } from 'vite-plugin-imba';

export default defineConfig({
  plugins: [
    imba({
		/* plugin options */
	})
  ]
});

Options

Config file

Config file resolving

Besides inline options in Vite config, vite-plugin-imba will also automatically resolve options from an Imba config file if it exists (imbaconfig.json or imba.config.js). The JavaScript one is recommended since we'll add a defineConfig helper function to provide autocomplete for the options in the future

To set a specific config file, use the configFile inline option. The path can be absolute or relative to the Vite root. For example:

// vite.config.js
export default defineConfig({
  plugins: [
    imba({
      configFile: 'my-imba-config.json'
    })
  ]
});

A basic Imba config looks like this:

// imba.config.js
export default {
  // imba options
  theme: {}
};

Disable automatic handling of Imba config

Use configFile: false to prevent vite-plugin-imba from reading the config file or restarting the Vite dev server when it changes.

// vite.config.js
export default defineConfig({
  plugins: [
    imba({
      configFile: false
      // your imba config here
    })
  ]
});

Warning: You are responsible to provide the complete inline config when used.

Imba options

These options are specific to the Imba compiler.

compilerOptions

You can specify your own pallette of colors using

// vite.config.js
export default defineConfig({
  plugins: [imba({
		compilerOptions: {
			theme: {
				colors: {
					"myblue": "blue",
					"lilac": {
						"2": "hsl(253, 100%, 95%)",
						"4": "hsl(252, 100%, 86%)"
					},
				}
			}
		}
	})],
});

Imba will take care of generating color variants from 1 to 9 based on the provided values.