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
    })
  ],
})

defineNuxtConfig({
  modules: ['pinceau/nuxt'],
  pinceau: {
    ...options
  }
})

Options

cwd

• string
• process.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

• string
• tokens.config

The configFileName that will be used by default when resolving your configLayers.

configResolved

• (config: LoadConfigResult) => void
• undefined

A function that will be called:

• After all your configLayers has been merged together
• Before generateTheme is 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) => void
• undefined

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

• boolean
• true

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}'
    }
  }
})

.my-button {
  background-color: var(--color-gray-100);
}
@media (prefers-color-scheme: dark) {
  .my-button {
    background-color: var(--color-gray-900);
  }
}

.my-button {
  background-color: var(--color-gray-100);
}
:root.dark .my-button {
  background-color: var(--color-gray-900);
}

debug

• false | true | 2
• true

Toggles the debug level.

• false will make Pinceau completely silent
• true will output warnings and errors from your configuration and styling
• 2 will output all debug informations and timings

runtime

• boolean
• true

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

• boolean
• false

Toggles support for Nuxt Studio and output of schema.ts file.

definitions

• boolean
• true

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.