# vite-plugin-imba

> The official [Imba](https://imba.io) plugin for [Vite](https://vitejs.dev).

Latest version **0.10.3** (published 2023-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-imba
pnpm add vite-plugin-imba
yarn add vite-plugin-imba
bun add vite-plugin-imba
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.10.3 |
| Published | 2023-01-26 |
| First published | 2020-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^14.18.0 \|\| >= 16 |
| Dependencies | 7 |
| Unpacked size | 203.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6508 |
| Author | Abdellah Alaoui |
| Maintainers | sindreaa, haikyuu |
| Keywords | vite-plugin, vite plugin, vite, imba |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-imba
- Repository: https://github.com/imba/imba
- Homepage: https://imba.io
- Issues: https://github.com/imba/imba/issues
- npm.io page: https://npm.io/package/vite-plugin-imba

## Dependencies (7)

- [diff](https://npm.io/package/diff.md) ^5.1.0
- [debug](https://npm.io/package/debug.md) ^4.3.4
- [kleur](https://npm.io/package/kleur.md) ^4.1.5
- [cross-env](https://npm.io/package/cross-env.md) ^7.0.3
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2
- [magic-string](https://npm.io/package/magic-string.md) ^0.26.2
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^4.2.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.10.3 (latest) — 2023-01-26
- 0.10.2 — 2023-01-22
- 0.10.1 — 2022-10-24
- 0.10.0 — 2022-10-19
- 0.9.1 — 2022-10-13
- 0.9.0 — 2022-10-08
- 0.8.2 — 2022-10-01
- 0.8.0 — 2022-09-29
- 0.7.3 — 2022-09-22
- 0.7.2 — 2022-09-22
- 0.7.1 — 2022-09-22
- 0.7.0 — 2022-09-16
- 0.6.1 — 2022-09-16
- 0.6.0 — 2022-09-15
- 0.5.0 — 2022-09-15
- … 7 more at https://npm.io/package/vite-plugin-imba/versions

## README

# vite-plugin-imba

The official [Imba](https://imba.io) plugin for [Vite](https://vitejs.dev).

## Usage

```js
// 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](https://vitejs.dev/config/#root). For example:

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

A basic Imba config looks like this:

```js
// 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.

```js
// 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

```js
// 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.

## Full stack Usage
In order to use the plugin both in the client and the server (with SSR and hydration), see the example in [../e2e-tests/vite-ssr-esm](../e2e-tests/vite-ssr-esm/)

## Credits
- imba vite plugin
## License

[MIT](./LICENSE)

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