borodean / postcss-assets

An asset manager for PostCSS
MIT License
537 stars 32 forks source link

Allow query strings to be second argument of resolve. #23

Closed justinanastos closed 9 years ago

justinanastos commented 9 years ago

Intro

This modification allows us to use background-image: resolve(url [, queryString])to optionally add a query string to the end of the resolved filename.

If this is something you'd be interested in merging in, please give me a little guidance and I'll also update the readme to reflect the new option.

Logic

I'm using imgix for production images. Imgix allows me to host a single high resolution file and then use imgix's CDN to serve variations of that single file depending on query strings.

For development, I serve up local images from ./tmp/public/images (using sails). For production I serve the images from imgix. I use basePath and baseUrl in my gulp configuration like so:

plugins.postcssAssets({
    loadPaths: [
        '../assets/images/',
    ],
    basePath: process.env.NODE_ENV === 'production' ? './tmp/public/images' : 'assets',
    baseUrl: process.env.NODE_ENV === 'production' ? 'https://constantadvisor.imgix.net' : '/',
}),

Example

background-image: resolve('image.jpg', 'dpr=2')

The path image.jpg will aways resolve using loadPaths (../assets/images). The output would then vary for production or development:

development

background-image: url('/images/image.jpg?dpr=2');

production

background-image: url('https://constantadvisor.imgix.net/image.jpg?dpr=2')
borodean commented 9 years ago

@justinanastos Assets is already capable of resolving paths, containing both query and hash params. Please try:

background: resolve('kateryna.jpg?foo=bar#baz');

Outputs to:

background: url('/assets/images/kateryna.jpg?foo=bar#baz');