Nesting in breakpoints?

[strarsis]

@SuperOl3g: Use case: For a specific set of breakpoints I provide different background images (which can optimize loading time quite nicely). Now I also want to provide three images per pixel density (1x; 2.x and 3x) per breakpoint. In SASS with webpack responsive-loader this would result in a construct like this:

$width-smallest: 420;
$widths: 1366, 1280, 1120, 1600, 1000, 850, 600, 500;

  // (smallest)
  background-image:
    image-set(
      url(../background.jpg?size=#{$width-smallest}&quality=10) 1dppx,
      url(../background.jpg?size=#{$width-smallest * 2}&quality=10) 2dppx,
      url(../background.jpg?size=#{$width-smallest * 3}&quality=10) 3dppx
    );

  @each $width in $widths {
    @media (min-width: #{$width}px) {
      background-image:
        image-set(
          url(../background.jpg?size=#{$width}&quality=10) 1dppx,
          url(../background.jpg?size=#{$width * 2}&quality=10) 2dppx,
          url(../background.jpg?size=#{$width * 3}&quality=10) 3dppx
        );
    }
  }

Can this plugin handle these cases? Can I make the whole thing simpler?

[SuperOl3g]

Hmm... interesting case. I thought about it a lot and decided that optimization of a number of media queries is a too complex task for a simple plugin. Especially considering that image size may not coincide with window size in some cases. One plugin must have only one purpose. Some cases can be optimized by csso with enabled restructure flag. Besides, mqpacker have to reduce code size but in my opinion this plugin makes dangerous non-equivalent optimizations.

[SuperOl3g]

If you have a good idea how to optimize it without big performance degradation, I'm glad to listen 🙂

[SuperOl3g]

Besides beware the bug with media-queries, I had described it in this issue. Sorry, but for now have no time to figure out what goes wrong ¯_(ツ)_/¯

[strarsis]

So I needed this again today and further investigated. This tool has to check for media queries that contain the selector using the image-set to be polyfilled and then re-use that media query together with the right density.