Plugin options
Here will be listed all the options the can be passed to the Pinceau plugin.
These options allows to enable, disable or configure the features.
When used with Multi layer theming, these options will not be inherited, they are scoped to your project.
import { defineConfig } from 'vite'
import Pinceau from 'pinceau/vite'
export default defineConfig({
plugins: [
Pinceau({
...options
})
],
})
Options
cwd
cwdstringprocess.cwd()
The current working directory of your project.
It will be set automatically to the path of the running process of your development server.
It can also be set to undefined to disable the scanning of the process directory.
configLayers
(string | ConfigLayer)[][{ cwd: process.cwd(), configFileName: 'tokens.config' }]
The list of configuration layers that will be loaded and merged, in correct order.
The cwd will be pushed as a layer if it is defined, so there is no need to add it by default.
{
configLayers: [
// `string`
'./my-themes/basic/',
// `ConfigLayer` with `tokens`
{
tokens: {
color: {
primary: 'red'
}
}
},
// `ConfigLayer` with `cwd`
{
cwd: './my-themes/figma',
configFileName: 'figma.config'
}
]
}
configFileName
configFileNamestringtokens.config
The configFileName that will be used by default when resolving your configLayers.
configResolved
(config: LoadConfigResult) => voidundefined
A function that will be called:
- After all your
configLayershas been merged together - Before
generateThemeis called to generate all of your theme outputs
That is useful if you want to apply modifications to your design tokens programatically.
configBuilt
(config: ThemeGenerationOutput) => voidundefined
A function that will be called when your theme is built.
That is useful if you want to listen to the Pinceau outputs.
outputDir
string|undefined'node_modules/.vite/pinceau'
The directory where your theme outputs will be written.
Pinceau does not rely in these files internally, so you can also set it to undefined to completely disable the filesystem outputs.
These are enabled by default because without these files, the Volar plugin and VSCode extension wouldn't work.
preflight
boolean | 'tailwind' | 'antfu' | 'eric-meyer' | 'normalize''tailwind'
Loads a CSS reset in your project.
This feature relies on @unocss/reset.
exclude
string[][]
Exclude some glob-compatible paths from the Pinceau transforms.
Pinceau is compatible with all native Vue syntaxes, so you should not need to use this.
That might be useful if you use other compiler-level tools, or if one of your dependencies does.
includes
string[][]
Include some glob-compatible paths in the Pinceau transforms.
Any Pinceau-compatible file that gets processed by Vite should automatically be included, so you should not need this.
followSymbolicLinks
booleantrue
This is only used in the Nuxt module.
Enable or disable the followSymbolicLinks options for the glob scan of includes in the Nuxt project.
colorSchemeMode
'class' | 'media''media'
Pinceau can resolved color scheme in two ways:
css({
'.my-button': {
backgroundColor: '{color.gray.100}',
'@dark': {
backgroundColor: '{color.gray.900}'
}
}
})
debug
debugfalse | true | 2true
Toggles the debug level.
falsewill make Pinceau completely silenttruewill output warnings and errors from your configuration and styling2will output all debug informations and timings
runtime
booleantrue
Toggles Pinceau runtime features.
This parameter will disable the transforms in the Vite plugin.
It will also disable the runtime plugin injection in Nuxt module.
If you are using Vite, be careful to remove the app.use(PinceauPlugin) from your project when disabling the runtime.
studio
booleanfalse
Toggles support for Nuxt Studio and output of schema.ts file.
definitions
booleantrue
Toggles output of definitions.ts, that feeds the VSCode extension
utilsImports
string[][]
Adds imports on top of utils.ts output.
Useful if you are using external modules inside your Utils properties.