8000 Support for CSS `image-set` ? · Issue #9 · timse/srcset-loader · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Support for CSS image-set ? #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
ephys opened this issue Apr 3, 2017 · 5 comments
Open

Support for CSS image-set ? #9

ephys opened this issue Apr 3, 2017 · 5 comments

Comments

@ephys
Copy link
Contributor
ephys commented Apr 3, 2017

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
Copy link
Owner
timse commented Apr 4, 2017 •
edited
Loading

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
Copy link
Contributor Author
ephys commented Apr 5, 2017

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

@timse
Copy link
Owner
timse commented Apr 7, 2017

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
Copy link
Contributor

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

@Briareos
Copy link
Briareos commented Nov 25, 2017 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Briareos @timse @ephys @PaulKiddle
0