You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.2 KiB
106 lines
2.2 KiB
2 years ago
|
# 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)
|