From af18abeb4cefe6df5f88b0e1faa8df8eb2247c99 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 29 Mar 2024 08:14:44 -0700 Subject: [PATCH] chore(deps): upgrade vite-imagetools to v7 (#12055) --- .changeset/weak-seas-approve.md | 5 +++++ .../docs/40-best-practices/07-images.md | 3 ++- packages/enhanced-img/package.json | 2 +- pnpm-lock.yaml | 18 +++++++++--------- 4 files changed, 17 insertions(+), 11 deletions(-) create mode 100644 .changeset/weak-seas-approve.md diff --git a/.changeset/weak-seas-approve.md b/.changeset/weak-seas-approve.md new file mode 100644 index 000000000000..555d763e105a --- /dev/null +++ b/.changeset/weak-seas-approve.md @@ -0,0 +1,5 @@ +--- +"@sveltejs/enhanced-img": minor +--- + +chore(deps): upgrade vite-imagetools to v7 diff --git a/documentation/docs/40-best-practices/07-images.md b/documentation/docs/40-best-practices/07-images.md index bc2811b05802..876b95bd576b 100644 --- a/documentation/docs/40-best-practices/07-images.md +++ b/documentation/docs/40-best-practices/07-images.md @@ -51,6 +51,8 @@ export default defineConfig({ }); ``` +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. + ### Basic usage Use in your `.svelte` components by using `` rather than `` 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 - 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. - Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this. - 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. - diff --git a/packages/enhanced-img/package.json b/packages/enhanced-img/package.json index 1abacbef5347..c151dc104c98 100644 --- a/packages/enhanced-img/package.json +++ b/packages/enhanced-img/package.json @@ -28,7 +28,7 @@ "dependencies": { "magic-string": "^0.30.5", "svelte-parse-markup": "^0.1.2", - "vite-imagetools": "^6.2.8" + "vite-imagetools": "^7.0.0" }, "devDependencies": { "@types/estree": "^1.0.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 87d40612162f..a522a03acf57 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -380,8 +380,8 @@ importers: specifier: ^0.1.2 version: 0.1.2(svelte@4.2.10) vite-imagetools: - specifier: ^6.2.8 - version: 6.2.9(rollup@4.9.6) + specifier: ^7.0.0 + version: 7.0.0(rollup@4.9.6) devDependencies: '@types/estree': specifier: ^1.0.5 @@ -4582,9 +4582,9 @@ packages: engines: {node: '>= 4'} dev: true - /imagetools-core@6.0.4: - resolution: {integrity: sha512-N1qs5qn7u9nR3kboISkYuvJm8MohiphCfBa+wx1UOropVaFis9/mh6wuDPLHJNhl6/64C7q2Pch5NASVKAaSrg==} - engines: {node: '>=12.0.0'} + /imagetools-core@7.0.0: + resolution: {integrity: sha512-6fYbD7u4VIOt6fqKrOlbF77JXgUVyUmEJIPlfYVTuR/S2Ig9cX3gukGiLEU0aSetcfE7CYnhLTPtTEu4mLwhCw==} + engines: {node: '>=18.0.0'} dependencies: sharp: 0.33.2 dev: false @@ -6936,12 +6936,12 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite-imagetools@6.2.9(rollup@4.9.6): - resolution: {integrity: sha512-C4ZYhgj2vAj43/TpZ06XlDNP0p/7LIeYbgUYr+xG44nM++4HGX6YZBKAYpiBNgiCFUTJ6eXkRppWBrfPMevgmg==} - engines: {node: '>=12.0.0'} + /vite-imagetools@7.0.0(rollup@4.9.6): + resolution: {integrity: sha512-RNCW15Z/m5Y6HJROH8F7yQsqAy1//aJwIQI4Rffaf5rXJCrx/YPO0FV71w95rH6rmNW0S40gttXnd+zPx4m3rQ==} + engines: {node: '>=18.0.0'} dependencies: '@rollup/pluginutils': 5.1.0(rollup@4.9.6) - imagetools-core: 6.0.4 + imagetools-core: 7.0.0 transitivePeerDependencies: - rollup dev: false