/**
 * The instant on-demand atomic CSS engine.
 * @see https://github.com/unocss/unocss
 */

import transformerDirectives from '@unocss/transformer-directives';
import { theme } from 'ant-design-vue';
import { MapToken } from 'ant-design-vue/es/theme/interface';
import { defineConfig, presetTypography, presetUno } from 'unocss';

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);
const filterColors = (token: MapToken) => {
  return Object.fromEntries(
    Object.entries(token).filter(([_key, value]) => {
      return typeof value === 'string';
    }),
  );
};
const colors = filterColors(mapToken);
Object.keys(colors).forEach((key) => {
  colors[key] = `var(--${key.replace(/([A-Z])/g, '-$1').toLowerCase()})`;
});
export default defineConfig({
  shortcuts: {
    'flex-center': 'flex justify-center items-center',
    'grid-center': 'grid place-content-center',
  },
  theme: {
    colors: {
      primary: 'var(--primary-color)',
      ...colors,
    },
  },
  transformers: [transformerDirectives()],
  presets: [presetUno(), presetTypography()],
  content: {
    pipeline: {
      exclude: ['node_modules', '.git', 'dist'],
      include: ['**.ts', '**.tsx', '**.vue'],
    },
  },
});