postcss-image-set-function
Advanced tools
Comparing version 1.0.0 to 2.0.0
# 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 |
@@ -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 @@ } |
@@ -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 @@ } |
{ | ||
"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 <jonathantneal@hotmail.com>", |
@@ -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 |
24158
246
261