sveltejs / sveltejs/kit

Allow passing imagetools options to `enhancedImages()`

Open
#16,923 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:enhanced-img
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

enhancedImages() builds its vite-imagetools instance internally and takes no arguments, so there is no way to scope it. Every image import carrying a query goes through imagetools, plain Vite asset queries included: import icon from "./icon.png?url&no-inline" gets decoded and re-encoded with sharp's defaults. In our repo that turns a 2,917-byte palette PNG into 5,057 bytes of truecolour.

Only ?enhanced imports are meant to be transformed — that is what defaultDirectives keys off — but the plugin is handed everything else too, and imagetools treats a non-empty query as a reason to work (JonasKruckenberg/imagetools#748). The fix offered there is imagetools({ exclude: [...] }), which can't be reached from here. The open PR against it (JonasKruckenberg/imagetools#750) only skips queries that are exactly ?url or ?raw, so ?url&no-inline would still be transformed even if it lands.

Describe the proposed solution

Let enhancedImages() accept the imagetools options it doesn't already own — exclude at minimum — and merge them with defaultDirectives and namedExports:

enhancedImages({ exclude: [/[?&](url|raw)(&|$)/] })
Alternatives considered

Skipping images whose query carries no enhanced directive, since defaultDirectives already returns nothing for them. That fixes the common case without an API change, though it leaves anyone wanting other imagetools options in the same spot.

Filtering the plugins enhancedImages() returns, in userland. Works, but it means reaching into the plugin's internals from the Vite config.

Importance

would make my life easier

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the enhancedImages() implementation and any tests covering image imports or plugin options. Trace how defaultDirectives and namedExports are passed to imagetools, then verify that caller-supplied options such as exclude are preserved and that query-only imports are handled as intended.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
build-system, tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
66/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.