assetsPath is ignored without useHash

Open
#46 15 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
tooling, web-dev

Research direction

Reproduce the three postcss-url configurations described in the issue, comparing asset copying with useHash enabled and disabled. Trace how assetsPath is resolved during copy operations; done when the configured ../assets/ destination works without useHash and the existing relative-path behavior remains intact.

Written by the indexing model from the issue text.

Description

help wanted

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
}
Dominant language
JavaScript
Stars
383
Forks
58
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss-url

All issues in postcss/postcss-url

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.