react-router-tutorial/uno.config.js at main · yulei-chen/react-router-tutorial · GitHub

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
import {
  defineConfig,
  presetUno,
  presetIcons,
  presetWebFonts,
  presetTypography,
} from 'unocss'
import { THEME } from './lib/constants'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons(),
    presetWebFonts({
      provider: 'google',
      fonts: {
        montserrat: [
          {
            name: 'Montserrat',
            weights: [700, 800, 900],
          },
          {
            name: 'sans-serif',
            provider: 'none',
          },
        ],
        merriweather: [
          {
            name: 'Merriweather',
            weights: [400, 700],
          },
          {
            name: 'serif',
            provider: 'none',
          },
        ],
      },
    }),
    presetTypography(),
  ],
  theme: {
    colors: {
      brand: {
        1: 'var(--brand-1)',
        2: 'var(--brand-2)',
      },
    },
  },
  // https://unocss.dev/guide/extracting#safelist
  safelist: [
    ...Object.values(THEME).map(
      (theme) => `from-${theme.brand2}`
    ),
    ...Object.values(THEME).map(
      (theme) => `to-${theme.brand1}`
    ),
    'from-brand-2',
    'to-brand-1',
  ],
  rules: [
    [
      'animate-scale',
      {
        animation: 'scaleOut 1s linear 1',
      },
    ],
    ['h-2full', { height: 'max(200vh, 200vw)' }],
    ['w-2full', { width: 'max(200vh, 200vw)' }],
  ],
  transformers: [transformerDirectives()],
})