diff --git a/packages/qwik-city/buildtime/vite/image-jsx.ts b/packages/qwik-city/buildtime/vite/image-jsx.ts index 6dc0543c309..9f3c6bdb42f 100644 --- a/packages/qwik-city/buildtime/vite/image-jsx.ts +++ b/packages/qwik-city/buildtime/vite/image-jsx.ts @@ -5,6 +5,7 @@ import fs from 'node:fs'; import path from 'node:path'; import { parseId } from 'packages/qwik/src/optimizer/src/plugins/plugin'; import type { QwikCityVitePluginOptions } from './types'; +import type { Config as SVGOConfig } from 'svgo'; /** @public */ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[] { @@ -111,8 +112,31 @@ export function optimizeSvg( userOpts?: QwikCityVitePluginOptions ) { const svgAttributes: Record = {}; - // note: would be great if it warned users if they tried to use qwik-default plugins, so that name collisions are avoided - const userPlugins = userOpts?.imageOptimization?.svgo?.plugins || []; + const prefixIdsConfiguration = userOpts?.imageOptimization?.svgo?.prefixIds; + const maybePrefixIdsPlugin: SVGOConfig['plugins'] = + prefixIdsConfiguration !== false ? [{ name: 'prefixIds', params: prefixIdsConfiguration }] : []; + + const userPlugins = + userOpts?.imageOptimization?.svgo?.plugins?.filter((plugin) => { + if ( + plugin === 'preset-default' || + (typeof plugin === 'object' && plugin.name === 'preset-default') + ) { + console.warn( + `You are trying to use the preset-default SVGO plugin. This plugin is already included by default, you can customize it through the defaultPresetOverrides option.` + ); + return false; + } + + if (plugin === 'prefixIds' || (typeof plugin === 'object' && plugin.name === 'prefixIds')) { + console.warn( + `You are trying to use the preset-default SVGO plugin. This plugin is already included by default, you can customize it through the prefixIds option.` + ); + return false; + } + + return true; + }) || []; const data = optimize(code, { floatPrecision: userOpts?.imageOptimization?.svgo?.floatPrecision, @@ -144,6 +168,7 @@ export function optimizeSvg( }; }, }, + ...maybePrefixIdsPlugin, ...userPlugins, ], }).data; diff --git a/packages/qwik-city/buildtime/vite/image-jsx.unit.ts b/packages/qwik-city/buildtime/vite/image-jsx.unit.ts index a303f5b534c..3aaedb17af6 100644 --- a/packages/qwik-city/buildtime/vite/image-jsx.unit.ts +++ b/packages/qwik-city/buildtime/vite/image-jsx.unit.ts @@ -46,27 +46,22 @@ test('optimize svgs by path', () => { optimizeSvg({ code: file.content, path: file.path }) ); - assert.isTrue( - defaultOptimizedSvgs.every((svg) => svg.data.startsWith(' svg.data.startsWith(' +test('prefixIds plugin should be disableable', () => { + const defaultOptimizedSvgs = svgsFilesWithDefsTag.map((file) => optimizeSvg( { code: file.content, path: file.path }, - { - imageOptimization: { - svgo: { - plugins: ['prefixIds'], - }, - }, - } + { imageOptimization: { svgo: { prefixIds: false } } } ) ); - // ids should have different names if prefixIds plugin is explicitly added by users - assert.isFalse( - optimizedSvgsWithUserConfig.some((svg) => - svg.data.startsWith(' svg.data.startsWith(' & { defaultPresetOverrides?: SVGOBuiltinPluginsWithOptionalParams['preset-default']['overrides']; + prefixIds?: SVGOBuiltinPluginsWithOptionalParams['prefixIds'] | false; }; enabled?: boolean | 'only-production'; }