vite.config.ts

import {resolve} from 'path';

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import hq from 'alias-hq';
import external from '@yelo/rollup-node-external';
import dts from 'vite-plugin-dts';
import postcssPresetEnv from 'postcss-preset-env';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: hq.get('rollup'),
    },
    plugins: [
        svgr({
            svgrOptions: {
                typescript: true,
            },
            esbuildOptions: {
                loader: 'tsx',
            },
            include: '**/*.svg?react',
        }),
        react(),
        dts({rollupTypes: true, exclude: ['**/*.stories.(ts|tsx)']}),
    ],
    build: {
        sourcemap: true,
        lib: {
            // Could also be a dictionary or array of multiple entry points
            entry: resolve(__dirname, 'src/lib/index.ts'),
            name: 'Library name',
            // the proper extensions will be added
            fileName: 'index',
        },
        rollupOptions: {
            // make sure to externalize deps that shouldn't be bundled
            // into your library
            external: external({
                whitelist: [/^the-new-css-reset/, /^@material-symbols/, /^@phosphor-icons/],
            }),
            output: {
                // Provide global variables to use in the UMD build
                // for externalized deps
                globals: {
                    react: 'React',
                    'react/jsx-runtime': 'JsxRuntime',
                    'css-vars-hook': 'CssVarsHook',
                    classnames: 'ClassNames',
                    'awesome-debounce-promise': 'AwesomeDebouncePromise',
                },
            },
        },
    },
    css: {
        modules: {
            localsConvention: 'camelCase',
        },
        postcss: {
            plugins: [
                postcssPresetEnv({stage: 1}), // add options if needed
            ],
        },
    },
});