bring back "relativeTo" in some form

[onigoetz]

Hi,

I'm sorry to have to make an issue to ask for a removed feature, but I have a use case were it worked perfectly and I can't get the new way to work.

My environment

• a java webapp, compiling with the frontend-maven-plugin with gulp
• the paths must be relative because there is no way to know where it will be deployed in advance
• gulp-svg2png to create png's out of all my svg's
• This folder structure

src/main/frontend/          # Source folder
  gulpfile.js
  css/
    file.scss
  images/
    image.svg

src/main/webapp/resources/  # Built folder
  css/
    file.css
  images/
    image.png
    image.svg

My current configuration

var assetsOptions = {
  loadPaths: ["../webapp/resources/images"],
  relativeTo: "../webapp/resources/css",
};
processors.push(require("postcss-assets")(assetsOptions));

So the following css : .Image1 { background: resolve('image.png'); } compiles to .Image1 { background: url('../images/image.png'); }

Updating to 4.0

If I update to 4.0 and update my configuration to

var assetsOptions = {
  loadPaths: ["../webapp/resources/images"],
  relative: true,
};

now, the same css (.Image1 { background: resolve('image.png'); } will compile to .Image1 { background: url('../../webapp/resources/images/image.png'); }

While you could say, that I can change loadPaths to loadPaths: ["images"], this will work for almost all files, but not for svg files converted to png, because they don't exist in src/main/frontend/images.

Do you have an idea how I can support that use case in my project ?

[borodean]

Hi @onigoetz! Let's see how can we resolve this.

Why don't you convert SVGs to the src/main/frontend/images?

[onigoetz]

Hi @borodean

Yes, I could do that, but I wanted a clear separation between sources and generated files.

[vladimirsiljkovic]

Hi,

I have a similar problem, so I had to revert to version 3.0.3.

I am minifying PNG, JPEG, GIF and SVG images with gulp-imagemin, thus moving them from one folder to another. My folder structure is slightly different:

/
    gulpfile.js
     /client/
         /css
         /img
    /build
        /css
        /img

These are the plugin options:

assets({ 
    basePath: 'build/',
    relativeTo: 'build/css', loadPaths: ['img', 'fonts'],
    cachebuster: true
})

P.S. Thanks for the great plugin, @borodean.

[borodean]

@vladimirsiljkovic 4.1.0 is now capable of receiving a string as relative option value. If a string is provided, generated paths would be relative to a path described in it.

[vladimirsiljkovic]

Thank you very much, @borodean!

Just to confirm that it works correctly.

I've changed my options to:

assets({
    basePath: 'build/',
    relative: 'css',
    loadPaths: ['img', 'fonts'],
    cachebuster: true
})

[borodean]

@vladimirsiljkovic true, it works absolutely the same as relativeTo worked. Let me now if something goes not as expected.

[onigoetz]

Thank you that's perfect :D