pdh-design-system/vite.config.js

PDH Design System React Components

import { defineConfig } from 'vite'
import { resolve } from 'path'
import react from '@vitejs/plugin-react-swc'
import dts from 'vite-plugin-dts'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { globSync } from 'tinyglobby'
import { mkdirSync, copyFileSync, writeFileSync } from 'node:fs'
import path from 'path'
import sass from 'sass'
import tsconfigPaths from "vite-tsconfig-paths";

import pkg from './package.json'

// Plugin to process SCSS files
const processSCSS = () => {
  return {
    name: 'process-scss',
    apply: 'build',
    async writeBundle() {
      // Find all SCSS files
      const scssFiles = globSync('src/**/*.scss')
      
      // Create the scss and css directories if they don't exist
      mkdirSync('dist/scss', { recursive: true })
      mkdirSync('dist/css', { recursive: true })
      
      // Process each file
      for (const file of scssFiles) {
        const relativePath = file.replace('src/', '')
        const scssDestPath = `dist/scss/${relativePath}`
        
        // Create parent directories if needed
        mkdirSync(path.dirname(scssDestPath), { recursive: true })
        
        // Copy the original SCSS file
        copyFileSync(file, scssDestPath)
        console.log(`Copied: ${file} -> ${scssDestPath}`)
        
        // Compile SCSS to CSS
        const result = sass.compile(file, {
          loadPaths: ['node_modules']
        })
        
        // Determine CSS destination path
        let cssDestPath
        if (file.endsWith('globalstyles.scss')) {
          cssDestPath = `dist/pdh-design-system.css`
        } else {
          cssDestPath = `dist/css/${relativePath.replace('.scss', '.css')}`
          mkdirSync(path.dirname(cssDestPath), { recursive: true })
        }
        
        // Write the compiled CSS
        writeFileSync(cssDestPath, result.css)
        console.log(`Compiled: ${file} -> ${cssDestPath}`)
      }
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
    libInjectCss(),
    dts({
      include: ['src'],
      rollupTypes: true,
      insertTypesEntry: true
    }),
    processSCSS(),
    viteStaticCopy({
      targets: [
        {
          src: 'assets/*',
          dest: '.'
        }
      ]
    })
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
    },
    sourcemap: true,
    outDir: 'dist',
    rollupOptions: {
      external: [...Object.keys(pkg.peerDependencies || {}), /^react-bootstrap\/.*/],
      output: [
        {
          format: 'cjs',
          entryFileNames: 'cjs/index.js',
          dir: 'dist'
        },
        {
          format: 'esm',
          entryFileNames: 'esm/index.js',
          dir: 'dist'
        }
      ]
    },
    copyPublicDir: false,
    assetsDir: 'assets',
    cssCodeSplit: true,
    assetsInlineLimit: 0
  }
})