feat: support daisyui v4

Signed-off-by: Axel Meinhardt <[email protected]>

daisyui.d.ts

@@ -25,12 +25,6 @@ declare module 'daisyui/dist/unstyled.js' {
 	export default unstyled
 }
 
-declare module 'daisyui/dist/unstyled.rtl.js' {
-	import type {CssInJs} from 'postcss-js'
-
-	const unstyledRtl: CssInJs
-	export default unstyledRtl
-}
 
 declare module 'daisyui/dist/styled.js' {
 	import type {CssInJs} from 'postcss-js'
@@ -39,13 +33,6 @@ declare module 'daisyui/dist/styled.js' {
 	export default styled
 }
 
-declare module 'daisyui/dist/styled.rtl.js' {
-	import type {CssInJs} from 'postcss-js'
-
-	const styledRtl: CssInJs
-	export default styledRtl
-}
-
 declare module 'daisyui/dist/utilities-unstyled.js' {
 	import type {CssInJs} from 'postcss-js'
 
@@ -65,13 +52,19 @@ declare module 'daisyui/src/theming/themes.js' {
 	export default themes
 }
 
+declare module 'daisyui/src/lib/utility-classes.js' {
+  import type { CssInJs } from 'postcss-js'
+
+  const utilityClasses: CssInJs
+  export default utilityClassess
+}
+
 declare module 'daisyui/src/theming/functions.js' {
 	import type {CssInJs} from 'postcss-js'
 
 	export function injectThemes(
 		addBase: (theme: CssInJs) => void,
 		config: (key: string) => unknown,
 		themes: Record<string, Record<string, string>>,
-		colorFunction: 'hsl' | 'lch'
 	): void
 }

index.ts

@@ -8,14 +8,12 @@ import colors from 'daisyui/src/theming/index.js'
 import utilities from 'daisyui/dist/utilities.js'
 import base from 'daisyui/dist/base.js'
 import unstyled from 'daisyui/dist/unstyled.js'
-import unstyledRtl from 'daisyui/dist/unstyled.rtl.js'
 import styled from 'daisyui/dist/styled.js'
-import styledRtl from 'daisyui/dist/styled.rtl.js'
 import utilitiesUnstyled from 'daisyui/dist/utilities-unstyled.js'
 import utilitiesStyled from 'daisyui/dist/utilities-styled.js'
 import themes from 'daisyui/src/theming/themes.js'
 import colorFunctions from 'daisyui/src/theming/functions.js'
-
+import utilityClasses from 'daisyui/src/lib/utility-classes.js';
 const processor = postcss(autoprefixer)
 const process = (object: CssInJs) => processor.process(object, {parser: parse})
 
@@ -32,18 +30,44 @@ const defaultOptions = {
 	darkTheme: 'dark',
 }
 
+/**
+ * Retrieves all non-atrule nodes from the provided node and its children.
+ * @param {ChildNode} node - The node to traverse.
+ * @returns {Rule[]} - An array containing non-atrule nodes.
+ */
+const notAtruleNode = (node: ChildNode): Rule[] => {
+	const collectedRules: Rule[] = []
+
+	/**
+	 * Recursively collects non-atrule nodes.
+	 * @param {ChildNode} currentNode - The current node to examine.
+	 */
+	const collectNonAtrules = (currentNode: ChildNode) => {
+		if (currentNode.type === 'atrule') {
+			for (const child of currentNode.nodes) {
+				collectNonAtrules(child)
+			}
+		} else {
+			collectedRules.push(currentNode as Rule)
+		}
+	}
+
+	collectNonAtrules(node)
+
+	return collectedRules;
+}
+
 export const presetDaisy = (
 	options: Partial<typeof defaultOptions> = {},
 ): Preset => {
 	options = {...defaultOptions, ...options}
 
 	const rules = new Map<string, string>()
 	const keyframes: string[] = []
+	const supports: string[] = []
 
 	const styles = [
-		options.styled
-			? (options.rtl ? styledRtl : styled)
-			: (options.rtl ? unstyledRtl : unstyled),
+		options.styled ? styled : unstyled
 	]
 	if (options.utils) {
 		styles.push(utilities, utilitiesUnstyled, utilitiesStyled)
@@ -57,9 +81,18 @@ export const presetDaisy = (
 			continue
 		}
 
-		// Unwrap @media if necessary
-		const rule = (isAtRule ? node.nodes[0]! : node) as Rule
+		if (isAtRule && node.name === 'supports') {
+			supports.push(String(node))
+			continue
+		}
+
+		if (isAtRule && node.name !== 'supports' && node.name === 'keyframes') {
+			console.log(node)
+			continue
+		}
 
+		// Unwrap @media if necessary
+		const rule = notAtruleNode(node)[0]!
 		const selector = rule.selectors[0]!
 		const tokens = tokenize(selector)
 		const token = tokens[0]!
@@ -95,7 +128,11 @@ export const presetDaisy = (
 			getCSS: () => keyframes.join('\n'),
 			layer: 'daisy-keyframes',
 		},
-	]
+		{
+			getCSS: () => supports.join('\n'),
+			layer: 'daisy-supports',
+		}
+	];
 
 	if (options.base) {
 		preflights.unshift({
@@ -124,7 +161,6 @@ export const presetDaisy = (
 			}
 		},
 		themes,
-		'hsl',
 	)
 
 	return {
@@ -150,6 +186,7 @@ export const presetDaisy = (
 						.map(([color, value]) => [color.replace('base-', ''), value]),
 				),
 			},
+			...utilityClasses
 		},
 		rules: [...rules].map(
 			([base, rule]) =>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "unocss-preset-daisy",
-	"version": "7.0.0",
+	"version": "8.0.0",
 	"description": "UnoCSS preset for daisyUI",
 	"scripts": {
 		"build": "vite build demo",
@@ -25,16 +25,16 @@
 		"postcss-js": "^4.0.1"
 	},
 	"peerDependencies": {
-		"daisyui": "^3.0.0",
-		"unocss": ">0.57.0"
+		"daisyui": "^4.4.23",
+		"unocss": ">0.58.1"
 	},
 	"devDependencies": {
 		"@iconify-json/octicon": "^1.1.48",
-		"@sindresorhus/tsconfig": "^4.0.0",
+		"@sindresorhus/tsconfig": "^5.0.0",
 		"@types/postcss-js": "^4.0.1",
-		"@unocss/reset": "^0.55.7",
+		"@unocss/reset": "^0.58.2",
 		"typescript": "^5.2.2",
-		"vite": "^4.4.9",
+		"vite": "^5.0.10",
 		"xo": "^0.56.0"
 	}
 }