ui/vite.config.base.ts at master · wyrd-code/ui · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/* eslint-disable import/no-unresolved */
// import { fileURLToPath, URL } from 'url'

import { resolve } from 'path'

import postcssAtVariables from 'postcss-at-rules-variables'
// import postcssColorFunction from 'postcss-color-function'
// import postcssAtIf from 'postcss-conditionals'
import postcssAtEach from 'postcss-each'
// import postcssAtFor from 'postcss-for'
import postcssAtImport from 'postcss-import'
import postcssNested from 'postcss-nested'
import postcssPrefixer from 'postcss-prefix-selector'
// import { visualizer } from 'rollup-plugin-visualizer'
import Unocss from 'unocss/vite'
import Components from 'unplugin-vue-components/vite'
import { UserConfig } from 'vite'
import dts from 'vite-plugin-dts'
import mix from 'vite-plugin-mix'
import svgLoader from 'vite-svg-loader'

const config: UserConfig = {
  resolve: {
    alias: {
      '@': resolve(process.cwd(), 'src'),
      // '@': fileURLToPath(new URL('./', import.meta.url)),
    },
  },
  plugins: [
    svgLoader(),
    Unocss(),
    dts({
      root: '.',
      entryRoot: '.',
    }),
    Components({
      dts: false,
      resolvers: [
        (name) => {
          if (name.startsWith('Wui')) return { name, from: '@/components' }
        },
      ],
    }),
    mix({
      handler: resolve(process.cwd(), 'src/api.handler.ts'),
    }),
    // visualizer({
    //   open: false,
    //   title: 'Wyrd UI Bundle Visualizer',
    // }),
  ],
  css: {
    postcss: {
      plugins: [
        postcssAtVariables({
          /* atRules: ['media'] */
        }),
        // postcssColorFunction(),
        postcssAtEach(),
        postcssAtImport({
          plugins: [
            postcssAtVariables,
            // postcssImport,
            // require('postcss-at-rules-variables')({ /* options */ }),
            // require('postcss-import')
          ],
        }),
        // postcssAtFor(),
        // postcssAtIf(),
        // postcssCssVariables(),
        postcssNested({
          bubble: ['screen'],
        }),
        // https://vitepress.vuejs.org/guide/markdown#custom-containers
        postcssPrefixer({
          prefix: ':not(:where(.vp-raw *))',
          includeFiles: [/vp-doc\.css/],
          transform(prefix, _selector) {
            const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
            return selector + prefix + pseudo
          },
        }),
      ],
    },
  },
  // build: {
  //   emptyOutDir: true,
  //   sourcemap: false,
  //   lib: {
  //     entry: resolve(__dirname, 'src/index.ts'),
  //     name: 'wyrd-ui',
  //     fileName: 'index',
  //     // formats: [
  //     //   'es', // generates .js (for type=module) or .mjs file (for node)
  //     //   'cjs', // generates .js file
  //     //   'umd', // generates umd file
  //     // ],
  //   },
  //   rollupOptions: {
  //     // preserveModules: true, // vite (v2.9.9) tree shaking doesn't work without this
  //     external: ['vue', 'vue-router'],
  //     output: {
  //       // inlineDynamicImports: true,
  //       globals: {
  //         vue: 'Vue',
  //         'vue-router': 'VueRouter',
  //       },
  //     },
  //   },
  // },
}

export default config