less / less/less.js

rootpath does nothing to absolute url() paths

Open
#3,552 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

needs info
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

Minimal Reproduction using less 3.12.0

fail.less:

.fail {
    background-image: url('/images/absolute.png');
}
.works {
    background-image: url('images/relative.png');
}

run:

lessc -rp=https://mycdn/url/folder fail.less ./out.css

out.css

.fail {
  background-image: url('/images/absolute.png');
}
.works {
  background-image: url('https://mycdn/url/folder/images/relative.png');
}

Why do I want this behavior?
During development the images are served by the local web server in the /images directory.
When publishing all static elements are served out of a folder on the CDN, the folder name is variable.
This is very similar to the issue reported in #2129 but that lacked the clear detail that the image url is absolute

Contributor guide

Open the contributing guide

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.

Research direction

Reproduce the issue with the provided fail.less file and lessc command, then trace how the -rp/--rootpath option handles relative and absolute url() values. Done means absolute URLs receive the configured rootpath while relative URLs retain their current behavior, with regression coverage for both examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
build-system, cli, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.