michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated srcset checking (#1462)

Browse source 
* 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:
Matthew Phillips 2021-09-30 09:58:20 -04:00 committed by GitHub
parent 472d308950
commit 82672e5c47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/astro/package.json
View file

@ -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",

22
packages/astro/src/build.ts
View file

@ -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 }));
}
}
});

22
packages/astro/test/fixtures/astro-assets/src/pages/index.astro vendored
View file

@ -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>

5
yarn.lock
View file

@ -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"