From 1012b5ddf88d0e3736d7813b3c85c91a562974eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Auswo=CC=88ger?= Date: Fri, 14 Jun 2024 16:24:11 +0200 Subject: [PATCH] Update to commit cb36c068c7244df695cae30892e6a533c2082947 --- collector.js | 2 +- docs.html | 69 +++++++++++++++++++++++++++++++++++++- linter.js | 95 +++++++++++++++++++++++++++++----------------------- 3 files changed, 123 insertions(+), 43 deletions(-) diff --git a/collector.js b/collector.js index 8ed3262..e481736 100644 --- a/collector.js +++ b/collector.js @@ -1016,7 +1016,7 @@ var RE_MEDIA_QUERY=/^(?:(only|not)?\s*(\\?\\0(?:\s*))?([_a-z][_a-z0-9-]*)(\\9?)? }).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) },{"../util/setStyles":345,"./checkLazyImages":335,"./find":336,"./readData":338,"./readDimensions":339,"./readImages":340,"./readMarkup":341,"./readMediaQueries":342,"babel-polyfill":1}],338:[function(require,module,exports){ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=readData;var _parseMedia=require("../util/parseMedia"),_parseMedia2=_interopRequireDefault(_parseMedia);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function readData(e){var t=e.dom.img;return e.data={img:t&&{src:t.getAttribute("src"),srcset:parseSrcset(t.getAttribute("srcset")),sizes:parseSizes(t.getAttribute("sizes"))},sources:e.dom.sources.map(function(e){return{srcset:parseSrcset(e.getAttribute("srcset")),sizes:parseSizes(e.getAttribute("sizes")),media:(0,_parseMedia2.default)(e.getAttribute("media")),type:e.getAttribute("type")||void 0}})},e}function parseSrcset(e){if(!e)return[];var t=[];return e.replace(/,*(\S*?[^\s,])(?:\s,|,+\s|,?$|\s([^,]+)(?:,|$))/g,function(e,r,s){t.push({src:r,descriptor:s&&s.trim()})}),t}function parseSizes(e){return e?e.split(",").map(function(e){e=e.trim();var t=void 0;return{size:e=e.replace(/^\(.+?\)\s+/,function(e){return t=(0,_parseMedia2.default)(e.trim()),""}),media:t}}):[]} +"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=readData;var _parseMedia=require("../util/parseMedia"),_parseMedia2=_interopRequireDefault(_parseMedia);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function readData(e){var t=e.dom.img;return e.data={img:t&&{src:t.getAttribute("src"),srcset:parseSrcset(t.getAttribute("srcset")),sizes:parseSizes(t.getAttribute("sizes")),loading:t.getAttribute("loading")||void 0},sources:e.dom.sources.map(function(e){return{srcset:parseSrcset(e.getAttribute("srcset")),sizes:parseSizes(e.getAttribute("sizes")),media:(0,_parseMedia2.default)(e.getAttribute("media")),type:e.getAttribute("type")||void 0}})},e}function parseSrcset(e){if(!e)return[];var t=[];return e.replace(/,*(\S*?[^\s,])(?:\s,|,+\s|,?$|\s([^,]+)(?:,|$))/g,function(e,r,s){t.push({src:r,descriptor:s&&s.trim()})}),t}function parseSizes(e){return e?e.split(",").map(function(e){e=e.trim();var t=void 0;return{size:e=e.replace(/^\(.+?\)\s+/,function(e){return t=(0,_parseMedia2.default)(e.trim()),""}),media:t}}):[]} },{"../util/parseMedia":344}],339:[function(require,module,exports){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=readDimensions;var _setStyles=require("../util/setStyles"),_setStyles2=_interopRequireDefault(_setStyles);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var minWidth=300,maxWidth=3e3,stepSize=20,aspectRatios=[16/9,.75];function readDimensions(e,t,i){return new Promise(function(n){var d=e.contentWindow.document,o=0,s=aspectRatios[o],a=minWidth,r=Math.round(a/s);(0,_setStyles2.default)(e,{width:a+"px",height:r+"px"}),(0,_setStyles2.default)(d.documentElement,{overflow:"hidden"}),(0,_setStyles2.default)(d.body,{overflow:"hidden"});var m=d.createElement("img");"sizes"in m?(m.srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w",m.sizes="100vw",(0,_setStyles2.default)(m,{position:"absolute",top:0,left:0,display:"block",width:"auto","max-width":"none","min-width":0,height:"auto","max-height":"none","min-height":0,border:0,padding:0}),d.body.appendChild(m)):m=void 0;var u=d.createElement("source"),l=d.createElement("picture");if("sizes"in u){u.srcset=m.srcset,u.sizes="50vw";for(var h=[],p=minWidth;p<=maxWidth;p+=2*stepSize)h.push(p);u.media=h.map(function(e){return"(width:"+e+"px)"}).join(","),l.appendChild(u),l.appendChild(m),d.body.appendChild(l)}else u=void 0,l=void 0;var c=Date.now(),f=!1;!function l(){var h=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Date.now();i((a-minWidth)/(maxWidth-minWidth)/aspectRatios.length+o/aspectRatios.length,a+"x"+r);var p=a;if(u&&(a-minWidth)%(2*stepSize)==0&&(p/=2),m&&imageWidth(m)!==p&&!f)return a===minWidth&&Date.now()-c>5e3&&(f=!0),(0,_setStyles2.default)(d.body,{display:"none"}),d.body.offsetHeight,(0,_setStyles2.default)(d.body,{display:""}),void setTimeout(l,0);if(!t.reduce(function(e,t){return e&&(!t.dom.img||t.dom.img.complete)},!0))return t.map(function(e){e.dom.img&&(e.dom.img.loading="eager",e.dom.img.decoding="sync")}),void setTimeout(l,0);if(addDimensions(t,a+"x"+r),a+=stepSize,r=Math.round(a/s),a>maxWidth){if(!aspectRatios[++o])return i(1,maxWidth+"x"+Math.round(maxWidth/s)),void n();s=aspectRatios[o],a=minWidth,r=Math.round(a/s)}(0,_setStyles2.default)(e,{width:a+"px",height:r+"px"}),Date.now()-h>1e3/30?setTimeout(l,0):l(h)}()})}function addDimensions(e,t){e.forEach(function(e){return addDimension(e,t)})}function addDimension(e,t){e.dimensions=e.dimensions||{},e.dom.img&&(e.dimensions[t]=imageWidth(e.dom.img))}function imageWidth(e){var t=getComputedStyle(e);return e.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight)} diff --git a/docs.html b/docs.html index 1748d60..6bc42c2 100644 --- a/docs.html +++ b/docs.html @@ -6,7 +6,7 @@

RespImageLint Linters

+
  • Descriptors must be unique
  • Malformed descriptor
  • X and W descriptors must not be mixed in one srcset attribute
  • Sizes attribute must be set if W descriptors are used
  • W descriptor doesn’t match the image size
  • X descriptor doesn’t match the image size
  • X descriptor must not be used if sizes attribute is set
  • Missing src attribute
  • Images in srcset attribute must not be different
  • Images in srcset attribute must not have different aspect ratios
  • A fitting image source should be available for all screen sizes
  • Images in different <source> elements shouldn’t be the same
  • Sizes attribute has to begin with auto to enable auto-sizes
  • Auto-sizes cannot be used without lazy-loading
  • The sizes attribute has to match the width of the image
  • Multiple <img> elements are not allowed
  • Only <source> and <img> tags are allowed inside of <picture>
  • The <img> element must not be omitted inside of <picture>
  • The src attribute has no effect on a <source> element
  • The <source> element must not appear after an <img> element

    • Descriptors must be unique

    Correct

    <img src="200x100.jpg" srcset="200x100.jpg 1x, 400x200.jpg 2x">
@@ -139,6 +139,73 @@ 
    Incorrect
    
     <img src="cat-200x100.jpg">
 </picture>
    +

    Sizes attribute has to begin with auto to enable auto-sizes

    +

    If present, the keyword auto must be the first entry and the entire sizes attribute must either be "auto" or start with "auto," as defined in the spec.

    +

    Correct

    +
    <img
+    style="width: 200px"
+    sizes="auto"
+    loading="lazy"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+<img
+    style="width: 200px"
+    sizes="auto, (min-width: 600px) 200px, 12.5em"
+    loading="lazy"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+
    +

    Incorrect

    +
    <img
+    style="width: 200px"
+    sizes="200px, auto"
+    loading="lazy"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+<img
+    style="width: 200px"
+    sizes="(min-width: 600px) auto, 100vw"
+    loading="lazy"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+<img
+    style="width: 200px"
+    sizes="auto , 200px"
+    loading="lazy"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+
    +

    Auto-sizes cannot be used without lazy-loading

    +

    When using sizes="auto" it is required to also use loading="lazy".

    +

    Correct

    +
    <img
+    style="width: 200px"
+    sizes="auto"
+    loading="lazy"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+
    +

    Incorrect

    +
    <img
+    style="width: 200px"
+    sizes="auto"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+<img
+    style="width: 200px"
+    sizes="auto"
+    loading="eager"
+    srcset="200x100.jpg 200w, 400x200.jpg 400w"
+    src="200x100.jpg"
+>
+

    The sizes attribute has to match the width of the image

    The sizes attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.

    Correct

    diff --git a/linter.js b/linter.js index 883d244..7e46f82 100644 --- a/linter.js +++ b/linter.js @@ -346,45 +346,45 @@ var cachedSetTimeout,cachedClearTimeout,process=module.exports={};function defau },{}],114:[function(require,module,exports){ "use strict";var _index=require("./linter/index"),_index2=_interopRequireDefault(_index),_reporter=require("./reporter"),_reporter2=_interopRequireDefault(_reporter);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var data=JSON.parse(localStorage.respImageLintData);data=(0,_index2.default)(data);var report=(0,_reporter2.default)(data);document.body.appendChild(report); -},{"./linter/index":131,"./reporter":139}],115:[function(require,module,exports){ +},{"./linter/index":133,"./reporter":141}],115:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e){var r=e.srcset.map(function(e){return(e.descriptor||"1x").replace(/(?:\s+|^)\d+h(?:\s+|$)/,"")});r.forEach(function(t,i){r.indexOf(t)!==i&&(0,_error2.default)(__filename,e,{descriptor:t,image1:e.srcset[r.indexOf(t)].src,image2:e.srcset[i].src})})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} }).call(this)}).call(this,"/src/linter/descriptors/duplicate.js") -},{"../../util/error":144}],116:[function(require,module,exports){ +},{"../../util/error":147}],116:[function(require,module,exports){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e,i){(0,_allSources2.default)(e).forEach(function(i){(0,_duplicate2.default)(i),(0,_malformed2.default)(i),(0,_mixed2.default)(i),(0,_xAndSizes2.default)(i),(0,_wrongSize2.default)(i,e.images),(0,_wrongX2.default)(i,e.images)}),(0,_wMissingSizes2.default)(e,i.mediaQueries)};var _allSources=require("../../util/allSources"),_allSources2=_interopRequireDefault(_allSources),_duplicate=require("./duplicate"),_duplicate2=_interopRequireDefault(_duplicate),_malformed=require("./malformed"),_malformed2=_interopRequireDefault(_malformed),_mixed=require("./mixed"),_mixed2=_interopRequireDefault(_mixed),_xAndSizes=require("./xAndSizes"),_xAndSizes2=_interopRequireDefault(_xAndSizes),_wMissingSizes=require("./wMissingSizes"),_wMissingSizes2=_interopRequireDefault(_wMissingSizes),_wrongSize=require("./wrongSize"),_wrongSize2=_interopRequireDefault(_wrongSize),_wrongX=require("./wrongX"),_wrongX2=_interopRequireDefault(_wrongX);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} -},{"../../util/allSources":140,"./duplicate":115,"./malformed":117,"./mixed":118,"./wMissingSizes":119,"./wrongSize":120,"./wrongX":121,"./xAndSizes":122}],117:[function(require,module,exports){ +},{"../../util/allSources":143,"./duplicate":115,"./malformed":117,"./mixed":118,"./wMissingSizes":119,"./wrongSize":120,"./wrongX":121,"./xAndSizes":122}],117:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e){e.srcset.forEach(function(r){var t=r.descriptor;!t||t.match(/^\d+(?:\.\d+)?x$/)||t.match(/^\d+w$/)||(0,_error2.default)(__filename,e,{descriptor:t})})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} }).call(this)}).call(this,"/src/linter/descriptors/malformed.js") -},{"../../util/error":144}],118:[function(require,module,exports){ +},{"../../util/error":147}],118:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e){var r=e.srcset.map(function(e){return(e.descriptor||"1x").replace(/(?:\s+|^)\d+h(?:\s+|$)/,"")});r.length>1&&!1===r.map(function(e){return e.substr(-1)}).reduce(function(e,r){return e===r&&e})&&(0,_error2.default)(__filename,e,{descriptors:r.join(", ")})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} }).call(this)}).call(this,"/src/linter/descriptors/mixed.js") -},{"../../util/error":144}],119:[function(require,module,exports){ +},{"../../util/error":147}],119:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e,r){(0,_allSources2.default)(e).forEach(function(t){var u=[];t.srcset.forEach(function(e){var r=e.descriptor;r&&"w"===r.substr(-1)&&!t.sizes.length&&u.push(r)}),u.length&&(0,_error2.default)(__filename,t,{descriptors:u.join(", "),sizesSuggestion:(0,_computeSizesAttribute2.default)(e.dimensions,r.bySize)})})};var _allSources=require("../../util/allSources"),_allSources2=_interopRequireDefault(_allSources),_error=require("../../util/error"),_error2=_interopRequireDefault(_error),_computeSizesAttribute=require("../../util/computeSizesAttribute"),_computeSizesAttribute2=_interopRequireDefault(_computeSizesAttribute);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} }).call(this)}).call(this,"/src/linter/descriptors/wMissingSizes.js") -},{"../../util/allSources":140,"../../util/computeSizesAttribute":142,"../../util/error":144}],120:[function(require,module,exports){ +},{"../../util/allSources":143,"../../util/computeSizesAttribute":145,"../../util/error":147}],120:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e,r){e.srcset.forEach(function(t){var i=t.src,s=t.descriptor;(s&&s.split(/\s+/)||[]).forEach(function(t){("w"===t.substr(-1)&&r[i].size.width&&parseInt(t)!==r[i].size.width||"h"===t.substr(-1)&&r[i].size.height&&parseInt(t)!==r[i].size.height)&&(0,_error2.default)(__filename,e,{descriptor:t,image:i})})})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} }).call(this)}).call(this,"/src/linter/descriptors/wrongSize.js") -},{"../../util/error":144}],121:[function(require,module,exports){ +},{"../../util/error":147}],121:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(r,e){var t=r.srcset.filter(function(r){var e=r.descriptor;return!e||"x"===e.substr(-1)}).sort(function(r,e){var t=r.descriptor,s=e.descriptor;return Math.abs(parseFloat(t||1)-1)-Math.abs(parseFloat(s||1)-1)})[0];if(t){var s=e[t.src].size.width,o=parseFloat(t.descriptor||1);1!==o&&r.src&&(s=e[r.src].size.width,o=1),r.srcset.forEach(function(t){var i=t.src,a=t.descriptor;if(!a||"x"===a.substr(-1)){var d=parseFloat(a||1)/o;(s*d*(1-threshold)-thresholdPx>e[i].size.width||s*d*(1+threshold)+thresholdPxthreshold&&!h[s]&&!h[a]&&((0,_error2.default)(__filename,e,{image1:s,hash1:r[s].hash,image2:a,hash2:r[a].hash,distance:Math.round(100*(0,_hashDistance2.default)(r[s].hash,r[a].hash))+"%"}),h[s]=!0,h[a]=!0)})})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error),_hashDistance=require("../../util/hashDistance"),_hashDistance2=_interopRequireDefault(_hashDistance);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var threshold=.04; }).call(this)}).call(this,"/src/linter/images/differentContent.js") -},{"../../util/error":144,"../../util/hashDistance":146}],126:[function(require,module,exports){ +},{"../../util/error":147,"../../util/hashDistance":149}],126:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e,r){var i=[];e.src&&i.push(e.src),e.srcset.forEach(function(e){var r=e.src;return i.push(r)});var t={};i.forEach(function(a){r[a].size.width&&r[a].size.height&&i.forEach(function(i){i===a||!r[i].size.width||!r[i].size.height||t[a]||t[i]||(0,_sameRatio2.default)(r[a].size,r[i].size)||((0,_error2.default)(__filename,e,{image1:a,ratio1:Math.round(100/r[a].size.width*r[a].size.height)+"%",image2:i,ratio2:Math.round(100/r[i].size.width*r[i].size.height)+"%"}),t[a]=!0,t[i]=!0)})})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error),_sameRatio=require("../../util/sameRatio"),_sameRatio2=_interopRequireDefault(_sameRatio);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} }).call(this)}).call(this,"/src/linter/images/differentRatio.js") -},{"../../util/error":144,"../../util/sameRatio":151}],127:[function(require,module,exports){ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e,t){(0,_allSources2.default)(e).forEach(function(t){(0,_differentRatio2.default)(t,e.images),(0,_differentContent2.default)(t,e.images)}),(0,_missingFittingSrc2.default)(e),(0,_sameContent2.default)(e),(0,_wrongSizes2.default)(e,t.mediaQueries)};var _allSources=require("../../util/allSources"),_allSources2=_interopRequireDefault(_allSources),_differentContent=require("./differentContent"),_differentContent2=_interopRequireDefault(_differentContent),_differentRatio=require("./differentRatio"),_differentRatio2=_interopRequireDefault(_differentRatio),_missingFittingSrc=require("./missingFittingSrc"),_missingFittingSrc2=_interopRequireDefault(_missingFittingSrc),_sameContent=require("./sameContent"),_sameContent2=_interopRequireDefault(_sameContent),_wrongSizes=require("./wrongSizes"),_wrongSizes2=_interopRequireDefault(_wrongSizes);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} +},{"../../util/error":147,"../../util/sameRatio":154}],127:[function(require,module,exports){ +"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e,t){(0,_allSources2.default)(e).forEach(function(t){(0,_differentRatio2.default)(t,e.images),(0,_differentContent2.default)(t,e.images)}),(0,_missingFittingSrc2.default)(e),(0,_sameContent2.default)(e),(0,_sizesAuto2.default)(e),(0,_sizesAutoLazy2.default)(e),(0,_wrongSizes2.default)(e,t.mediaQueries)};var _allSources=require("../../util/allSources"),_allSources2=_interopRequireDefault(_allSources),_differentContent=require("./differentContent"),_differentContent2=_interopRequireDefault(_differentContent),_differentRatio=require("./differentRatio"),_differentRatio2=_interopRequireDefault(_differentRatio),_missingFittingSrc=require("./missingFittingSrc"),_missingFittingSrc2=_interopRequireDefault(_missingFittingSrc),_sameContent=require("./sameContent"),_sameContent2=_interopRequireDefault(_sameContent),_sizesAuto=require("./sizesAuto"),_sizesAuto2=_interopRequireDefault(_sizesAuto),_sizesAutoLazy=require("./sizesAutoLazy"),_sizesAutoLazy2=_interopRequireDefault(_sizesAutoLazy),_wrongSizes=require("./wrongSizes"),_wrongSizes2=_interopRequireDefault(_wrongSizes);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} -},{"../../util/allSources":140,"./differentContent":125,"./differentRatio":126,"./missingFittingSrc":128,"./sameContent":129,"./wrongSizes":130}],128:[function(require,module,exports){ +},{"../../util/allSources":143,"./differentContent":125,"./differentRatio":126,"./missingFittingSrc":128,"./sameContent":129,"./sizesAuto":130,"./sizesAutoLazy":131,"./wrongSizes":132}],128:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _slicedToArray=function(){return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,r){var t=[],i=!0,a=!1,n=void 0;try{for(var o,u=e[Symbol.iterator]();!(i=(o=u.next()).done)&&(t.push(o.value),!r||t.length!==r);i=!0);}catch(e){a=!0,n=e}finally{try{!i&&u.return&&u.return()}finally{if(a)throw n}}return t}(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();exports.default=function(e){var r=[],t=[],i={};Object.keys(e.dimensions).forEach(function(a){i[a.split("x")[0]]=!0;var n=e.dimensions[a],o={};(0,_allSources2.default)(e).forEach(function(i,u){var s=(0,_mediaToStringArray2.default)((0,_stripViewportQueries2.default)(i.media)).map(function(e){return(i.type||"image/*")+"|"+e});if(!s.reduce(function(e,r){return e||o[r]},!1)&&"image/svg+xml"!==i.type&&n&&(!i.media||(0,_mediaMatchesViewport2.default)(i.media,a))){s.forEach(function(e){o[e]=!0}),t[u]=t[u]||{},t[u][a]=n;var c=i.srcset.map(function(e){return e.src});if(i.src&&!i.srcset.filter(function(e){var r=e.descriptor,t=void 0===r?"1x":r;return"x"!==t.substr(-1)||"1x"===t}).length&&c.push(i.src),-1===c.map(function(r){return e.images[r].type}).indexOf("image/svg+xml")){var l=(e.images[c[0]]&&e.images[c[0]].size.width?e.images[c[0]].size.height/e.images[c[0]].size.width:1)||1,d=c.map(function(r){return e.images[r].size.width}).filter(Boolean).sort(function(e,r){var t=[e,r].map(function(e){return Math.abs((n*n*l-e*e*l)/1e6)}),i=_slicedToArray(t,2);return(e=i[0])-(r=i[1])})[0];if(d){var m=1-(nmegapixelGap/2&&(d20&&u.push([e,e]),u[u.length-1][1]=e,s=r});for(var c=0;c"+buildRecommendation(t[n],m,Object.keys(i).length),recommendationContext:e.data.img===a?"<img srcset="…">":"the "+humanReadableIndex(n)+" <source srcset="…">"})}})};var _error=require("../../util/error"),_error2=_interopRequireDefault(_error),_allSources=require("../../util/allSources"),_allSources2=_interopRequireDefault(_allSources),_mediaToStringArray=require("../../util/mediaToStringArray"),_mediaToStringArray2=_interopRequireDefault(_mediaToStringArray),_stripViewportQueries=require("../../util/stripViewportQueries"),_stripViewportQueries2=_interopRequireDefault(_stripViewportQueries),_mediaMatchesViewport=require("../../util/mediaMatchesViewport"),_mediaMatchesViewport2=_interopRequireDefault(_mediaMatchesViewport),_computeSrcsetWidths=require("../../util/computeSrcsetWidths"),_computeSrcsetWidths2=_interopRequireDefault(_computeSrcsetWidths);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r×"+Math.round(e*i)+""}).join(", ")} }).call(this)}).call(this,"/src/linter/images/missingFittingSrc.js") -},{"../../util/allSources":140,"../../util/computeSrcsetWidths":143,"../../util/error":144,"../../util/mediaMatchesViewport":147,"../../util/mediaToStringArray":148,"../../util/stripViewportQueries":152}],129:[function(require,module,exports){ +},{"../../util/allSources":143,"../../util/computeSrcsetWidths":146,"../../util/error":147,"../../util/mediaMatchesViewport":150,"../../util/mediaToStringArray":151,"../../util/stripViewportQueries":155}],129:[function(require,module,exports){ (function (__filename){(function (){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e){var r=e.images,a=!1,i={};(0,_allSources2.default)(e).forEach(function(e){if(!a){var t=[];e.src&&!e.srcset.length&&t.push(e.src),e.srcset.forEach(function(e){var r=e.src;return t.push(r)});var u=t.sort(function(e,a){return r[a].size.width-r[e].size.width}).reduce(function(e,a){return e||r[a].size.width&&r[a].hash&&a},!1);if(u){var s=e.type||"image/*";i[s]=i[s]||[],i[s].push({src:u,highDpi:isDpiQuery(e.media,!0),lowDpi:isDpiQuery(e.media,!1)}),"image/*"!==s||e.media||(a=!0)}}});var t={};Object.keys(i).forEach(function(a){i[a].forEach(function(u,s){var o=u.src,n=u.highDpi,h=u.lowDpi;i[a].forEach(function(a,i){var u=a.src,l=a.highDpi,c=a.lowDpi;!(i!==s&&o!==u&&(0,_hashDistance2.default)(r[o].hash,r[u].hash)1.1&&(r&&"min"===a&&!i||r&&"max"===a&&i||!r&&"max"===a&&!i||!r&&"min"===a&&i)&&(t=!0)}),t}).length}function computeDppx(e){if(e)return e.match(/^\d*\.?\d+dpi$/)?parseFloat(e)/96:e.match(/^\d*\.?\d+dpcm$/)?parseFloat(e)/96*2.54:e.match(/^\d*\.?\d+dppx$/)?parseFloat(e):void 0} }).call(this)}).call(this,"/src/linter/images/sameContent.js") -},{"../../util/allSources":140,"../../util/error":144,"../../util/hashDistance":146,"../../util/sameRatio":151}],130:[function(require,module,exports){ +},{"../../util/allSources":143,"../../util/error":147,"../../util/hashDistance":149,"../../util/sameRatio":154}],130:[function(require,module,exports){ (function (__filename){(function (){ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};exports.default=function(e,t){var r=[];Object.keys(e.dimensions).forEach(function(t){var i=e.dimensions[t],o={};i&&(0,_allSources2.default)(e).forEach(function(e,u){var a=(0,_mediaToStringArray2.default)((0,_stripViewportQueries2.default)(e.media)).map(function(t){return(e.type||"image/*")+"|"+t});if(!a.reduce(function(e,t){return e||o[t]},!1)&&(!e.media||(0,_mediaMatchesViewport2.default)(e.media,t))&&(a.forEach(function(e){o[e]=!0}),e.sizes)){var n=!1;e.sizes.forEach(function(e){var o=e.size,a=e.media;if(!n&&(!a||(0,_mediaMatchesViewport2.default)(a,t))){n=!0;var s=(0,_computeLength2.default)(o,t);(is+s*threshold+thresholdPx)&&(r[u]=r[u]||{},r[u][t]={viewport:t,targetWidth:s,imageWidth:i,size:o})}})}})}),(0,_allSources2.default)(e).forEach(function(i,o){if(r[o]){var u=r[o][["1280x720","1440x810","1000x563","320x427","480x270","1920x1080",Object.keys(r[o])[0]].filter(function(e){return r[o][e]})[0]],a=[],n=0;Object.keys(r[o]).forEach(function(e){var t=e.split("x")[0];Math.abs(n-t)>20&&a.push([e,e]),a[a.length-1][1]=e,n=t});for(var s=0;sl+l*threshold+thresholdPx)&&(r[u]=r[u]||{},r[u][t]={viewport:t,targetWidth:l,imageWidth:i,size:a})}})}})}),(0,_allSources2.default)(e).forEach(function(i,o){if(r[o]){var u=r[o][["1280x720","1440x810","1000x563","320x427","480x270","1920x1080",Object.keys(r[o])[0]].filter(function(e){return r[o][e]})[0]],a=[],n=0;Object.keys(r[o]).forEach(function(e){var t=e.split("x")[0];Math.abs(n-t)>20&&a.push([e,e]),a[a.length-1][1]=e,n=t});for(var s=0;s"+_prismjs2.default.highlight(buildMarkup(e.markup),_prismjs2.default.languages.html,"html")+"";Object.keys(e.images).sort(function(e,t){return t.length-e.length}).forEach(function(t){s=s.replace(new RegExp("([>,\\s])("+t.replace(/&/g,"&").replace(/[.?*+^$[\]\\(){}|-]/g,"\\$&")+")([<,\\s])","g"),'$1$2$3')}),o.innerHTML=s,r.appendChild(o)}else{var l=document.createElement("p");l.textContent="All checks passed.",r.appendChild(l),r.className+=" -passed"}return r}function buildMarkup(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:95,n=t+"<"+e.tag,a=(e.attributes||[]).map(function(e){var n=e.name,a=e.value;return("srcset"===n||"sizes"===n)&&-1!==a.indexOf(",")&&n.length+a.length+4*t.length+7>r&&(a="\n"+t+"\t\t"+a.trim().replace(/,\s+/g,",\n"+t+"\t\t")+"\n"+t+"\t"),n+'="'+a+'"'});a.length&&(a.join(" ").length+e.tag.length+4*t.length+3>r?n+="\n"+t+"\t"+a.join("\n"+t+"\t")+"\n"+t:n+=" "+a.join(" ")),n+=">";var i=(e.children||[]).map(function(e){return buildMarkup(e,t+"\t",r)}).join("\n");return i&&(n+="\n"+i+"\n"+t),"img"!==e.tag&&"source"!==e.tag&&(n+=""),n}function buildErrors(e,t){var r={};return e.errors&&e.errors.forEach(function(e){r[e.key]=r[e.key]||[],r[e.key].push(e)}),e.sources.forEach(function(e){e.errors&&e.errors.forEach(function(e){r[e.key]=r[e.key]||[],r[e.key].push(e)})}),e.img&&e.img.errors&&e.img.errors.forEach(function(e){r[e.key]=r[e.key]||[],r[e.key].push(e)}),Object.keys(r).map(function(e){return buildError(e,r[e],t)})}function buildError(e,t,r){var n=document.createElement("div"),a=document.createElement("h3");a.innerHTML=(0,_marked.marked)(t[0].msg).replace(/<\/?p>/gi,""),n.appendChild(a);var i=document.createElement("div");t.forEach(function(e){var t=e.key,n=e.data;return i.appendChild(buildErrorMessage(t,n,r))}),n.appendChild(i);var u=document.createElement("div");return u.innerHTML=(0,_marked.marked)((0,_getDocs2.default)(e,"text")),n.appendChild(u),n}function buildErrorMessage(e,t,r){var n=document.createElement("div"),a=(0,_getDocs2.default)(e,"Error template"),i=[];Object.keys(t).forEach(function(e){r[t[e]]&&(t[e+"Url"]=r[t[e]].url,t[e+"Type"]=r[t[e]].type,t[e+"Size"]=r[t[e]].size.width+"x"+r[t[e]].size.height,t[e+"Width"]=r[t[e]].size.width,t[e+"Height"]=r[t[e]].size.height,i.push(t[e]))});var u=shortenUrls(i);return i.forEach(function(e,n){Object.keys(t).forEach(function(a){r[t[a]]&&t[a]===e&&"Url"!==a.substr(-3)&&(t[a]=u[n])})}),Object.keys(t).forEach(function(e){a=a.split("{{"+e+"}}").join("number"==typeof t[e]?t[e]:t[e]||"​")}),n.innerHTML=(0,_marked.marked)(a),n}function shortenUrl(e,t){if(!e||e.length<=t)return e;var r="",n="",a="";for(-1!==(e=e.replace(/^https?:\/\/[^/]+\//gi,"")).indexOf("?")&&(r=e.substr(e.indexOf("?")),e=e.substr(0,e.indexOf("?")));e.length+r.length>=t&&-1!==e.indexOf("/");)e=e.substr(e.indexOf("/")+1),n="…/";for(;e.length+r.length>=t&&-1!==r.lastIndexOf("&");)r=r.substr(0,r.lastIndexOf("&")),a="…";return n+e+r+a}function shortenUrls(e){if(!e)return e;if(e.length<2)return e.map(function(e){return shortenUrl(e,32)});var t=e.map(function(e){return e.length}).sort(function(e,t){return t-e})[0];if(t<=32)return e;for(var r="",n=!1;!n;){r+=e[0][r.length];for(var a=0;at*(1-threshold)&&et*(1-threshold)&&e4&&void 0!==arguments[4]?arguments[4]:{},a=u.recommendedMinWidth,o=void 0===a?0:a,i=u.recommendedMaxWidth,h=void 0===i?16384:i,d=u.megapixelThreshold,l=void 0===d?.25:d,f=u.megapixelGap,s=void 0===f?.5:f,c=Math.min(h,Math.round(Math.max.apply(Math,_toConsumableArray(Object.values(t))))),p=Math.min(c,Math.max(o,Math.round(Math.min.apply(Math,_toConsumableArray(Object.values(t).filter(function(t){return t>0})))))),m=[],M={};Object.values(t).forEach(function(t){M[t]=M[t]||0,M[t]++}),Object.keys(M).forEach(function(t){t=parseInt(t),M[t]>r/8&&[Math.min(h,t),Math.min(h,2*t)].forEach(function(t){m.includes(t)||m.push(t)})}),m.push.apply(m,_toConsumableArray(n.filter(function(t){return t>=p&&t<=2*c}))),m.sort(function(t,e){return t_(m[m.length-1])+l&&m.push((0,_roundWidth2.default)(c)),_(Math.min(h,2*c))>_(m[m.length-1])+l&&m.push(Math.min(h,(0,_roundWidth2.default)(2*c)));var v=[];return m.reverse().forEach(function(t,r){var n=v[v.length-1],u=n&&_(n)-_(t);if(!(us)for(var a=u/Math.ceil(u/s),o=n;t+10<(i=_(o)-a,o=Math.round(Math.sqrt(1e6*i/e)));)v.push((0,_roundWidth2.default)(o));var i;v.push(t)}}),v.reverse();function _(t){return t*t*e/1e6}} -},{"./roundWidth":150}],144:[function(require,module,exports){ +},{"./roundWidth":153}],147:[function(require,module,exports){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=error;var _path=require("path"),_getDocs=require("./getDocs"),_getDocs2=_interopRequireDefault(_getDocs);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function error(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},s=e.substr(1,e.length-4).split(_path.sep);s.shift(),s.shift(),s=s.join(".");var o=(0,_getDocs2.default)(s).split("\n")[0].substr(2);r.errors=r.errors||[],r.errors.push({key:s,msg:o,data:t})} -},{"./getDocs":145,"path":111}],145:[function(require,module,exports){ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=getDocs;var docs=JSON.parse('{"descriptors.duplicate":"# Descriptors must be unique\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\n```\\n\\n## Error template\\n\\nThe descriptor {{descriptor}} appears twice in the same `srcset` attribute ([{{image1}}]({{image1Url}}) and [{{image2}}]({{image2Url}})).\\n","descriptors.malformed":"# Malformed descriptor\\n\\nThe syntax of the descriptors is defined in the [spec](https://html.spec.whatwg.org/multipage/embedded-content.html#image-candidate-string).\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\n\\n\\n```\\n\\n## Error template\\n\\nDescriptor `{{descriptor}}` is invalid.\\n","descriptors.mixed":"# X and W descriptors must not be mixed in one srcset attribute\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n```\\n\\n## Error template\\n\\nX and W descriptors are mixed: `{{descriptors}}`.\\n","descriptors.wMissingSizes":"# Sizes attribute must be set if W descriptors are used\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nDescriptors `{{descriptors}}` are used but the `sizes` attribute is missing.\\n\\nTry using `sizes=\\"{{sizesSuggestion}}\\"`\\n","descriptors.wrongSize":"# W descriptor doesn’t match the image size\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nDescriptor `{{descriptor}}` doesn’t match the image size of {{imageSize}} from [{{image}}]({{imageUrl}}).\\n","descriptors.wrongX":"# X descriptor doesn’t match the image size\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nDescriptor `{{descriptor}}` doesn’t match the image width of {{imageWidth}} from [{{image}}]({{imageUrl}}), the image should be {{correctWidth}} pixels wide or `{{correctDescriptor}}` should be used as descriptor.\\n","descriptors.xAndSizes":"# X descriptor must not be used if sizes attribute is set\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nX descriptor `{{descriptor}}` is used but the `sizes` attribute is set.\\n","fallbacks.src":"# Missing `src` attribute\\n\\nOlder browsers or other user agents which don’t understand the `srcset` attribute should get a fallback image.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n","images.differentContent":"# Images in `srcset` attribute must not be different\\n\\nThe `srcset` attribute isn’t for art direction, so the images must therefore only differ in dimensions not in the image contents.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nIt seems the image [{{image1}}]({{image1Url}}) doesn’t show the same contents as [{{image2}}]({{image2Url}}) does, the determined difference is {{distance}}.\\n","images.differentRatio":"# Images in `srcset` attribute must not have different aspect ratios\\n\\nThe `srcset` attribute isn’t for art direction, so the images must therefore only differ in dimensions not in the ratio.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nThe image [{{image1}}]({{image1Url}}) has an aspect ratio of {{ratio1}} ({{image1Width}}x{{image1Height}}) but the ratio of [{{image2}}]({{image2Url}}) is {{ratio2}} ({{image2Width}}x{{image2Height}}).\\n","images.missingFittingSrc":"# A fitting image source should be available for all screen sizes\\n\\nLoading a large image and display it much smaller should be avoided to save bandwidth. Loading a small image and display it much larger should be avoided to prevent pixelated artifacts.\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n```\\n\\n## Error template\\n\\nAt a viewport of {{viewport}} the image was displayed {{imageWidth}} pixels wide, but the closest provided image has a width of {{nearbyWidth}} which is {{distance}} ({{megapixelDistance}} megapixels) off. The affected viewports are {{viewportRanges}}.\\n\\nTry using the following image sizes in {{recommendationContext}} instead: {{recommendation}}\\n","images.sameContent":"# Images in different `` elements shouldn’t be the same\\n\\nThe `` element should only be used for art direction and format-based selection. For providing multiple resolutions of the same image use the `srcset` attribute instead. [More information on CSS-Tricks](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/).\\n\\n## Good\\n\\n```html\\n \x3c!-- different content --\x3e\\n\\t\\n\\t\\n\\n \x3c!-- different aspect ratio --\x3e\\n\\t\\n\\t\\n\\n \x3c!-- different image type --\x3e\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n \x3c!-- same contents, aspect ratio and format --\x3e\\n\\t\\n\\t\\n\\n \x3c!-- exact same image but different URL --\x3e\\n\\t\\n\\t\\n\\n```\\n\\n## Error template\\n\\nIt seems the image [{{image1}}]({{image1Url}}) shows the same contents as [{{image2}}]({{image2Url}}) does and it has the same aspect ratio and format.\\n","images.wrongSizes":"# The `sizes` attribute has to match the width of the image\\n\\nThe `sizes` attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.\\n\\n## Good\\n\\n```html\\n\\n\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Error template\\n\\nThe size of the image doesn’t match the `sizes` attribute `{{sizes}}`. At a viewport of {{viewport}} the image was {{imageWidth}} pixels wide instead of the specified {{targetWidth}} ({{difference}} difference). The affected viewports are {{viewportRanges}}.\\n\\nTry using `sizes=\\"{{sizesSuggestion}}\\"` instead.\\n","markup.duplicateImg":"# Multiple `` elements are not allowed\\n\\nOnly one `` element is allowed inside of ``.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n","markup.extra":"# Only `` and `` tags are allowed inside of ``\\n\\nYou should not use `` as a wrapper to put additional elements inside it.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\tImage Caption\\n\\n```\\n\\n## Error template\\n\\nElement `{{tags}}` was found.\\n","markup.missingImg":"# The `` element must not be omitted inside of ``\\n\\nThe `` element needs an `` element in order to display something.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\n```\\n","markup.sourceSrc":"# The `src` attribute has no effect on a `` element\\n\\nThe `` element only supports the `srcset` attribute.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n","markup.wrongOrder":"# The `` element must not appear after an `` element\\n\\nThe `` element has to be the last element inside of ``.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n"}');function getDocs(e,t){var n=docs[e];return t?"title"===t?n.split("\n")[0].substr(2):(n="text"===t?n.split(/^#[^\n]*/):n.split("\n\n## "+t+"\n\n")).length<2?"":n[1].split("\n\n##")[0].trim():n} +},{"./getDocs":148,"path":111}],148:[function(require,module,exports){ +"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=getDocs;var docs=JSON.parse('{"descriptors.duplicate":"# Descriptors must be unique\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\n```\\n\\n## Error template\\n\\nThe descriptor {{descriptor}} appears twice in the same `srcset` attribute ([{{image1}}]({{image1Url}}) and [{{image2}}]({{image2Url}})).\\n","descriptors.malformed":"# Malformed descriptor\\n\\nThe syntax of the descriptors is defined in the [spec](https://html.spec.whatwg.org/multipage/embedded-content.html#image-candidate-string).\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\n\\n\\n```\\n\\n## Error template\\n\\nDescriptor `{{descriptor}}` is invalid.\\n","descriptors.mixed":"# X and W descriptors must not be mixed in one srcset attribute\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n```\\n\\n## Error template\\n\\nX and W descriptors are mixed: `{{descriptors}}`.\\n","descriptors.wMissingSizes":"# Sizes attribute must be set if W descriptors are used\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nDescriptors `{{descriptors}}` are used but the `sizes` attribute is missing.\\n\\nTry using `sizes=\\"{{sizesSuggestion}}\\"`\\n","descriptors.wrongSize":"# W descriptor doesn’t match the image size\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nDescriptor `{{descriptor}}` doesn’t match the image size of {{imageSize}} from [{{image}}]({{imageUrl}}).\\n","descriptors.wrongX":"# X descriptor doesn’t match the image size\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nDescriptor `{{descriptor}}` doesn’t match the image width of {{imageWidth}} from [{{image}}]({{imageUrl}}), the image should be {{correctWidth}} pixels wide or `{{correctDescriptor}}` should be used as descriptor.\\n","descriptors.xAndSizes":"# X descriptor must not be used if sizes attribute is set\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nX descriptor `{{descriptor}}` is used but the `sizes` attribute is set.\\n","fallbacks.src":"# Missing `src` attribute\\n\\nOlder browsers or other user agents which don’t understand the `srcset` attribute should get a fallback image.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n","images.differentContent":"# Images in `srcset` attribute must not be different\\n\\nThe `srcset` attribute isn’t for art direction, so the images must therefore only differ in dimensions not in the image contents.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nIt seems the image [{{image1}}]({{image1Url}}) doesn’t show the same contents as [{{image2}}]({{image2Url}}) does, the determined difference is {{distance}}.\\n","images.differentRatio":"# Images in `srcset` attribute must not have different aspect ratios\\n\\nThe `srcset` attribute isn’t for art direction, so the images must therefore only differ in dimensions not in the ratio.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n```\\n\\n## Error template\\n\\nThe image [{{image1}}]({{image1Url}}) has an aspect ratio of {{ratio1}} ({{image1Width}}x{{image1Height}}) but the ratio of [{{image2}}]({{image2Url}}) is {{ratio2}} ({{image2Width}}x{{image2Height}}).\\n","images.missingFittingSrc":"# A fitting image source should be available for all screen sizes\\n\\nLoading a large image and display it much smaller should be avoided to save bandwidth. Loading a small image and display it much larger should be avoided to prevent pixelated artifacts.\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n```\\n\\n## Error template\\n\\nAt a viewport of {{viewport}} the image was displayed {{imageWidth}} pixels wide, but the closest provided image has a width of {{nearbyWidth}} which is {{distance}} ({{megapixelDistance}} megapixels) off. The affected viewports are {{viewportRanges}}.\\n\\nTry using the following image sizes in {{recommendationContext}} instead: {{recommendation}}\\n","images.sameContent":"# Images in different `` elements shouldn’t be the same\\n\\nThe `` element should only be used for art direction and format-based selection. For providing multiple resolutions of the same image use the `srcset` attribute instead. [More information on CSS-Tricks](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/).\\n\\n## Good\\n\\n```html\\n \x3c!-- different content --\x3e\\n\\t\\n\\t\\n\\n \x3c!-- different aspect ratio --\x3e\\n\\t\\n\\t\\n\\n \x3c!-- different image type --\x3e\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n \x3c!-- same contents, aspect ratio and format --\x3e\\n\\t\\n\\t\\n\\n \x3c!-- exact same image but different URL --\x3e\\n\\t\\n\\t\\n\\n```\\n\\n## Error template\\n\\nIt seems the image [{{image1}}]({{image1Url}}) shows the same contents as [{{image2}}]({{image2Url}}) does and it has the same aspect ratio and format.\\n","images.sizesAuto":"# Sizes attribute has to begin with `auto` to enable auto-sizes\\n\\nIf present, the keyword `auto` must be the first entry and the entire `sizes` attribute must either be `\\"auto\\"` or start with `\\"auto,\\"` as defined in the [spec](https://html.spec.whatwg.org/multipage/images.html#valdef-sizes-auto).\\n\\n## Good\\n\\n```html\\n\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\n```\\n\\n## Error template\\n\\nThe use of `auto` in the `sizes` attribute `{{sizes}}` is incorrect. \\n\\nTry using `sizes=\\"auto\\"` or `sizes=\\"auto,…\\"` instead.\\n","images.sizesAutoLazy":"# Auto-sizes cannot be used without lazy-loading\\n\\nWhen using `sizes=\\"auto\\"` it is required to also use `loading=\\"lazy\\"`.\\n\\n## Good\\n\\n```html\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n```\\n","images.wrongSizes":"# The `sizes` attribute has to match the width of the image\\n\\nThe `sizes` attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.\\n\\n## Good\\n\\n```html\\n\\n\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Error template\\n\\nThe size of the image doesn’t match the `sizes` attribute `{{sizes}}`. At a viewport of {{viewport}} the image was {{imageWidth}} pixels wide instead of the specified {{targetWidth}} ({{difference}} difference). The affected viewports are {{viewportRanges}}.\\n\\nTry using `sizes=\\"{{sizesSuggestion}}\\"` instead.\\n","markup.duplicateImg":"# Multiple `` elements are not allowed\\n\\nOnly one `` element is allowed inside of ``.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n","markup.extra":"# Only `` and `` tags are allowed inside of ``\\n\\nYou should not use `` as a wrapper to put additional elements inside it.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\tImage Caption\\n\\n```\\n\\n## Error template\\n\\nElement `{{tags}}` was found.\\n","markup.missingImg":"# The `` element must not be omitted inside of ``\\n\\nThe `` element needs an `` element in order to display something.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\n```\\n","markup.sourceSrc":"# The `src` attribute has no effect on a `` element\\n\\nThe `` element only supports the `srcset` attribute.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n","markup.wrongOrder":"# The `` element must not appear after an `` element\\n\\nThe `` element has to be the last element inside of ``.\\n\\n## Good\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n\\n## Bad\\n\\n```html\\n\\n\\t\\n\\t\\n\\n```\\n"}');function getDocs(t,e){var n=docs[t];return e?"title"===e?n.split("\n")[0].substr(2):(n="text"===e?n.split(/^#[^\n]*/):n.split("\n\n## "+e+"\n\n")).length<2?"":n[1].split("\n\n##")[0].trim():n} -},{}],146:[function(require,module,exports){ +},{}],149:[function(require,module,exports){ "use strict";function hashDistance(e,t){if(e===t)return 0;for(var r=0,s=0;sa||!u&&o!==a?n||(i=!1):n&&(i=!1)}),r.filter(function(e){return"orientation"===e.feature}).forEach(function(e){var r=e.value;"portrait"===r&&t[0]>t[1]||"landscape"===r&&t[0]<=t[1]?n||(i=!1):n&&(i=!1)}),r.filter(function(e){return"aspect-ratio"===e.feature}).forEach(function(e){var r=e.modifier,u=e.value;if((u=u.split("/").map(parseFloat))[0]&&u[1]){u=u[0]/u[1];var a=t[0]/t[1];"min"===r&&au||!r&&a!==u?n||(i=!1):n&&(i=!1)}}),i}).length)};var _computeLength=require("./computeLength"),_computeLength2=_interopRequireDefault(_computeLength);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}} -},{"./computeLength":141}],148:[function(require,module,exports){ +},{"./computeLength":144}],151:[function(require,module,exports){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e){return e&&e.length?"string"==typeof e?[e]:e.map(function(e){var t=e.type,n=e.expressions,r=e.inverse,o=r?"not ":"";return o+="all"!==t||r?t:"",n.length&&o&&(o+=" and "),o+=n.map(function(e){var t=e.feature,n=e.modifier,r=e.value;return"("+(n?n+"-":"")+t+(r?": "+r:"")+")"}).sort().join(" and ")}):[""]}; -},{}],149:[function(require,module,exports){ +},{}],152:[function(require,module,exports){ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=parseMedia;var _cssMqParser=require("css-mq-parser"),_cssMqParser2=_interopRequireDefault(_cssMqParser);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function parseMedia(e){if(e)try{return(0,_cssMqParser2.default)(e.toLowerCase().replace(/\s+/g," "))}catch(r){return e}} -},{"css-mq-parser":1}],150:[function(require,module,exports){ +},{"css-mq-parser":1}],153:[function(require,module,exports){ "use strict";function roundWidth(t){for(var r=[],e=2;e<=1048576;e*=2)r.push(e);return[t<100?t:t<500?5*Math.round(t/5):10*Math.round(t/10)].concat(r).sort(function(r,e){return Math.abs(t-r)-Math.abs(t-e)})[0]}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=roundWidth; -},{}],151:[function(require,module,exports){ +},{}],154:[function(require,module,exports){ "use strict";function sameRatio(t,e){var r=t.width,i=t.height,o=e.width,a=e.height,h=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.02,d=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;if(!(r&&i&&o&&a))return!1;var n=Math.round(o/a*i),u=Math.round(r/i*a);return n>r*(1-h)-d&&no*(1-h)-d&&u