v2.0.0

Highlights

This version adds a loadFile function in your options, which allows you to modify the source file before the srcset is generated. Additionally you can now use other search params and even filter by them in the include option:

// vite.config.ts

import { readFile } from 'fs/promises';
import { defineConfig } from 'vite';
import srcset from 'vite-plugin-srcset';

export default defineConfig({
    plugins: [
        srcset(
            // ORDER OF CONFIGS MATTER!! The first matching config is used
            // SVGs but all black fills are replaced with white
            {
                include: '**/*.svg?white=true',
                async loadFile(id: string) {
                    const fsPath = new URL(id, import.meta.url).pathname;
                    let text = await readFile(fsPath, 'utf-8');
                    text = text.replaceAll('fill="black"', 'fill="white"');
                    return { contents: Buffer.from(text, 'utf-8') };
                }
            },
            // normal SVGs
            {
                include: '**/*.svg',
            },
        )
    ]
});

import iconBlackSrcSet from './icon.svg?srcset';
import iconWhiteSrcSet from './icon.svg?white=true&srcset';

---

Breaking Changes

• Removed export of SUFFIX constant since it is not used anymore internally
  The plugin can now handle other search parameters in addition to srcset. Therefore the SUFFIX constant was removed in its entirety. Check out this commit to see how the new logic is implemented
• Plugin now takes multiple configs as individual parameters instead of one array parameter
  To migrate, simply remove the square braces around your config:

  // vite.config.ts
  export default defineConfig({
    plugins: [
  -   srcset([
  +   srcset(
        {
            // config 1 (see below for list of options)
        },
        {
            // config 2 (see below for list of options)
        },
        // [...]
  -   ]),
  +   ),
      // [...]
    ]
  });

All Changes

• During development a Data URL is used instead of a ?url import from vite.
• A srcset import now allows additional parameters next to srcset. This enables you to match multiple configs with a single image.
• Added loadFile parameter to options
• The plugin factory now takes multiple config parameters instead of one array parameter containing multiple configs
• Updated most dependencies

Full Changelog: v1.1.3...v2.0.0