|
|
@@ -1,7 +1,134 @@
|
|
|
import UnoCss from 'unocss/vite';
|
|
|
|
|
|
export default () => {
|
|
|
- return UnoCss({
|
|
|
- hmrTopLevelAwait: false // unocss默认是true，低版本浏览器是不支持的，启动后会报错
|
|
|
- });
|
|
|
+ return UnoCss({
|
|
|
+ hmrTopLevelAwait: false, // unocss默认是true，低版本浏览器是不支持的，启动后会报错
|
|
|
+ rules: [
|
|
|
+ [/^mg-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
|
|
|
+ [/^pd-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
|
|
|
+ [/^bg-([\w-]+)$/, ([_, color]) => ({ 'background-color': color })],
|
|
|
+ [/^c-([\w-]+)$/, ([_, color]) => ({ color: color })],
|
|
|
+ [/^bc-([\w-]+)$/, ([_, color]) => ({ 'border-color': color })],
|
|
|
+ [/^rounded-([\.\d]+)$/, ([_, num]) => ({ 'border-radius': `${num}px` })],
|
|
|
+ // 下边距
|
|
|
+ [/^mb-([\.\d]+)$/, ([_, num]) => ({ 'margin-bottom': `${num}px` })],
|
|
|
+ // 上边距
|
|
|
+ [/^mt-([\.\d]+)$/, ([_, num]) => ({ 'margin-top': `${num}px` })],
|
|
|
+ // 左边距
|
|
|
+ [/^ml-([\.\d]+)$/, ([_, num]) => ({ 'margin-left': `${num}px` })],
|
|
|
+ // 右边距
|
|
|
+ [/^mr-([\.\d]+)$/, ([_, num]) => ({ 'margin-right': `${num}px` })],
|
|
|
+ // 上padding
|
|
|
+ [/^pt-([\.\d]+)$/, ([_, num]) => ({ 'padding-top': `${num}px` })],
|
|
|
+ // 下padding
|
|
|
+ [/^pb-([\.\d]+)$/, ([_, num]) => ({ 'padding-bottom': `${num}px` })],
|
|
|
+ // pd3-40-0-20
|
|
|
+ // padding
|
|
|
+ [
|
|
|
+ /^pd3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, top, right, bottom]) => ({
|
|
|
+ padding: `${top}px ${right}px ${bottom}px`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // pd2-40-20
|
|
|
+ [
|
|
|
+ /^pd2-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, top, right]) => ({
|
|
|
+ padding: `${top}px ${right}px`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // pd4-40-20-10-5
|
|
|
+ [
|
|
|
+ /^pd4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, top, right, bottom, left]) => ({
|
|
|
+ padding: `${top}px ${right}px ${bottom}px ${left}px`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // mg2-40-20
|
|
|
+ [
|
|
|
+ /^mg2-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, top, right]) => ({
|
|
|
+ margin: `${top}px ${right}px`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // mg3-40-20-10
|
|
|
+ [
|
|
|
+ /^mg3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, top, right, bottom]) => ({
|
|
|
+ margin: `${top}px ${right}px ${bottom}px`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // mg4-40-20-10-5
|
|
|
+ [
|
|
|
+ /^mg4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, top, right, bottom, left]) => ({
|
|
|
+ margin: `${top}px ${right}px ${bottom}px ${left}px`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // 左padding
|
|
|
+ [/^pl-([\.\d]+)$/, ([_, num]) => ({ 'padding-left': `${num}px` })],
|
|
|
+ // 右padding
|
|
|
+ [/^pr-([\.\d]+)$/, ([_, num]) => ({ 'padding-right': `${num}px` })],
|
|
|
+ // 字体大小
|
|
|
+ [/^f-s-([\.\d]+)$/, ([_, num]) => ({ 'font-size': `${num}px` })],
|
|
|
+ // 字体加粗
|
|
|
+ [/^f-w-([\.\d]+)$/, ([_, num]) => ({ 'font-weight': `${num}` })],
|
|
|
+ // 宽
|
|
|
+ [/^w-([\.\d]+)$/, ([_, num]) => ({ width: `${num}px` })],
|
|
|
+ // 高
|
|
|
+ [/^h-([\.\d]+)$/, ([_, num]) => ({ height: `${num}px` })],
|
|
|
+ // 带透明度的可传入颜色计算rgba值加背景
|
|
|
+ // 行高
|
|
|
+ [/^lh-([\.\d]+)$/, ([_, num]) => ({ 'line-height': `${num}` })],
|
|
|
+ // 黑色透明度
|
|
|
+ [
|
|
|
+ /^bg-black-([\.\d]+)$/,
|
|
|
+ ([_, num]) => ({
|
|
|
+ 'background-color': `rgba(0, 0, 0, ${num})`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // 透明度
|
|
|
+ [
|
|
|
+ /^opacity-([\.\d]+)$/,
|
|
|
+ ([_, num]) => ({
|
|
|
+ opacity: `${num}`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // z-index
|
|
|
+ [
|
|
|
+ /^z-index-([\.\d]+)$/,
|
|
|
+ ([_, num]) => ({
|
|
|
+ 'z-index': `${num}`
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // 百分比高度
|
|
|
+ [/^h-([\.\d]+)%$/, ([_, num]) => ({ height: `${num}%` })],
|
|
|
+ [
|
|
|
+ /^wrapper-([\.\d]+)-([\.\d]+)$/,
|
|
|
+ ([_, maxWidth, minWidth]) => ({
|
|
|
+ 'max-width': `${maxWidth}px`,
|
|
|
+ 'min-width': `${minWidth}px`,
|
|
|
+ margin: '0 auto',
|
|
|
+ padding: '0 20px'
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ // 最大宽
|
|
|
+ [/^max-w-([\.\d]+)$/, ([_, num]) => ({ 'max-width': `${num}px` })],
|
|
|
+ // 最小宽
|
|
|
+ [/^min-w-([\.\d]+)$/, ([_, num]) => ({ 'min-width': `${num}px` })],
|
|
|
+ // 最大高
|
|
|
+ [/^max-h-([\.\d]+)$/, ([_, num]) => ({ 'max-height': `${num}px` })],
|
|
|
+ // 最小高
|
|
|
+ [/^min-h-([\.\d]+)$/, ([_, num]) => ({ 'min-height': `${num}px` })],
|
|
|
+ // 栅格 30份
|
|
|
+ [/^hcol-([\.\d]+)$/, ([_, num]) => ({ width: `${(+num / 30) * 100}%` })],
|
|
|
+ // border-radius-8
|
|
|
+ [
|
|
|
+ /^border-radius-([\.\d]+)$/,
|
|
|
+ ([_, num]) => ({
|
|
|
+ 'border-radius': `${num}px`
|
|
|
+ })
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ });
|
|
|
};
|
