From 4c982cd24a33f62821a5814eda36cfcce8dc2dcf Mon Sep 17 00:00:00 2001
From: Oleg Lykasov <oleglykasov@gmail.com>
Date: Tue, 2 May 2017 01:30:09 +0300
Subject: [PATCH] Added: postcss-image-set-polyfill (#43)

---
 docs/content/features.md                        | 17 +++++++++++++++++
 docs/content/index.md                           |  5 ++++-
 docs/content/playground.html                    |  9 +++++++++
 package.json                                    |  1 +
 src/__tests__/fixtures/features/image-set.css   |  7 +++++++
 .../fixtures/features/image-set.expected.css    | 13 +++++++++++++
 src/features-activation-map.js                  |  1 +
 src/features.js                                 |  3 +++
 8 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/__tests__/fixtures/features/image-set.css
 create mode 100644 src/__tests__/fixtures/features/image-set.expected.css

diff --git a/docs/content/features.md b/docs/content/features.md
index a2c36dd..cfe9ef2 100644
--- a/docs/content/features.md
+++ b/docs/content/features.md
@@ -173,6 +173,23 @@ a {
 |
 [Plugin documentation](https://github.com/jonathantneal/postcss-nesting)
 
+## `image-set()` function
+
+Allows you to set different images for each kind of resolution of user device. 
+
+```css
+.foo {
+    background-image: image-set(url(img/test.png) 1x,
+                                url(img/test-2x.png) 2x,
+                                url(my-img-print.png) 600dpi);
+}
+```
+
+[Specification](https://drafts.csswg.org/css-images-3/#image-set-notation)
+|
+[Plugin documentation](https://github.com/SuperOl3g/postcss-image-set-polyfill)
+
+
 ## `color()` function
 
 A color function to modify colors (transpiled to: `rgba()`)
diff --git a/docs/content/index.md b/docs/content/index.md
index 7841270..163246d 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -73,7 +73,10 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
         <a href="/features/#nesting">nesting</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#color-function"><code>color()</code> function</a>
+        <a href="/features/#image-set-function"><code>image-set()</code> function</a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+          <a href="/features/#color-function"><code>color()</code> function</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#hwb-function"><code>hwb()</code> function</a>
diff --git a/docs/content/playground.html b/docs/content/playground.html
index 8cebe50..1145338 100644
--- a/docs/content/playground.html
+++ b/docs/content/playground.html
@@ -50,6 +50,15 @@
 @custom-selector :--heading h1, h2, h3, h4, h5, h6;
 :--heading { margin-top: 0 }
 
+/* image-set function */
+.foo {
+    background-image:
+      image-set(
+        url(img/test.png) 1x,
+        url(img/test-2x.png) 2x
+      );
+}
+
 /* colors stuff */
 a {
 color: var(--highlightColor);
diff --git a/package.json b/package.json
index e4cc77f..0ead882 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "postcss-custom-selectors": "^3.0.0",
     "postcss-font-family-system-ui": "^1.0.1",
     "postcss-font-variant": "^2.0.0",
+    "postcss-image-set-polyfill": "0.3.2",
     "postcss-initial": "^1.3.1",
     "postcss-media-minmax": "^2.1.0",
     "postcss-nesting": "^2.0.5",
diff --git a/src/__tests__/fixtures/features/image-set.css b/src/__tests__/fixtures/features/image-set.css
new file mode 100644
index 0000000..b2e1821
--- /dev/null
+++ b/src/__tests__/fixtures/features/image-set.css
@@ -0,0 +1,7 @@
+.image {
+  background-image: image-set(
+    url(img/test.png) 1x,
+    url(img/test-2x.png) 2x,
+    url(my-img-print.png) 600dpi
+  );
+}
diff --git a/src/__tests__/fixtures/features/image-set.expected.css b/src/__tests__/fixtures/features/image-set.expected.css
new file mode 100644
index 0000000..a4d629a
--- /dev/null
+++ b/src/__tests__/fixtures/features/image-set.expected.css
@@ -0,0 +1,13 @@
+.image {
+  background-image: url(img/test.png);
+}
+@media (min-resolution: 144dpi) {
+  .image {
+    background-image: url(img/test-2x.png);
+  }
+}
+@media (min-resolution: 600dpi) {
+  .image {
+    background-image: url(my-img-print.png);
+  }
+}
diff --git a/src/features-activation-map.js b/src/features-activation-map.js
index 0ba05ec..e92e585 100644
--- a/src/features-activation-map.js
+++ b/src/features-activation-map.js
@@ -33,6 +33,7 @@ export default {
   // pseudoClassAnyLink: [ null ],
   colorRgba: [ "css3-colors" ],
   overflowWrap: [ "wordwrap" ],
+  imageSet: [ "css-image-set" ],
   // will always be null since autoprefixer does the same game as we do
   // autoprefixer: [ null ]
 }
diff --git a/src/features.js b/src/features.js
index 1974df2..a4caac7 100644
--- a/src/features.js
+++ b/src/features.js
@@ -15,6 +15,9 @@ export default {
   // https://npmjs.com/package/postcss-calc
   calc: (options) => require("postcss-calc")(options),
 
+  // https://www.npmjs.com/package/postcss-image-set-polyfill
+  imageSet: (options) => require("postcss-image-set-polyfill")(options),
+
   // https://npmjs.com/package/postcss-nesting
   nesting: (options) => require("postcss-nesting")(options),