From 9ac8ba15e6bd5584debb68d5d3dd4ecd69b82c4c Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Thu, 6 Jul 2023 15:41:31 +0000 Subject: [PATCH 1/3] Update prettier to version 3.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8d6ad2c..04a4e21 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "mocha": "^7.0.0", "nyc": "^15.0.0", "offline-github-changelog": "^3.0.0", - "prettier": "~2.8.0", + "prettier": "~3.0.0", "sinon": "^15.0.0", "unexpected": "^13.0.0", "unexpected-image": "^4.0.0", From d3566f1925c2997d6718e05d1792fa494b483b91 Mon Sep 17 00:00:00 2001 From: Andreas Lind Date: Fri, 7 Jul 2023 15:26:45 +0200 Subject: [PATCH 2/3] prettier --write '**/*.js' --- lib/packers/jimScott.js | 4 +- lib/spriteBackgroundImages.js | 50 +++++++++++------------ test/spriteBackgroundImages.js | 72 +++++++++++++++++----------------- 3 files changed, 63 insertions(+), 63 deletions(-) diff --git a/lib/packers/jimScott.js b/lib/packers/jimScott.js index 3660b42..9656b05 100644 --- a/lib/packers/jimScott.js +++ b/lib/packers/jimScott.js @@ -89,11 +89,11 @@ exports.pack = (imageInfos, config) => { if (coords) { packingData.width = Math.max( packingData.width, - coords.x + imageInfo.width + coords.x + imageInfo.width, ); packingData.height = Math.max( packingData.height, - coords.y + imageInfo.height + coords.y + imageInfo.height, ); } else { throw new Error('jimScott.pack: Cannot fit image'); diff --git a/lib/spriteBackgroundImages.js b/lib/spriteBackgroundImages.js index 1177832..69ac077 100644 --- a/lib/spriteBackgroundImages.js +++ b/lib/spriteBackgroundImages.js @@ -14,8 +14,8 @@ async function getCanvasImageFromImageAsset(imageAsset) { canvasImage.onerror = (err) => reject( new Error( - `Error loading ${imageAsset.urlOrDescription}: ${err.message}` - ) + `Error loading ${imageAsset.urlOrDescription}: ${err.message}`, + ), ); canvasImage.onload = resolve; canvasImage.src = imageAsset.rawSrc; @@ -31,7 +31,7 @@ async function getImageAssetFromCanvas(canvas, assetType, assetGraph) { } catch (err) { if ( err.message.includes( - 'the surface type is not appropriate for the operation' + 'the surface type is not appropriate for the operation', ) ) { err.message += ' (are you trying to add an SVG to a sprite?)'; @@ -105,7 +105,7 @@ function clampPaddingToDpr(padding, devicePixelRatio) { function getRelationSpriteInfoFromIncomingRelation(incomingRelation) { const parsedQueryString = queryString.parse( - incomingRelation.href.match(/\?([^#]*)/)[1] + incomingRelation.href.match(/\?([^#]*)/)[1], ); return { groupName: parsedQueryString.sprite || 'default', @@ -153,7 +153,7 @@ module.exports = () => imageInfo.incomingRelations.push(relation); imageInfo.padding = maxPaddingDimensions( relationSpriteInfo.padding, - imageInfo.padding + imageInfo.padding, ); } } @@ -174,7 +174,7 @@ module.exports = () => const spriteGroupName = spriteInfo.selectorForGroup; if (spriteInfo.location) { const matchLocation = spriteInfo.location.match( - /^url\((['"]|)(.*?)\1\)$/ + /^url\((['"]|)(.*?)\1\)$/, ); if (matchLocation) { spriteInfo.location = matchLocation[2]; @@ -210,7 +210,7 @@ module.exports = () => }); } else { err = new Error( - `assetgraph-sprite: Multiple differing definitions of ${spriteGroupName} sprite.\nThis is most likely an error.` + `assetgraph-sprite: Multiple differing definitions of ${spriteGroupName} sprite.\nThis is most likely an error.`, ); err.asset = cssAsset; @@ -233,7 +233,7 @@ module.exports = () => `assetgraph-sprite: Multiple identical definitions of ${spriteGroupName} sprite.`, 'This might happen if you duplicate CSS using a preprocessor.', ...redefinitionErrors[spriteGroupName].map( - (asset) => ` ${asset.urlOrDescription}` + (asset) => ` ${asset.urlOrDescription}`, ), ].join('\n'); @@ -251,8 +251,8 @@ module.exports = () => const spritePadding = parsePadding(spriteInfo.padding); const canvasImages = await Promise.all( imageInfos.map((imageInfo) => - getCanvasImageFromImageAsset(imageInfo.asset) - ) + getCanvasImageFromImageAsset(imageInfo.asset), + ), ); for (const [i, imageInfo] of imageInfos.entries()) { const canvasImage = canvasImages[i]; @@ -263,7 +263,7 @@ module.exports = () => height: canvasImage.height, padding: clampPaddingToDpr( maxPaddingDimensions(imageInfo.padding, spritePadding), - imageInfo.asset.devicePixelRatio + imageInfo.asset.devicePixelRatio, ), }); } @@ -291,7 +291,7 @@ module.exports = () => imageInfo.x, imageInfo.y, imageInfo.width, - imageInfo.height + imageInfo.height, ); } const spriteImageType = /^jpe?g$/.test(spriteInfo.imageFormat) @@ -300,7 +300,7 @@ module.exports = () => const spriteAssetConfig = await getImageAssetFromCanvas( canvas, spriteImageType, - assetGraph + assetGraph, ); const fileName = `sprite-${spriteGroupName}-${imageInfos.length}${assetGraph[spriteImageType].prototype.defaultExtension}`; @@ -343,7 +343,7 @@ module.exports = () => propertyValue = 'url(...)'; } else { const existingUrlTokens = propertyValue.match( - assetGraph.CssImage.prototype.tokenRegExp + assetGraph.CssImage.prototype.tokenRegExp, ); if (existingUrlTokens) { tokenNumber = existingUrlTokens.length; @@ -369,7 +369,7 @@ module.exports = () => propertyNode, tokenNumber, }, - 'last' + 'last', ); relation.refreshHref(); spriteInfo.cssRule.walkDecls((decl) => { @@ -391,7 +391,7 @@ module.exports = () => // If background-size is set, we should update it, The correct size is now the size of the sprite: const backgroundSizeDecls = getProperties( spriteInfo.cssRule, - 'background-size' + 'background-size', ); if (backgroundSizeDecls.length > 0) { backgroundSizeDecls[0].value = `${packingData.width}px ${packingData.height}px`; @@ -407,7 +407,7 @@ module.exports = () => const node = incomingRelation.node; const existingBackgroundPositionDecls = getProperties( node, - 'background-position' + 'background-position', ); const existingBackgroundDecls = getProperties(node, 'background'); const offsets = [ @@ -429,7 +429,7 @@ module.exports = () => if (/^(?:-?\d+px|0)$/i.test(existingBackgroundValueToken)) { positionTokenIndices.push(i); existingOffsets.push( - parseInt(existingBackgroundValueToken, 10) + parseInt(existingBackgroundValueToken, 10), ); } } @@ -440,7 +440,7 @@ module.exports = () => backgroundTokens.splice( positionTokenIndices[i], 1, - offset ? `${-offset}px` : '0' + offset ? `${-offset}px` : '0', ); } @@ -471,7 +471,7 @@ module.exports = () => const err = new Error( `WARNING: trying to sprite ${ imageInfo.asset.url - } with ${existingBackgroundPositionDecls[0].toString()}` + } with ${existingBackgroundPositionDecls[0].toString()}`, ); assetGraph.warn(err); } else { @@ -492,7 +492,7 @@ module.exports = () => node.append( `background-position: ${newBackgroundPositionValue}${ backgroundPositionImportant ? ' !important' : '' - }` + }`, ); } } @@ -515,7 +515,7 @@ module.exports = () => // Device pixel ratio is default. Remove property and let the defaults rule for (const backgroundSizeDecl of getProperties( incomingRelation.node, - 'background-size' + 'background-size', )) { backgroundSizeDecl.remove(); } @@ -528,13 +528,13 @@ module.exports = () => const height = packingData.height / dpr; const existingBackgroundSizeDecls = getProperties( incomingRelation.node, - 'background-size' + 'background-size', ); if (existingBackgroundSizeDecls.length > 0) { existingBackgroundSizeDecls[0].value = `${width}px ${height}px`; } else { incomingRelation.node.append( - `background-size: ${width}px ${height}px` + `background-size: ${width}px ${height}px`, ); } } @@ -551,7 +551,7 @@ module.exports = () => to: spriteAsset, }, 'before', - incomingRelation + incomingRelation, ); relation.refreshHref(); incomingRelation.remove(); diff --git a/test/spriteBackgroundImages.js b/test/spriteBackgroundImages.js index b41aa1e..33c2a34 100644 --- a/test/spriteBackgroundImages.js +++ b/test/spriteBackgroundImages.js @@ -23,7 +23,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'simple' + 'simple', ), }); await assetGraph.loadAssets('style.css'); @@ -46,7 +46,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'simple' + 'simple', ), }); await assetGraph.loadAssets('style.css'); @@ -65,7 +65,7 @@ describe('spriteBackgroundImages', () => { expect( jpegAssets[0].rawSrc.slice(6, 10).toString('ascii'), 'to equal', - 'JFIF' + 'JFIF', ); }); @@ -76,7 +76,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'noGroupSelector' + 'noGroupSelector', ), }); await assetGraph.loadAssets('style.css'); @@ -100,7 +100,7 @@ describe('spriteBackgroundImages', () => { .icon-bar { background-image: url(sprite-icons-2.png);background-position: -12px 0; } - ` + `, ); }); @@ -111,7 +111,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'spriteNoGroup' + 'spriteNoGroup', ), }); await assetGraph.loadAssets('style.css'); @@ -136,7 +136,7 @@ describe('spriteBackgroundImages', () => { .foo-bar {background-position: -12px 0 } - ` + `, ); }); @@ -148,7 +148,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'spriteLocation' + 'spriteLocation', ), }); await assetGraph.loadAssets('style.css'); @@ -163,13 +163,13 @@ describe('spriteBackgroundImages', () => { const cssImageHrefs = pluck( assetGraph.findRelations({ type: 'CssImage' }), - 'href' + 'href', ).sort(); expect(cssImageHrefs[0], 'to equal', 'myImage.png?pngquant=128'); expect( cssImageHrefs[1], 'to match', - /^sprite-.*?-\d+\.png\?pngquant=128$/ + /^sprite-.*?-\d+\.png\?pngquant=128$/, ); }); @@ -180,7 +180,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'spriteLocation' + 'spriteLocation', ), }); const [cssAsset] = await assetGraph.loadAssets('style.css'); @@ -199,7 +199,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'existingBackgroundImageInGroupSelector' + 'existingBackgroundImageInGroupSelector', ), }); await assetGraph.loadAssets('style.css'); @@ -213,7 +213,7 @@ describe('spriteBackgroundImages', () => { expect( assetGraph.findAssets({ type: 'Css' })[0].text, 'to match', - /^\.icon \{\n {4}background-image:\s*url\(sprite-.*?-\d+\.png\)\s*!important;\n}\n\n\.icon-foo \{background-position: 0 0;\n\}\n$/ + /^\.icon \{\n {4}background-image:\s*url\(sprite-.*?-\d+\.png\)\s*!important;\n}\n\n\.icon-foo \{background-position: 0 0;\n\}\n$/, ); }); @@ -224,7 +224,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'existingBackgroundInGroupSelector' + 'existingBackgroundInGroupSelector', ), }); await assetGraph.loadAssets('style.css'); @@ -246,7 +246,7 @@ describe('spriteBackgroundImages', () => { .icon-foo {background-position: 0 0; } -` +`, ); }); @@ -257,7 +257,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'existingBackgroundInSpriteSelector' + 'existingBackgroundInSpriteSelector', ), }); await assetGraph.loadAssets('style.css'); @@ -272,7 +272,7 @@ describe('spriteBackgroundImages', () => { expect( assetGraph.findAssets({ type: 'Css' })[0].text, 'to match', - /^\.icon \{background-image: url\((sprite-.*?-\d+\.png)\);\n}\n\n\.icon-foo \{background-position: 0 0;\n\}\n\n.icon-bar \{\n {4}background: -12px 4px;\n}\n\n.icon-quux \{\n {4}background: url\(\1\) -1610px -4px;\n}\n$/ + /^\.icon \{background-image: url\((sprite-.*?-\d+\.png)\);\n}\n\n\.icon-foo \{background-position: 0 0;\n\}\n\n.icon-bar \{\n {4}background: -12px 4px;\n}\n\n.icon-quux \{\n {4}background: url\(\1\) -1610px -4px;\n}\n$/, ); }); @@ -283,7 +283,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'existingBackgroundPositions' + 'existingBackgroundPositions', ), }); await assetGraph.loadAssets('style.css'); @@ -301,12 +301,12 @@ describe('spriteBackgroundImages', () => { expect( assetGraph.findAssets({ type: 'Css' })[0].text, 'to match', - /^\.icon \{background-image:\s*url\((sprite-.*?-\d+\.png)\);\n}\n\n\.icon-foo \{\n {4}background-position:\s*0 0\s*!important;\n\}\n\n\.icon-bar \{\n {4}background-position: -112px -40px !important;\n\}\n\n\.icon-quux \{\n {4}background-image: url\(\1\);\n {4}background-position: -1610px 2px !important;\n\}\n$/ + /^\.icon \{background-image:\s*url\((sprite-.*?-\d+\.png)\);\n}\n\n\.icon-foo \{\n {4}background-position:\s*0 0\s*!important;\n\}\n\n\.icon-bar \{\n {4}background-position: -112px -40px !important;\n\}\n\n\.icon-quux \{\n {4}background-image: url\(\1\);\n {4}background-position: -1610px 2px !important;\n\}\n$/, ); expect(warnSpy, 'to have calls satisfying', () => { warnSpy( - /WARNING: trying to sprite file:.*\/foo.png\?sprite=icons with background-position: !important$/ + /WARNING: trying to sprite file:.*\/foo.png\?sprite=icons with background-position: !important$/, ); }); }); @@ -318,7 +318,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'important' + 'important', ), }); await assetGraph.loadAssets('style.css'); @@ -333,7 +333,7 @@ describe('spriteBackgroundImages', () => { expect( assetGraph.findAssets({ type: 'Css' })[0].text, 'to match', - /^\.icon \{background-image: (url\(sprite-.*?-\d+\.png\));\n}\n\n\.icon-foo \{\n {4}background-image: \1 !important;background-position: 0 0;\n\}\n\n\.icon-bar \{\n {4}background: red !important;background-position: -12px 0;\n\}\n$/ + /^\.icon \{background-image: (url\(sprite-.*?-\d+\.png\));\n}\n\n\.icon-foo \{\n {4}background-image: \1 !important;background-position: 0 0;\n\}\n\n\.icon-bar \{\n {4}background: red !important;background-position: -12px 0;\n\}\n$/, ); }); @@ -344,7 +344,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'brokenImages' + 'brokenImages', ), }); await assetGraph.loadAssets('style.css'); @@ -365,7 +365,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'imagesWithWrongExtensions' + 'imagesWithWrongExtensions', ), }); await assetGraph.loadAssets('style.css'); @@ -389,7 +389,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'duplicateSpriteGroupName' + 'duplicateSpriteGroupName', ), }); await assetGraph.loadAssets('identical*.css'); @@ -416,7 +416,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'duplicateSpriteGroupName' + 'duplicateSpriteGroupName', ), }); assetGraph.on('warn', (warning) => warnings.push(warning)); @@ -446,7 +446,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'retina' + 'retina', ), }); await assetGraph.loadAssets('index.html'); @@ -479,7 +479,7 @@ describe('spriteBackgroundImages', () => { expect( getProperties(relation.node, 'background-size'), 'to have length', - 1 + 1, ); } @@ -491,13 +491,13 @@ describe('spriteBackgroundImages', () => { assetGraph, 'to contain relations', { type: 'CssImage', node: { selector: '.regular' } }, - 1 + 1, ); expect( assetGraph, 'to contain relations', { type: 'CssImage', node: { selector: '.retina' } }, - 1 + 1, ); for (const relation of assetGraph.findRelations({ @@ -517,7 +517,7 @@ describe('spriteBackgroundImages', () => { expect( getProperties(relation.node, 'background-position'), 'to satisfy', - [{ value: '-30px 0' }] + [{ value: '-30px 0' }], ); } }); @@ -529,7 +529,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'retina' + 'retina', ), }); await assetGraph.loadAssets('inline-style.html'); @@ -552,7 +552,7 @@ describe('spriteBackgroundImages', () => { '..', 'testdata', 'spriteBackgroundImages', - 'svgInSprite' + 'svgInSprite', ), }); await assetGraph.loadAssets('index.html'); @@ -563,7 +563,7 @@ describe('spriteBackgroundImages', () => { await expect( assetGraph.queue(spriteBackgroundImages()), 'to be rejected with', - /are you trying to add an SVG to a sprite/ + /are you trying to add an SVG to a sprite/, ); }); @@ -577,7 +577,7 @@ describe('spriteBackgroundImages', () => { 'testdata', 'spriteBackgroundImages', 'padding', - 'inGroupSelector' + 'inGroupSelector', ), }); await assetGraph.loadAssets('style.css'); @@ -601,7 +601,7 @@ describe('spriteBackgroundImages', () => { 'testdata', 'spriteBackgroundImages', 'padding', - 'inGroupSelector' + 'inGroupSelector', ), }); const [cssAsset] = await assetGraph.loadAssets('style.css'); From 3e271885836aa8ba822c6762d6e7b7e7880cfb8a Mon Sep 17 00:00:00 2001 From: Andreas Lind Date: Fri, 7 Jul 2023 15:27:10 +0200 Subject: [PATCH 3/3] Use ubuntu-latest --- .github/workflows/ci.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 826e39d..871b405 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -5,7 +5,7 @@ name: Tests jobs: test: - runs-on: ubuntu-18.04 + runs-on: ubuntu-latest name: Node ${{ matrix.node }} strategy: matrix: @@ -24,7 +24,7 @@ jobs: - run: npm test test-targets: - runs-on: ubuntu-18.04 + runs-on: ubuntu-latest name: ${{ matrix.targets.name }} strategy: matrix: