assetsPath is ignored without useHash

[timboslice69]

Found some unexpected behaviour when using assetsPath.

Scenario

CSS Source: /style/css_src/index.css
Font Assets: /style/fonts/
Image Assets: /style/images/
PostCSS Generated CSS: /style/css/index.css

I am referencing my assets as such:

@font-face {
    font-family: 'MyFont';
    src: url('../fonts/MyFont.eot') format('eot');
}

.myClass {
    background-image: url('../images/MyImage.png')
}

Using the following configuration with useHash enabled, assets are copied and hashed into /style/assets/

require('postcss-url')({
    url: "copy",
    assetsPath: '../assets/',
    useHash: true
})

However using the following configuration without useHash enabled, assets are not copied anywhere

{
    url: "copy",
    assetsPath: '../assets/',
    useHash: false
}

And using the following configuration without useHash, assets are copied into /style/css/fonts & /style/css/images

{
    url: "copy",
    assetsPath: './assets/',
    useHash: false
}

Just for extra reference, the following configuration will see the assets copied into /style/css/assets/fonts & /style/css/assets/images

{
    url: "copy",
    assetsPath: './assets/somewhereElse',
    useHash: false
}

[thisconnect]

I can confirm that there is something wrong with useHash: false.

src/styles.css

@import "font-awesome";

config/styles.js

var postcss = require('postcss');
var fildes = require('fildes');

var input = 'src/styles.css';
var output = 'dist/styles/main.css';

fildes.readFile(input)
.then(function(css){
  return postcss([
    require('postcss-import'),
    require('postcss-url')({
      url: 'copy',
      // basePath: './',
      assetsPath: 'fonts/',
      useHash: true
    })
  ])
  .process(css, {
    'from': input,
    'to': output,
    'map': {
      'inline': false
    }
  })
})
.then(function(result){
    return Promise.all([
      fildes.writeFile(output, result.css),
      fildes.writeFile(output + '.map', result.map)
    ]);
})
.catch(function(error){
  console.log(error);
});

With useHash: false I end up with a weird unexpected file structure

dist/styles/fonts/Users/myuser/myproject/node_modules/font-awesome/fonts

With useHash: true all is good and the fonts are copied into dist/styles/fonts/

[thisconnect]

happens here https://github.com/postcss/postcss-url/blob/master/index.js#L298...L303

Trying to figure out what this regex is supposed to do, I'm not good at understanding others Regex :(

[thisconnect]

Got introduced here 59683e5

[thisconnect]

Testing my change installing "postcss-url": "thisconnect/postcss-url#Fix-assetsPath" all it does is not include the dirname stuff when creating the relativeAssetsPath. Works fine for me, unfortunately I believe there is no test coverage at all for this.

[hugmanrique]

Any updates on this?

[samadadi]

I can confirm too. version 8.0.0

[rproserpio]

Probably fixed by #146

[Nagell]

nope, it's still a bug

[rproserpio]

nope, it's still a bug

That PR hasn't been merged. It's still a bug after manually applying the patch?

[Nagell]

Yep, after applying it manually it somehow works better, but unfortunately I still get wrong paths in my monorepo project. Anyway, it seems to be a completely different story.

[Nagell]

Btw. I've added it manually but in a long term I have to add it somewhere as a local code in my repo or even better as a npm package. Do you guys have some speed method of adding it as a fork so that I can install my fixed version?

Or maybe, there is someone who could check all pull requests and merge them?

[rproserpio]

I do sometimes use https://github.com/ds300/patch-package

[Nagell]

Oh man! That's a damn good tip. I owe you a beer :)

[thiagomajesk]

Hi guys, just ran into this issue today and I'd like to know if anybody figured the best option here...
It seems that useHash: true is kinda mandatory for postcss-url to work. Also, I'm amazed this hasn't gotten any attention so far, is there a solution besides waiting for #146 to be merged? Has someone managed to get the core team's attention on the matter?