Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
Code Issues Activity

Add support for building srcset on images (#911)

Browse source 
* Add support for building srcset on images

* Added a changeset
This commit is contained in:
Matthew Phillips 2021-07-28 14:07:28 -04:00 committed by GitHub
parent fdb1c15d75
commit 23b0d2d345
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/new-crews-return.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Adds support for image srcset to the build

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

@ -265,7 +265,7 @@ export function findDeps(html: string, { astroConfig, srcPath }: { astroConfig:
const $ = cheerio.load(html);
$('script').each((i, el) => {
$('script').each((_i, el) => {
const src = $(el).attr('src');
if (src) {
if (isRemote(src)) return;
@ -283,7 +283,7 @@ export function findDeps(html: string, { astroConfig, srcPath }: { astroConfig:
}
});
$('link[href]').each((i, el) => {
$('link[href]').each((_i, el) => {
const href = $(el).attr('href');
if (href && !isRemote(href) && ($(el).attr('rel') === 'stylesheet' || $(el).attr('type') === 'text/css' || href.endsWith('.css'))) {
const dist = getDistPath(href, { astroConfig, srcPath });
@ -291,13 +291,22 @@ export function findDeps(html: string, { astroConfig, srcPath }: { astroConfig:
}
});
$('img[src]').each((i, el) => {
$('img[src]').each((_i, el) => {
const src = $(el).attr('src');
if (src && !isRemote(src)) {
pageDeps.images.add(getDistPath(src, { astroConfig, srcPath }));
}
});
$('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) {
pageDeps.images.add(getDistPath(src, { astroConfig, srcPath }));
}
});
// important: preserve the scan order of deps! order matters on pages
return pageDeps;

25
packages/astro/test/astro-assets.test.js Normal file
View file

@ -0,0 +1,25 @@
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { setup, setupBuild } from './helpers.js';
const Assets = suite('Assets');
setup(Assets, './fixtures/astro-assets');
setupBuild(Assets, './fixtures/astro-assets');
Assets('srcset is copied in the build', async ({ build, readFile }) => {
await build().catch((err) => {
assert.ok(!err, 'Error during the build');
});
let oneX = await readFile('/_astro/src/images/twitter.png');
assert.ok(oneX, 'built the base image');
let twoX = await readFile('/_astro/src/images/twitter@2x.png');
assert.ok(twoX, 'built the 2x image');
let threeX = await readFile('/_astro/src/images/twitter@3x.png');
assert.ok(threeX, 'build the 3x image');
});
Assets.run();

3
packages/astro/test/fixtures/astro-assets/snowpack.config.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"workspaceRoot": "../../../../../"
}

BIN
packages/astro/test/fixtures/astro-assets/src/images/twitter.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 457 B

BIN
packages/astro/test/fixtures/astro-assets/src/images/twitter@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 871 B

BIN
packages/astro/test/fixtures/astro-assets/src/images/twitter@3x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

@ -0,0 +1,10 @@
<html lang="en">
<head><title>This Site</title></head>
<style>
body { background: black; }
</style>
<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" />
</body>
</html>