// https://github.dev/unocss/unocss/tree/main/examples/vite-vue3
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
import presetRemToPx from '@unocss/preset-rem-to-px';
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';

export default defineConfig({
  shortcuts: [
    {
      'logo-transform': 'i-icon:pacman w-6em h-6em transform transition-800',
      pacman: 'i-icon:pacman text-(pink 36)',
    },
  ],
  presets: [
    // TODO: https://github.dev/antfu-collective/vitesse/tree/main/src/components
    presetUno({
      /* prefix: "u-", */
    }),

    // https://unocss.dev/presets/rem-to-px
    presetRemToPx({ baseFontSize: 4 }),

    // https://unocss.dev/presets/attributify
    presetAttributify(),

    presetIcons({
      /*extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },*/
      cdn: 'https://esm.sh/',
      customizations: {
        iconCustomizer(collection, icon, props) {
          props.width = '1em';
          props.height = '1em';
        },
      },
      collections: {
        icon: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
          return svg.replace(/#000000|#000/g, 'currentColor');
        }),
        carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
      },
      warn: true,
    }), // https://unocss.dev/presets/icons
  ],
  transformers: [
    //https://unocss.dev/transformers/variant-group
    transformerVariantGroup(),

    // https://unocss.dev/transformers/directives
    transformerDirectives(),
  ],
});

// text-[var(--h-gray-1)]
//  <div class="i-icon:pacman text-(pink 36)" />