import {
  defineConfig,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

import presetWeapp from 'unocss-preset-weapp'
import {
  extractorAttributify,
  transformerClass
} from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } =
  extractorAttributify()

/**
 * unocss配置
 */
export default defineConfig({
  safelist: [],
  theme: {
    colors: {
      pri: 'rgb(var(--pri))',
      prid: 'rgb(var(--prid))',
      bg: 'rgb(var(--bg))',
      'bg-sub': 'rgb(var(--bg-sub))',
      bord: 'rgb(var(--bord))',
      text: 'rgb(var(--text))',
      text2: 'rgb(var(--text2))',
      str: 'rgb(var(--str))',
      jd: 'rgb(var(--jd-color))'
    }
  },
  presets: [
    presetWeapp({
      platform: 'uniapp',
      whRpx: false,
      enableAttributify: true
    }),
    presetWeappAttributify(),
    presetAttributify({
      prefix: 'un-',
      prefixedOnly: false
    }),
    presetIcons({
      collections: {
        tabler: () => import('@iconify-json/tabler').then(i => i.icons)
      },
      scale: 1.2
    })
  ],
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts files
        'src/**/*.{js,ts}'
      ]
    }
  },
  transformers: [
    transformerVariantGroup(),
    transformerDirectives(),
    transformerAttributify(),
    transformerClass()
  ],
  shortcuts: [
    {
      'flex-center': 'flex items-center justify-center',
      divider: 'h-1px w-full bg-border my-2',
      tap: 'active:(scale-60 opacity-50 rotate-180)',
      'base-label':
        'bg-bord text-text2 text-10px px-1 flex-center rd-3px inline-block h-18px font-500'
    }
  ]
})