search

timse / srcset-loader

Flexible srcset-loader for webpack
46 stars 14 forks source link

Support for CSS `image-set` ? #9

Open ephys opened 7 years ago

ephys commented 7 years ago

This is more a discussion on how feasible it would be than a feature request

Some browser support defining responsive images in CSS, it would be nice if there was a way to write them as easily as it currently is in JS.

Unfortunately, CSS is a little less flexible when it comes to processing data at runtime. So anything the loader returns should be a string in this case.

Currently, the only way I would see it work is by declaring every size manually

background: image-set(
  url('foo.png?sizes=200w') 1x,
  url('foo.png?sizes=400w') 2x,
  // ...
);

It isn't as short and simple as the JS version, but it would work and would at least automate the resizing part.

The main problem I have with it is that currently, this query would return an object containing exactly one size instead of a string. Changing the behavior to return a string when there is only one size and no placeholder would mean another breaking change and an inconsistent API, which I'm not sure I like.

Any ideas ? Should image-sets be supported by this loader ?

timse commented 7 years ago

we could have a sub loader that just returns a string as required/expected for the css?

Not sure best to do that with webpack 2, need to check but should be possible.

ephys commented 7 years ago

Not sure either, a PostCSS plugin might be a better alternative

timse commented 7 years ago

never worked with that, but this code wouldnt be usable in a postcss plugin i reckon?

a sub loader like const cssImageSetLoader = require('srcset-loader/css-image-set.js) could work. and then just use that loader if a certain option is set in the srcset-loader

if(loaderQuery.cssImageSet) {
   //use cssImageSetLoader
   ... 
}
PaulKiddle commented 7 years ago

I created a postcss plugin to do this job for background images https://github.com/niceagency/postcss-srcset

Briareos commented 6 years ago

I suggest adding a toString method to the exported object

module.exports = obj = {/* exported data */};
obj.toString = function() { return obj.sources[Object.keys(obj.sources)[0]]; }; // returns the first source URL

That results in CSS referencing the correct URL when using something like background-image: url(cover.png?sizes=200w) instead of outputing background-image: url([object Object]); like it does right now. Also from my experience it continues to play nicely with other loaders.

Not really an image-set support, but that might be supported in a similar way.