@aleph-alpha/config-vite

Shared Vite configuration and plugins for Aleph Alpha projects.

Installation

pnpm add @aleph-alpha/config-vite

Usage

Extract CSS Plugin

The extractCssPlugin allows you to split CSS into separate chunks for better performance optimization.

import { defineConfig } from 'vite';
import { extractCssPlugin } from '@aleph-alpha/config-vite';

export default defineConfig({
  plugins: [
    extractCssPlugin({
      splitIcons: true,
      splitFonts: true,
      chunkNameIcons: 'icons',
      chunkNameFonts: 'fonts',
      baseUrl: '/my-app/',
      outputDir: 'assets',
      addPreload: true,
      onExtract: (files) => {
        console.log('Extracted CSS files:', files);
      },
    }),
  ],
});

Available Plugins

• extractCssPlugin - Plugin for extracting and splitting CSS chunks (icons, fonts, etc.)

Plugin Options

ExtractCssOptions

• splitIcons?: boolean - Whether to split SVG icons into separate CSS chunk (default: true)
• splitFonts?: boolean - Whether to split font-face declarations into separate CSS chunk (default: true)
• chunkNameIcons?: string - Name for the icons CSS chunk (default: 'icons')
• chunkNameFonts?: string - Name for the fonts CSS chunk (default: 'fonts')
• baseUrl?: string - Base URL for CSS chunks (default: '/'). Examples: /app/, https://cdn.example.com/
• addPreload?: boolean - Whether to add preload links for CSS chunks in HTML head (default: false)
• useHash?: boolean - Whether to use hash in chunk names (default: false)
• outputDir?: string - Output directory for CSS chunks (default: 'assets')
• onExtract?: (files: string[]) => void - Callback function called after CSS extraction

Base URL Configuration

The baseUrl option allows you to specify a custom base URL for your CSS chunks. This is useful when:

• Deploying to a subdirectory (e.g., /my-app/)
• Using a CDN for static assets
• Serving assets from a different domain

Examples

Subdirectory deployment:

extractCssPlugin({
  baseUrl: '/my-app/',
  // Will generate: <link rel="stylesheet" href="/my-app/assets/fonts.css">
})

CDN deployment:

extractCssPlugin({
  baseUrl: 'https://cdn.example.com/',
  // Will generate: <link rel="stylesheet" href="https://cdn.example.com/assets/fonts.css">
})

Root deployment (default):

extractCssPlugin({
  baseUrl: '/', // or omit the option
  // Will generate: <link rel="stylesheet" href="/assets/fonts.css">
})

CSS Imports Feature

When generateImports: true is enabled, the plugin will generate a css-imports.js file that you can import in your JavaScript:

// This will be generated at assets/css-imports.js
import './assets/fonts.css';
import './assets/icons.css';

You can then import this in your main JavaScript file:

import './assets/css-imports.js';

Development

# Install dependencies
pnpm install

This package exports TypeScript source directly - no build step required.