From 7802097d457d3b87d50c958a0c09f20f050617db Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 7 May 2026 11:31:43 -0400 Subject: [PATCH 1/2] Switch from parse-srcset to srcset --- index.test.js | 4 ++-- lib/index.js | 11 +++++------ package-lock.json | 20 +++++++++++++------- package.json | 6 +++--- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/index.test.js b/index.test.js index 04b2d79..bb0308f 100644 --- a/index.test.js +++ b/index.test.js @@ -161,8 +161,8 @@ filteredFixturesWithAttributes.forEach(({attrName, isVoid, tagName}) => it(`supp ["img", "source"].forEach(tagName => it(`supports <${tagName} src srcset="…">`, () => { - const input = `<${tagName} src="image1.png" srcset="image1a.png 2x, image1b.png 100w, image1c.png 100h">`; - const output = `<${tagName} src="http://domain.com/image1.png" srcset="http://domain.com/image1a.png 2x, http://domain.com/image1b.png 100w, http://domain.com/image1c.png 100h">`; + const input = `<${tagName} src="image1.png" srcset="image1a.png 2x, image1b.png 100w, image1c.png">`; + const output = `<${tagName} src="http://domain.com/image1.png" srcset="http://domain.com/image1a.png 2x, http://domain.com/image1b.png 100w, http://domain.com/image1c.png">`; const options = { diff --git a/lib/index.js b/lib/index.js index db2e0f1..b3cc076 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,7 +1,7 @@ "use strict"; const DEFAULT_OPTIONS = require("./defaultOptions"); const parseMetaRefresh = require("http-equiv-refresh"); -const parseSrcset = require("parse-srcset"); +const { parseSrcset } = require("srcset"); const CONTENT_ATTR = "content"; const PING_ATTR = "ping"; @@ -148,14 +148,13 @@ const transformSrcset = (node, attrName, transformer) => if (values.length > 0) { - const promises = values.map(({d, h, url, w}) => Promise.resolve( transformer(url, attrName, tag, node) ) + const promises = values.map(({density, url, width}) => Promise.resolve( transformer(url, attrName, tag, node) ) .then(newUrl => { - d = d !== undefined ? ` ${d}x` : EMPTY_STRING; - h = h !== undefined ? ` ${h}h` : EMPTY_STRING; - w = w !== undefined ? ` ${w}w` : EMPTY_STRING; + density = density !== undefined ? ` ${density}x` : EMPTY_STRING; + width = width !== undefined ? ` ${width}w` : EMPTY_STRING; - return `${newUrl}${w}${h}${d}`; + return `${newUrl}${width}${density}`; })); return Promise.all(promises).then(newValues => attrs[attrName] = newValues.join(PRETTY_DELIMITER)); diff --git a/package-lock.json b/package-lock.json index 8ada646..02da01f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "http-equiv-refresh": "^2.0.1", - "parse-srcset": "^1.0.2" + "srcset": "^5.0.3" }, "devDependencies": { "@vitest/coverage-v8": "^4.1.5", @@ -1282,12 +1282,6 @@ ], "license": "MIT" }, - "node_modules/parse-srcset": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", - "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==", - "license": "MIT" - }, "node_modules/pathe": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", @@ -1435,6 +1429,18 @@ "node": ">=0.10.0" } }, + "node_modules/srcset": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/srcset/-/srcset-5.0.3.tgz", + "integrity": "sha512-AZswtOXIsu0LeHdo6YY7d0r2pCH2Rl1D8ae1utvXUX4GxG3RggsVUAOFX1r8RI4YHFMYb4g89+UBPBv3mNUU2g==", + "license": "MIT", + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", diff --git a/package.json b/package.json index c45b93b..076240a 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,13 @@ }, "dependencies": { "http-equiv-refresh": "^2.0.1", - "parse-srcset": "^1.0.2" + "srcset": "^5.0.3" }, "devDependencies": { - "vitest": "^4.1.5", "@vitest/coverage-v8": "^4.1.5", "html-tags": "^3.1.1", - "posthtml": "~0.16.6" + "posthtml": "~0.16.6", + "vitest": "^4.1.5" }, "engines": { "node": ">= 20" From b158568edc81b7e17f85977c655e43200c0d2a45 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 7 May 2026 11:36:39 -0400 Subject: [PATCH 2/2] Use stringify method, add a little type hinting --- lib/index.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/lib/index.js b/lib/index.js index b3cc076..007a294 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,13 +1,12 @@ "use strict"; const DEFAULT_OPTIONS = require("./defaultOptions"); const parseMetaRefresh = require("http-equiv-refresh"); -const { parseSrcset } = require("srcset"); +const { parseSrcset, stringifySrcset } = require("srcset"); const CONTENT_ATTR = "content"; const PING_ATTR = "ping"; const SRCSET_ATTR = "srcset"; -const EMPTY_STRING = ""; const EMPTY_TAG_GROUP = Object.freeze({}); const FUNCTION_TYPE = "function"; const PRETTY_DELIMITER = ", "; @@ -148,16 +147,16 @@ const transformSrcset = (node, attrName, transformer) => if (values.length > 0) { - const promises = values.map(({density, url, width}) => Promise.resolve( transformer(url, attrName, tag, node) ) - .then(newUrl => + const promises = values.map((srcset) => Promise.resolve( transformer(srcset.url, attrName, tag, node) ) + .then( + /** @returns {import('srcset').SrcSetDefinition} */ + newUrl => { - density = density !== undefined ? ` ${density}x` : EMPTY_STRING; - width = width !== undefined ? ` ${width}w` : EMPTY_STRING; - - return `${newUrl}${width}${density}`; + + return { ...srcset, url: newUrl }; })); - return Promise.all(promises).then(newValues => attrs[attrName] = newValues.join(PRETTY_DELIMITER)); + return Promise.all(promises).then(newValues => attrs[attrName] = stringifySrcset(newValues)); } };