assetsPath is ignored without useHash

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
}

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/

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 :(

Got introduced here 59683e5

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.

Any updates on this?

I can confirm too. version 8.0.0

Probably fixed by #146

nope, it's still a bug

nope, it's still a bug

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

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.

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?

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

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

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?

Just had also this bug. It's a big ridiculous that this is still not fixed - after 8 years. And a PR with a fix exists.

Is postcss-url abandoned?

Navigation Menu

Repository navigation

assetsPath is ignored without useHash #46

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

assetsPath is ignored without useHash #46

Description

Activity

thisconnect commented on Jan 7, 2016

thisconnect commented on Jan 7, 2016

thisconnect commented on Jan 7, 2016

thisconnect commented on Jan 7, 2016

hugmanrique commented on Jun 2, 2018

MadadiSaeed commented on Aug 29, 2020

rproserpio commented on Oct 22, 2020

Nagell commented on Jan 7, 2022

rproserpio commented on Jan 7, 2022

Nagell commented on Jan 10, 2022

Nagell commented on Jan 11, 2022

rproserpio commented on Jan 11, 2022

Nagell commented on Jan 11, 2022

thiagomajesk commented on Jan 16, 2022

msteller-connyun commented on Jan 31, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions