/**
 * unocss defineConfig
 * @link unocss: https://github.com/unocss/unocss
 * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
 */

import { defineConfig, presetIcons } from 'unocss';
import presetWeapp from 'unocss-preset-weapp';
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
import transformerDirectives from '@unocss/transformer-directives';

const transformRules = {
  '.': '-d111-',
  '/': '-s111-',
  ':': '-c111-',
  '%': '-p111-',
  '!': '-e111-',
  '#': '-w111-',
  '(': '-b111l-',
  ')': '-b111r-',
  '[': '-f111l-',
  ']': '-f111r-',
  '$': '-r111-',
  ',': '-r222-',
};

const prefix = '';

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      nonValuedAttribute: true,
      prefix,
      whRpx: true,
      transform: true,
      platform: 'uniapp',
      transformRules,
    }),
    // 由 Iconify 提供支持的纯 CSS 图标解决方案
    presetIcons({
      scale: 1,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],
  // transformers: [transformerDirectives()],
  // attributify: false,
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'z-tar-both': 'z-988',
      'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
      'center': 'flex justify-center items-center',
    },
  ],
  theme: { extend: { opacity: { disabled: 'var(--opacity-disabled)' } }, colors: { primary: 'var(--colors-primary)', secondary: 'var(--colors-secondary)', accent: 'var(--colors-accent)', success: 'var(--colors-success)', warning: 'var(--colors-warning)', error: 'var(--colors-error)', disable: 'var(--colors-disable)', danger: 'var(--colors-danger)', mark: 'var(--colors-mark)', title: 'var(--colors-title)', subtitle: 'var(--colors-subtitle)', paragraph: 'var(--colors-paragraph)', fontColorblack: 'var(--colors-fontColorblack)', fontColorPrimary: 'var(--colors-fontColorPrimary)', fontColorInverse: 'var(--colors-fontColorInverse)', fontColorGrey: 'var(--colors-fontColorGrey)', fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)', fontColorDisable: 'var(--colors-fontColorDisable)', fontColorBottomText: 'var(--colors-fontColorBottomText)', container: 'var(--colors-container)', page: 'var(--colors-page)', containerInverse: 'var(--colors-containerInverse)', containerHover: 'var(--colors-containerHover)', secondaryHover: 'var(--colors-secondaryHover)', containerMask: 'var(--colors-containerMask)', iconButton: 'var(--colors-iconButton)', borderColor: 'var(--colors-borderColor)' }, fontSize: { sm: 'var(--fontSize-sm)', base: 'var(--fontSize-base)', lg: 'var(--fontSize-lg)', title: 'var(--fontSize-title)', subtitle: 'var(--fontSize-subtitle)', paragraph: 'var(--fontSize-paragraph)' }, borderRadius: { sm: 'var(--borderRadius-sm)', base: 'var(--borderRadius-base)', lg: 'var(--borderRadius-lg)', circle: 'var(--borderRadius-circle)' }, spacing: { rowSm: 'var(--spacing-rowSm)', rowBase: 'var(--spacing-rowBase)', rowLg: 'var(--spacing-rowLg)', colSm: 'var(--spacing-colSm)', colBase: 'var(--spacing-colBase)', colLg: 'var(--spacing-colLg)' } },
  transformers: [
    transformerDirectives({
      applyVariable: ['--at-apply', '--uno-apply', '--uno'],
      enforce: 'pre',
    }),
    transformerAttributify({
      classPrefix: prefix,
      transformRules,
      nonValuedAttribute: true,
    }),
    transformerClass({
      transformRules,
    }),
  ],
});