postcss-image-set-function - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

 # Changes to PostCSS image-set() Function
 
+### 2.0.0 (May 7, 2018)
+
+- Sort images by DPR and use the lowest as the default
+
 ### 1.0.0 (May 2, 2018)
 
 - Initial version

index.cjs.js

@@ -27,14 +27,14 @@ 'use strict';
 // return a valid @media rule
-var getMedia = (function (node, mediasByDpi) {
+var getMedia = (function (node, mediasByDpr) {
 	if (Object(node).type === 'number' && node.unit in dpiRatios) {
 		// calculate min-device-pixel-ratio and min-resolution
 		var dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()];
-		var pxRatio = Math.floor(dpi / dpiRatios.x * 100) / 100;
+		var dpr = Math.floor(dpi / dpiRatios.x * 100) / 100;
 
-		if (dpi in mediasByDpi) {
+		if (dpi in mediasByDpr) {
 			return false;
 		} else {
-			var media = mediasByDpi[dpi] = postcss.atRule({
+			var media = mediasByDpr[dpi] = postcss.atRule({
 				name: 'media',
-				params: `(-webkit-min-device-pixel-ratio: ${pxRatio}), (min-resolution: ${dpi}dpi)`
+				params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`
 			});
@@ -59,3 +59,3 @@
 	var parent = decl.parent;
-	var mediasByDpi = {};
+	var mediasByDpr = {};
 
@@ -66,3 +66,3 @@ var length = imageSetOptionNodes.length;
 	while (index < length) {
-		var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpi)],
+		var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)],
 		    comma = _ref[0],
@@ -92,4 +92,6 @@ value = _ref[1],
 
-	var medias = Object.keys(mediasByDpi).map(function (params) {
-		return mediasByDpi[params];
+	var medias = Object.keys(mediasByDpr).sort(function (a, b) {
+		return a - b;
+	}).map(function (params) {
+		return mediasByDpr[params];
 	});
@@ -99,21 +101,27 @@
 	if (medias.length) {
-		var siblings = parent.nodes;
-		var previousSiblings = siblings.slice(0, siblings.indexOf(decl));
+		var firstDecl = medias[0].nodes[0].nodes[0];
 
-		if (previousSiblings.length) {
-			var _parentClone = parent.cloneBefore().removeAll();
+		if (medias.length === 1) {
+			decl.value = firstDecl.value;
+		} else {
+			var siblings = parent.nodes;
+			var previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl);
 
-			_parentClone.append(previousSiblings);
-		}
+			if (previousSiblings.length) {
+				var _parentClone = parent.cloneBefore().removeAll();
 
-		// prepend any @media { decl: <image> } rules
-		parent.before(medias);
+				_parentClone.append(previousSiblings);
+			}
 
-		// conditionally remove the current rule
-		if (!opts.preserve) {
-			decl.remove();
+			// prepend any @media { decl: <image> } rules
+			parent.before(medias.slice(1));
 
-			// and then conditionally remove its parent
-			if (!parent.nodes.length) {
-				parent.remove();
+			// conditionally remove the current rule
+			if (!opts.preserve) {
+				decl.remove();
+
+				// and then conditionally remove its parent
+				if (!parent.nodes.length) {
+					parent.remove();
+				}
 			}
@@ -120,0 +128,0 @@ }

index.es.js

@@ -23,14 +23,14 @@ import postcss from 'postcss';
 // return a valid @media rule
-var getMedia = (function (node, mediasByDpi) {
+var getMedia = (function (node, mediasByDpr) {
 	if (Object(node).type === 'number' && node.unit in dpiRatios) {
 		// calculate min-device-pixel-ratio and min-resolution
 		var dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()];
-		var pxRatio = Math.floor(dpi / dpiRatios.x * 100) / 100;
+		var dpr = Math.floor(dpi / dpiRatios.x * 100) / 100;
 
-		if (dpi in mediasByDpi) {
+		if (dpi in mediasByDpr) {
 			return false;
 		} else {
-			var media = mediasByDpi[dpi] = postcss.atRule({
+			var media = mediasByDpr[dpi] = postcss.atRule({
 				name: 'media',
-				params: `(-webkit-min-device-pixel-ratio: ${pxRatio}), (min-resolution: ${dpi}dpi)`
+				params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`
 			});
@@ -55,3 +55,3 @@
 	var parent = decl.parent;
-	var mediasByDpi = {};
+	var mediasByDpr = {};
 
@@ -62,3 +62,3 @@ var length = imageSetOptionNodes.length;
 	while (index < length) {
-		var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpi)],
+		var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)],
 		    comma = _ref[0],
@@ -88,4 +88,6 @@ value = _ref[1],
 
-	var medias = Object.keys(mediasByDpi).map(function (params) {
-		return mediasByDpi[params];
+	var medias = Object.keys(mediasByDpr).sort(function (a, b) {
+		return a - b;
+	}).map(function (params) {
+		return mediasByDpr[params];
 	});
@@ -95,21 +97,27 @@
 	if (medias.length) {
-		var siblings = parent.nodes;
-		var previousSiblings = siblings.slice(0, siblings.indexOf(decl));
+		var firstDecl = medias[0].nodes[0].nodes[0];
 
-		if (previousSiblings.length) {
-			var _parentClone = parent.cloneBefore().removeAll();
+		if (medias.length === 1) {
+			decl.value = firstDecl.value;
+		} else {
+			var siblings = parent.nodes;
+			var previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl);
 
-			_parentClone.append(previousSiblings);
-		}
+			if (previousSiblings.length) {
+				var _parentClone = parent.cloneBefore().removeAll();
 
-		// prepend any @media { decl: <image> } rules
-		parent.before(medias);
+				_parentClone.append(previousSiblings);
+			}
 
-		// conditionally remove the current rule
-		if (!opts.preserve) {
-			decl.remove();
+			// prepend any @media { decl: <image> } rules
+			parent.before(medias.slice(1));
 
-			// and then conditionally remove its parent
-			if (!parent.nodes.length) {
-				parent.remove();
+			// conditionally remove the current rule
+			if (!opts.preserve) {
+				decl.remove();
+
+				// and then conditionally remove its parent
+				if (!parent.nodes.length) {
+					parent.remove();
+				}
 			}
@@ -116,0 +124,0 @@ }

package.json

 {
   "name": "postcss-image-set-function",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Display resolution-dependent images using the image-set() function in CSS",
@@ -5,0 +5,0 @@ "author": "Jonathan Neal <[e-mail]>",

README.md

@@ -24,6 +24,4 @@ # PostCSS image-set() Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
-  .example {
-    background-image: url(img.png);
-  }
+.example {
+  background-image: url(img.png);
 }
@@ -198,6 +196,4 @@
 
-@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
-  .example {
-    background-image: url(img.png);
-  }
+.example {
+  background-image: url(img.png);
 }
@@ -233,2 +229,19 @@
 
+## Image Resolution
+
+The `image-set()` function allows an author to provide multiple resolutions of
+an image and let the browser decide which is most appropriate in a given
+situation. The `image-set()` also never fails to choose an image; the
+`<resolution>` just helps determine which of the images is chosen.
+
+Since this plugin is not a browser, the image options are sorted by device
+pixel ratio and the lowest ratio is used as the default, while the remaining
+images are pushed behind media queries.
+
+Therefore, this plugin can only approximate native browser behavior. While
+images should typically match the resolution as the device they’re being viewed
+in, other factors can affect the chosen image. For example, if the user is on a
+slow mobile connection, the browser may prefer to select a lower-res image
+rather than wait for a larger, resolution-matching image to load.
+
 [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-image-set-function.svg
@@ -235,0 +248,0 @@ [cli-url]: https://travis-ci.org/jonathantneal/postcss-image-set-function

No alert changes

Improved metrics

Total package byte prevSize

24158

5.29%

Lines of code

246

6.03%

Number of lines in readme file

261

5.24%

No dependency changes