Multi-layer theming
Pinceau supports loading multiple tokens.config.ts files from multiple sources.
That allows multiple usages, like creating a preset for your themes and sharing it accross different projects.
Loading another tokens.config file
Layers configuration lives under configLayers key in options.
vite.config.ts
import { defineConfig } from 'vite'
import Pinceau from 'pinceau/vite'
export default defineConfig({
plugins: [
Pinceau({
configLayers: [
{
// Layer cwd
cwd: resolve(__dirname, './theme'),
// Custom configFileName at layer level
configFileName: 'tokens.config',
},
]
})
]
})
Nuxt extends feature support
When using extends key in nuxt.config file, every layer will be pushed into configLayers by default.
That can be disabled using extends option.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['pinceau/nuxt'],
pinceau: {
extends: false
}
})
Edit this page on GitHub