fix srcset parsing

[christianhaller]

↪️ Pull Request

When I was using some URLs with a comma separated query param to a srcset,
my parcel tried to resolve the wrong url.
It was splitting the srcset string on the wrong comma.

@parcel/resolver-default: Cannot load file './9.739075709034898&markers=size:tiny|52.345519011208346' in './src/content

I found a package which is parsing the srcset correctly.
I added a test for the affected method.

[mischnic]

We don't really use unit tests, so please create an integration test instead (see #7918).

[mischnic]

• Please remove packages/transformers/html/test/dependencies.test.js (and unexport collectSrcSetDependencies)
• We might as well leverage the stringify function of that package now, instead of the manual w/x appending, e.g. like this:

import * as srcset from 'srcset';

function collectSrcSetDependencies(asset, v, opts) {
  let parsed = srcset.parse(v).map(({url, ...v}) => ({
    url: asset.addURLDependency(url, opts),
    ...v,
  }));
  return srcset.stringify(parsed);
}

• Please add this file at flow-libs/srcset.js.flow:

// @flow
declare module 'srcset' {
  declare type SrcSetDefinition = {|
    url: string,
    width?: number,
    density?: number,
  |};

  declare type Options = {|
    strict?: boolean,
  |};

  declare export function parse(
    srcset: string,
    options?: Options,
  ): SrcSetDefinition[];
  declare export function stringify(
    srcSetDefinitions: SrcSetDefinition[],
    options?: Options,
  ): string;
}

[christianhaller]

Thank you for the review Niklas!
Good point with the stringify method. This looks much better :-)

[mischnic]

Looks like you have some npm registry override configured for Yarn. There shouldn't be that many changed lines in the lockfile

[christianhaller]

Looks like you have some npm registry override configured for Yarn. There shouldn't be that many changed lines in the lockfile

It took me hours to fix this 😵

[mischnic]

Thanks!