Skip to content

Commit af18abe

Browse files
authored
chore(deps): upgrade vite-imagetools to v7 (#12055)
1 parent 8038643 commit af18abe

File tree

4 files changed

+17
-11
lines changed

4 files changed

+17
-11
lines changed

.changeset/weak-seas-approve.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sveltejs/enhanced-img": minor
3+
---
4+
5+
chore(deps): upgrade vite-imagetools to v7

documentation/docs/40-best-practices/07-images.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ export default defineConfig({
5151
});
5252
```
5353

54+
Building will take longer on the first build due to the computational expense of transforming images. However, the build output will be cached in `./node_modules/.cache/imagetools` so that subsequent builds will be fast.
55+
5456
### Basic usage
5557

5658
Use in your `.svelte` components by using `<enhanced:img>` rather than `<img>` and referencing the image file with a [Vite asset import](https://vitejs.dev/guide/assets.html#static-asset-handling) path:
@@ -151,4 +153,3 @@ CDNs can generally be used without any need for a library. However, there are a
151153
- Give the image a container or styling so that it is constrained and does not jump around while the page is loading affecting your [cumulative layout shift (CLS)](https://web.dev/articles/cls). `width` and `height` help the browser to reserve space while the image is still loading, so `@sveltejs/enhanced-img` will add a `width` and `height` for you.
152154
- Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this.
153155
- Do not use `em` or `rem` in `sizes` and change the default size of these measures. When used in `sizes` or `@media` queries, `em` and `rem` are both defined to mean the user's default `font-size`. For a `sizes` declaration like `sizes="(min-width: 768px) min(100vw, 108rem), 64rem"`, the actual `em` or `rem` that controls how the image is laid out on the page can be different if changed by CSS. For example, do not do something like `html { font-size: 62.5%; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.
154-

packages/enhanced-img/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"dependencies": {
2929
"magic-string": "^0.30.5",
3030
"svelte-parse-markup": "^0.1.2",
31-
"vite-imagetools": "^6.2.8"
31+
"vite-imagetools": "^7.0.0"
3232
},
3333
"devDependencies": {
3434
"@types/estree": "^1.0.5",

pnpm-lock.yaml

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)