Full support for daisyUI theme config

Resolve #9

README.md

@@ -73,7 +73,7 @@ export default defineNuxtConfig({
 
 ## Config
 
-This preset accepts [the same config as daisyUI](https://daisyui.com/docs/config/) (except for `logs`, `prefix` and `darkTheme`).
+This preset accepts [the same config as daisyUI](https://daisyui.com/docs/config/) (except for `logs` and `prefix`).
 
 ```js
 {
@@ -87,30 +87,6 @@ This preset accepts [the same config as daisyUI](https://daisyui.com/docs/config
 }
 ```
 
-### Custom themes
-
-Use [UnoCSS's theming system](https://github.com/unocss/unocss#extend-theme) to customize the theme.
-
-```js
-{
-	presets: [presetUno(), presetDaisy()],
-	theme: {
-		colors: {
-			// Refer to https://daisyui.com/docs/colors/ for colors
-			neutral: 'red',
-			// Use camelCase instead of kebab-case (e.g. `neutral-focus`)
-			neutralFocus: 'green',
-			// Use object instead of hyphen for color grades/numbers (e.g. `base-100`)
-			base: {
-				100: 'blue',
-			},
-		},
-	},
-}
-```
-
-For details, please read [issue #9](https://github.com/kidonng/unocss-preset-daisy/issues/9#issuecomment-1452292840).
-
 ## Limitations
 
 **This is not a full daisyUI port.** All daisyUI components/utilities should work but they may not work with some UnoCSS features:

daisyui.d.ts

@@ -66,7 +66,11 @@ declare module 'daisyui/src/colors/themes.js' {
 }
 
 declare module 'daisyui/src/colors/functions.js' {
-	export function convertToHsl(
-		input: Record<string, string>,
-	): Record<string, string>
+	import type {CssInJs} from 'postcss-js'
+
+	export function injectThemes(
+		addBase: (theme: CssInJs) => void,
+		config: (key: string) => unknown,
+		themes: Record<string, Record<string, string>>,
+	): void
 }

index.ts

@@ -1,7 +1,7 @@
 import postcss, {type Rule} from 'postcss'
 import {parse, type CssInJs} from 'postcss-js'
-import {tokenize, type ClassToken, type AttributeToken} from 'parsel-js'
-import type {Preset, Preflight, DynamicRule} from 'unocss'
+import {tokenize, type ClassToken} from 'parsel-js'
+import type {Preset, DynamicRule} from 'unocss'
 import camelCase from 'camelcase'
 
 import colors from 'daisyui/src/colors/index.js'
@@ -22,14 +22,19 @@ const toCss = (object: CssInJs) => processor.process(parse(object)).css
 const replacePrefix = (css: string) => css.replace(/--tw-/g, '--un-')
 // UnoCSS uses comma syntax
 const replaceSlash = (css: string) => css.replace(/\) \/ /g, '), ')
-const replaceSpace = (css: string) => css.replace(/ /g, ', ')
+const replaceSpace = (css: string) =>
+	// HSL
+	css.replace(/([\d.]+) ([\d.%]+) ([\d.%]+)/g, '$1, $2, $3')
 
 const defaultOptions = {
 	styled: true,
-	themes: true as boolean | string[],
+	themes: true as
+		| boolean
+		| Array<string | Record<string, Record<string, string>>>,
 	base: true,
 	utils: true,
 	rtl: false,
+	darkTheme: 'dark',
 }
 
 export const presetDaisy = (
@@ -96,40 +101,20 @@ export const presetDaisy = (
 	rules.delete('btn-outline')
 	rules.set('btn-outline', btnOutline)
 
-	const preflights: string[] = [
-		toCss(
-			Object.fromEntries(
-				Object.entries(themes)
-					.filter(([selector]) => {
-						const theme = (tokenize(selector)[0] as AttributeToken).value!
-
-						if (options.themes === false) return theme === 'light'
-						if (Array.isArray(options.themes))
-							return options.themes.includes(theme)
-
-						return true
-					})
-					.map(([selector, colors], index) => {
-						const theme = (tokenize(selector)[0] as AttributeToken).value!
-						const isDefault = Array.isArray(options.themes)
-							? index === 0
-							: theme === 'light'
-
-						return [
-							isDefault ? `:root, ${selector}` : selector,
-							Object.fromEntries(
-								Object.entries(colorFunctions.convertToHsl(colors)).map(
-									([prop, value]) => [prop, replaceSpace(value)],
-								),
-							),
-						]
-					}),
-			),
-		),
-		...keyframes,
-	]
+	const preflights = [...keyframes]
 
 	if (options.base) preflights.unshift(replaceSlash(replacePrefix(toCss(base))))
+	colorFunctions.injectThemes(
+		(theme) => {
+			preflights.push(replaceSpace(toCss(theme)))
+		},
+		// @ts-expect-error Return never
+		(key) => {
+			if (key === 'daisyui.themes') return options.themes
+			if (key === 'daisyui.darkTheme') return options.darkTheme
+		},
+		themes,
+	)
 
 	return {
 		name: 'unocss-preset-daisy',