mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Updated srcset checking (#1462)
* Updated srcset checking Improved functionality of `srcset` checking as original failed when URL contained a comma ( `,` ). Utilised function from [srcset-parse](https://github.com/molefrog/srcset-parse) as couldn't find a way to integrate the package. Added test to current assets test rather than create a separate one. * Use srcset-parse Co-authored-by: Coel May <82788995+coelmay@users.noreply.github.com>
This commit is contained in:
parent
472d308950
commit
82672e5c47
4 changed files with 45 additions and 5 deletions
|
@ -97,6 +97,7 @@
|
|||
"shorthash": "^0.0.2",
|
||||
"slash": "^4.0.0",
|
||||
"snowpack": "^3.8.6",
|
||||
"srcset-parse": "^1.1.0",
|
||||
"string-width": "^5.0.0",
|
||||
"supports-esm": "^1.0.0",
|
||||
"tiny-glob": "^0.2.8",
|
||||
|
|
|
@ -8,6 +8,7 @@ import path from 'path';
|
|||
import { performance } from 'perf_hooks';
|
||||
import glob from 'tiny-glob';
|
||||
import hash from 'shorthash';
|
||||
import srcsetParse from 'srcset-parse';
|
||||
import { fileURLToPath } from 'url';
|
||||
import type { AstroConfig, BuildOutput, BundleMap, PageDependencies, RouteData, RuntimeMode, ScriptInfo } from './@types/astro';
|
||||
import { bundleCSS } from './build/bundle/css.js';
|
||||
|
@ -20,6 +21,9 @@ import type { LogOptions } from './logger';
|
|||
import { debug, defaultLogDestination, defaultLogLevel, error, info, warn } from './logger.js';
|
||||
import { createRuntime, LoadResult } from './runtime.js';
|
||||
|
||||
// This package isn't real ESM, so have to coerce it
|
||||
const matchSrcset: typeof srcsetParse = (srcsetParse as any).default;
|
||||
|
||||
const defaultLogging: LogOptions = {
|
||||
level: defaultLogLevel,
|
||||
dest: defaultLogDestination,
|
||||
|
@ -338,11 +342,19 @@ export function findDeps(html: string, { astroConfig, srcPath }: { astroConfig:
|
|||
|
||||
$('img[srcset]').each((_i, el) => {
|
||||
const srcset = $(el).attr('srcset') || '';
|
||||
const sources = srcset.split(',');
|
||||
const srces = sources.map((s) => s.trim().split(' ')[0]);
|
||||
for (const src of srces) {
|
||||
if (!isRemoteOrEmbedded(src)) {
|
||||
pageDeps.images.add(getDistPath(src, { astroConfig, srcPath }));
|
||||
for (const src of matchSrcset(srcset)) {
|
||||
if (!isRemoteOrEmbedded(src.url)) {
|
||||
pageDeps.images.add(getDistPath(src.url, { astroConfig, srcPath }));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add in srcset check for <source>
|
||||
$('source[srcset]').each((_i, el) => {
|
||||
const srcset = $(el).attr('srcset') || '';
|
||||
for (const src of matchSrcset(srcset)) {
|
||||
if (!isRemoteOrEmbedded(src.url)) {
|
||||
pageDeps.images.add(getDistPath(src.url, { astroConfig, srcPath }));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -6,5 +6,27 @@
|
|||
<body>
|
||||
<h1>Icons</h1>
|
||||
<img src="/_astro/src/images/twitter.png" srcset="/_astro/src/images/twitter.png 1x, /_astro/src/images/twitter@2x.png 2x, /_astro/src/images/twitter@3x.png 3x" />
|
||||
<!--
|
||||
In Astro (0.20.4 and below) these srcsets will cause a build fail.
|
||||
Error (for Assets Test)
|
||||
[build] file:///astro/packages/astro/test/fixtures/astro-assets/src/pages/index.astro: could not find "/_astro/src/pages/h-300/medium_cafe_B1iTdD0C.jpg"
|
||||
-->
|
||||
<img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
|
||||
<img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 1.5x, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 2x">
|
||||
<!--
|
||||
A srcset in <source> does not trigger an error in aforementioned versions
|
||||
as no checking is done for this tag (a good way to circumvent the check.)
|
||||
-->
|
||||
<picture>
|
||||
<!--
|
||||
This will cause build fail
|
||||
[build] file:///astro/packages/astro/test/fixtures/astro-assets/src/pages/index.astro: could not find "/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg"
|
||||
-->
|
||||
<!-- <source srcset="/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, /demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, /demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w"> -->
|
||||
<!--
|
||||
This will pass
|
||||
-->
|
||||
<source srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
|
||||
</picture>
|
||||
</body>
|
||||
</html>
|
|
@ -9672,6 +9672,11 @@ sprintf-js@~1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
|
||||
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
|
||||
|
||||
srcset-parse@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/srcset-parse/-/srcset-parse-1.1.0.tgz#73f787f38b73ede2c5af775e0a3465579488122b"
|
||||
integrity sha512-JWp4cG2eybkvKA1QUHGoNK6JDEYcOnSuhzNGjZuYUPqXreDl/VkkvP2sZW7Rmh+icuCttrR9ccb2WPIazyM/Cw==
|
||||
|
||||
sshpk@^1.7.0:
|
||||
version "1.16.1"
|
||||
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
|
||||
|
|
Loading…
Reference in a new issue