-
Notifications
You must be signed in to change notification settings - Fork 0
/
uno.config.ts
83 lines (76 loc) · 1.99 KB
/
uno.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { defineConfig, presetUno } from "unocss";
import transformerDirectives from "@unocss/transformer-directives";
import transformerVariantGroup from "@unocss/transformer-variant-group";
import coloradix, { gray, slate, red, green, orange, blue, rename } from "@coloradix/unocss";
const radix = coloradix(
rename({
gray,
slate,
red,
green,
orange,
blue,
}).to({
gray: "xn",
slate: "xp",
red: "xe",
green: "xs",
orange: "xw",
blue: "xi",
})
)
.alias({
vn: "xn",
vp: "xp",
ve: "xe",
vs: "xs",
vw: "xw",
vi: "xi",
})
.build();
const breakpoints = {
xs: "640px",
s: "768px",
m: "1024px",
l: "1280px",
xl: "1536px",
};
export default defineConfig({
content: { pipeline: { include: [/\.([jt]sx|html)($|\?)/, "src/**/*.{js,ts}"] } },
theme: { breakpoints, colors: radix.colors },
preflights: [radix.preflight],
transformers: [transformerDirectives(), transformerVariantGroup()],
presets: [presetUno()],
safelist: (() => {
const breakpoint = Object.keys(breakpoints);
const responsive = (...classNames: string[]) => {
const result: string[] = [];
classNames.forEach((className) => result.push(className, ...breakpoint.map((breakpoint) => `${breakpoint}:${className}`)));
return result;
};
const spacing = (name: string) => {
return [`${name}0`, `${name}1`, `${name}2`, `${name}3`, `${name}4`, `${name}5`, `${name}6`, `${name}7`, `${name}8`, `${name}9`];
};
return [
...responsive("hidden", "block", "inline-block", "flex", "inline-flex"),
...responsive(
...spacing("m"),
...spacing("mx"),
...spacing("my"),
...spacing("mt"),
...spacing("mr"),
...spacing("mb"),
...spacing("ml")
),
...responsive(
...spacing("p"),
...spacing("px"),
...spacing("py"),
...spacing("pt"),
...spacing("pr"),
...spacing("pb"),
...spacing("pl")
),
];
})(),
});