// uno.config.js
import { defineConfig, presetAttributify, presetUno, presetIcons } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'

export default defineConfig({
	presets: [
		presetUno(), // 默认样式预设, 此预设继承了 @unocss/preset-wind 和 @unocss/preset-mini
		presetAttributify(), // 为其他预设和规则提供归因模式。 标签class类名可写为属性
		presetRemToPx({
			// 将 rem 转为 px ， 1rem = n px
			baseFontSize: 4, // 默认为 16
		}),
		presetIcons({
			prefix: 'i-',
			collections: {
				ep: () => import('@iconify-json/ep/icons.json').then((i) => i.default),
				ct: FileSystemIconLoader('./src/assets/svg/', (svg) => svg.replace(/#FFF/, 'currentColor')),
			},
			extraProperties: {
				display: 'inline-block',
			},
			warn: true,
		}),
	],
	shortcuts: [
		['wh-full', 'w-full h-full'],
		['flex-x-center', 'flex justify-center'],
		['flex-y-center', 'flex items-center'],
		['flex-center', 'flex justify-center items-center'],
		['flex-x-between', 'flex items-center justify-between'],
		['flex-col', 'flex flex-col'],
		['text-ellipsis', 'truncate'],
		[
			'icon-btn',
			'text-16 inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary !outline-none',
		],
	],
	rules: [
		[/^bc-(.+)$/, ([, color]) => ({ 'border-color': `#${color}` })],
		['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
	],
	theme: {
		// colors: {
		//   primary: 'var(--primary-color)',
		//   dark_bg: 'var(--dark-bg)',
		// },
	},
	content: {
		pipeline: {
			include: [
				// the default
				/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
				// include js/ts files
				'src/constant/icons.ts',
			],
			// exclude files
			// exclude: []
		},
	},
})