76 lines
3.5 KiB
TypeScript
76 lines
3.5 KiB
TypeScript
/**
|
|
* 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,
|
|
}),
|
|
],
|
|
});
|