import { defineConfig } from 'vite';
import purgecss from '@fullhuman/postcss-purgecss';
import imagemin from 'vite-plugin-imagemin';

export default defineConfig({
  define: {
    __APP_ENV__: JSON.stringify(process.env.APP_ENV || 'development'),
  },
  plugins: [
    imagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      svgo: {
        quality: 20,
      },
    }),
  ],
  // Add this to ensure Twig files are processed correctly
  optimizeDeps: {
    include: ['./src/pages/*.twig'],
  },
  assetsInclude: ['**/*.twig'],
  css: {
    preprocessorOptions: {
      scss: {
        // Здесь можно добавить глобальные переменные или миксины SCSS
        // additionalData: `@import "./src/styles/_variables.scss";`
      },
    },
    // Font Optimization: Consider using font-display: swap in your CSS for better font loading.
    // For critical fonts, consider preloading them in index.html: <link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin>
    postcss: {
      plugins: [
        process.env.NODE_ENV === 'production' &&
          purgecss({
            content: [
              './index.html',
              './src/**/*.js',
              './src/**/*.vue',
            ],
            defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
            safelist: { deep: [/^(.*?)$/] }, // Keep all classes for now, adjust as needed
          }),
      ].filter(Boolean),
    },
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      input: {
        main: 'index.html',
        modal: 'modal.html',
        tabs: 'tabs.html',
        slider: 'slider.html',
        accordion: 'accordion.html',
      },
    },
  },
});