import { defineConfig, presetIcons } from 'unocss'

// https://github.com/MellowCo/unocss-preset-weapp
import presetWeapp from 'unocss-preset-weapp'
import { defaultAttributes, extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
    attributes: [...defaultAttributes, 'icon'],
})

const ICONS = [
    'emojione:globe-showing-europe-africa',
    'vscode-icons:file-type-html',
    'logos:internetexplorer',
    'logos-chartblocks',
    'emojione:letter-z',
    'emojione:robot-face',
    'emojione:cowboy-hat-face',
    'twemoji:laptop',
    'vscode-icons:file-type-pdf2',
    'fxemoji:clockwiserightwardsleftwardscirclearrows',
    'fluent-color:chat-bubbles-question-24',
    'fluent-color:chat-multiple-24',
]

export default defineConfig({
    shortcuts: [
        {
            'border-base': 'border border-[#eee]',
            'flex-center': 'flex justify-center items-center',
            ellipsis: 'text-ellipsis whitespace-nowrap overflow-hidden',
        },
    ],
    safelist: ICONS.map((icon) => `icon-${icon.replace(/:/g, '-')}`),
    presets: [
        // https://github.com/MellowCo/unocss-preset-weapp
        presetWeapp(),
        // autocomplete attributes
        presetWeappAttributify(),
        // icon
        presetIcons({
            prefix: ['i-', 'icon-'],
            extraProperties: {
                display: 'inline-flex',
            },
        }),
    ],
    transformers: [
        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
        transformerAttributify(),

        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
        transformerClass({
            include: [/\.[jt]sx$/, /\.vue$/, /\.vue\?vue/],
        }),
    ],
})
