Added: postcss-image-set-polyfill (#43)

Author: SuperOl3g

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()`)

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>

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);

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",

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
+  );
+}

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);
+  }
+}

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 ]
 }

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),