From 23b0d2d345312eb072998d043fe84a5addbd6c04 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 28 Jul 2021 14:07:28 -0400 Subject: [PATCH] Add support for building srcset on images (#911) * Add support for building srcset on images * Added a changeset --- .changeset/new-crews-return.md | 5 ++++ packages/astro/src/build.ts | 15 ++++++++--- packages/astro/test/astro-assets.test.js | 25 ++++++++++++++++++ .../astro-assets/snowpack.config.json | 3 +++ .../astro-assets/src/images/twitter.png | Bin 0 -> 457 bytes .../astro-assets/src/images/twitter@2x.png | Bin 0 -> 871 bytes .../astro-assets/src/images/twitter@3x.png | Bin 0 -> 1276 bytes .../astro-assets/src/pages/index.astro | 10 +++++++ 8 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 .changeset/new-crews-return.md create mode 100644 packages/astro/test/astro-assets.test.js create mode 100644 packages/astro/test/fixtures/astro-assets/snowpack.config.json create mode 100644 packages/astro/test/fixtures/astro-assets/src/images/twitter.png create mode 100644 packages/astro/test/fixtures/astro-assets/src/images/twitter@2x.png create mode 100644 packages/astro/test/fixtures/astro-assets/src/images/twitter@3x.png create mode 100644 packages/astro/test/fixtures/astro-assets/src/pages/index.astro diff --git a/.changeset/new-crews-return.md b/.changeset/new-crews-return.md new file mode 100644 index 0000000000..f608b9ae16 --- /dev/null +++ b/.changeset/new-crews-return.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Adds support for image srcset to the build diff --git a/packages/astro/src/build.ts b/packages/astro/src/build.ts index 97b616b1fa..4fd22f1bf0 100644 --- a/packages/astro/src/build.ts +++ b/packages/astro/src/build.ts @@ -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; diff --git a/packages/astro/test/astro-assets.test.js b/packages/astro/test/astro-assets.test.js new file mode 100644 index 0000000000..c82d34aa6d --- /dev/null +++ b/packages/astro/test/astro-assets.test.js @@ -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(); \ No newline at end of file diff --git a/packages/astro/test/fixtures/astro-assets/snowpack.config.json b/packages/astro/test/fixtures/astro-assets/snowpack.config.json new file mode 100644 index 0000000000..8f034781d8 --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets/snowpack.config.json @@ -0,0 +1,3 @@ +{ + "workspaceRoot": "../../../../../" +} diff --git a/packages/astro/test/fixtures/astro-assets/src/images/twitter.png b/packages/astro/test/fixtures/astro-assets/src/images/twitter.png new file mode 100644 index 0000000000000000000000000000000000000000..ad4cae1e9339156c23283a97b6bf8a3e4d7c1c29 GIT binary patch literal 457 zcmV;)0XF`LP)71Q{00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP z1dVPHJvy*qy+kYeBHfYB5Klp?`*sa^7By_cfegpFVKb{tJ)aOGnH{vCL30(Owau7z zUQojq*pBNTLkZU>*oM!=8VUCf*Q0Sgc21ci=>u*P!GC!5)?)e}+D8X5piQ)EP(Unb zQ{901q-3GVly8KbAgUk->UiA3%%IKWqm=pmfph|YB6rd2=Mrp*_9o5^6h3D@@8s_x zH9lkbJB3YZX`5_h7R>d!+QaYG^0u|pt)0maK{%841e9-k00000NkvXXu0mjfMTEcJ literal 0 HcmV?d00001 diff --git a/packages/astro/test/fixtures/astro-assets/src/images/twitter@2x.png b/packages/astro/test/fixtures/astro-assets/src/images/twitter@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ad89e72c3ca50086226020d624c690c2b440dbaf GIT binary patch literal 871 zcmV-t1DO1YP)3;Nc0DN*1m=K7V(Z_d^6-g=&HzdDFsw7Dom>ZihEc-})%lte$bbm8Qk>3h0R+U*7}|K=M~2&-HU#|#;g4aqGD$Kt_l>HD49@T;L$ zYSd*UPcV-4*xldp)a`$D8-BGs)KSD@(q6#U5`J{8H&_J^uq z19nmpRWg=RaqBV5#2{Jjfn!L1d=ggQ)QAclY)eLj%9LENMe z6f%r9zEu}(FSvm#x|An-(+Smr8<;P~?5rxty)YY>>|ivGI?%InFECGxE_yN!qF5|) zHj2Jw5fGkCd@-F=U9`30J*eL6&UyINo5o zSgq%@b&p~h^n;{;>Cl^8T9&30C>D@|_hBO9lqZZ9#Ay#1PS#`kVvvW7sb{|hWdZ{S5odInsh6*l$>bGA>>&XKr5j2cN`Fw#3#B_sa~RRX z;wTYaNh#fOML-SI?=D~{(9N9I6jCSb!r^y|6(~%Z7Z^czpfXd^>Q_xfuR6wAh?51sz=J#F@agF-Q6Q+VLbYC12EsI&a_tcOlu_^46=8FXc0?KY4 z0;z3*bPW!!q_&;z({ z+xudJ$^*dt2?Ud3**j1fY`BGv!TwukKD**Erfe4V9ud8npgn8s$OK?Gw(}7GyZW?L zc9+1xg3<=NF##74E=vlyJm)W(2+9bMqOP&s*7^m)WJO|rKlmwDkMbr`Y$-^9(td@; z!lvLeY)*=vg~hON^K{VPXquu2VbM<|`+|Fls4DMN^WIPJgP^oVB`nsru`>vVd$O5X zRR*1)Y-D{tCJ>Z3#KppHT*WorK*tDEhIfLhXD*M>4s+NSm;K(k#s6gx3EGErD5p>y zP3f|`?LZ3mOa09in{f+e@j+Hb-z+QLB&c}mNjGsrmpd3Kaz%nZRArbR`aso0TU|d^ zjAP5x@Hw~A9gO6-2}<4k0SnVeH9(zHdWI3k7^T}Fvix&jDp%@rOlq8Y7pAOh>opICY{^#14eXMwa|AnrJkmp zp<^{5F^7U9NADt)unuWf&E;P}`k*5;xuJ%(waHi|sGtjrdhA`FBVH%AnX7^$8ORyZ zv9oo_Y}~Yf^0|ckBB`8SO;R%k1$GYnQtZisOk8<0lmhH@Ov7yJ}7?meDkrx|h4zLzYg+kOm{#im0u_nkmMUNvY)Q;>@PM;p�Q@0t~^a z&nR7iCu#}Gu&8Rr6nk|4(&rk~+Jfd#VG_Eq-xg!wWa%1BGU4?Q7iC-Ll)kEK$kWo5 zY7Fs!a>D`dAN76eLQ@im5tQe0q!<J1jO;UBLlhpWea_Qa=T!P@xwdw!l`tOS6Ds=L_nxuJi@LqrXwry{lR%5z-~}j zUE39WJEN$tqbgX$HAc`H>nz0)@D@?ZM}Ob2tHWV6UOBw&b;Ne0arjONe5%rCkgk;g mJE1dp6YsCO?tI56yW}4NpvO(`iXlD#0000 +This Site + + +

Icons

+ + + \ No newline at end of file