Importing colors in the frontend with a virtual module

[randName]

I was trying to style my Google Maps, and since they only accept the RGB values I did the import as mentioned in the colors doc

import colors from 'windicss/colors'

const styles = [
	// ...
	{ color: colors.gray[800] },
	// ...
]

to my surprise my output bundle contained not just all the colors, but copyright header from Microsoft and a bunch of css transforms.

I figured that colors was meant to be imported in the backend, but I figured I could write a small virtual module to help, so here it is in its entirety

// vite-plugin-windi-colors.js
import colors from 'windicss/colors'

export default function colorsPlugin() {
	const vmId = 'virtual:windi-colors'
	const resolvedVMId = '\0' + vmId

	// to prevent deprecation warnings
	const ignore = new Set([
		'lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray', 'zink',
	])

	const vf = Object.keys(colors).flatMap((c) => {
		if (ignore.has(c)) return []
		const v = colors[c]
		const base = `export const ${c} = ${JSON.stringify(v)}`
		return (typeof v === 'string') ? [base] : [
			base,
			...Object.entries(v).map(([n, h]) => `export const ${c}${n} = "${h}"`),
		]
	}).join('\n')

	return {
		name: 'windi-colors',
		resolveId: (id) => {
			if (id === vmId) return resolvedVMId
		},
		load: (id) => {
			if (id === resolvedVMId) return vf
		},
	}
}

and used like this:

// vite.config.js
import colors from './vite-plugin-windi-colors.js'
// ...
export default {
	plugins: [windi(), colors(), vue()],
}

// frontend code
import * as colors from 'virtual:windi-colors'
const styles = [
	// ...
	{ color: colors.gray[800] }, // gray800 also works for maximum treeshaking
	// ...
]

hope it helps!

[AskAlice]

That doesn't reflect if people change the color palette in their windi.config.ts

I wrote a plugin that exports the proper values based on config. Both theme, and colors.
https://www.npmjs.com/package/vite-plugin-windicss-theme