Automattic / Automattic/juice

How to change relative url paths in external CSS?

Open
#318 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.3k
Forks
233
Avg merge
1d 10h
Merged PRs (30d)
8

Description

I am using Juice to try and inline font-awesome CSS.

Given I have a html file called 'test.html' which includes the following:

And I then run the following juice command (which I ran at the following directory: C:\Users\admin\Desktop):

juice test.html test-out.html

I get the following error:

Error: The file C:\Users\admin\Desktop\https:\cdnjs.cloudflare.com\ajax\libs\font-awesome\3.1.0\font\fontawesome-webfont.eot was not found!

It is clear that the error states that it is trying to reference a file that does not exist locally, and so it shouldn't.

Now it appears the issue is related to the external css in that it references @font-face's relatively. Which (I think) means that when Juice tries to inline the css, it uses the local relative path, causing the the error.

I have tried using the --web-resources-relative-to and --web-resources-rebase-relative-to flags to see if this would fix the issue but they cause any other references to behave differently causing different errors.

**I should also make it clear that I need to make this work without modifiying the html. Is there anything in Juice that I am blindly missing that would help me resolve this issue? or is it not possible to change the relative path of external file/css references**

Contributor guide

Open the contributing guide

Research direction

Reproduce the case with test.html, the linked Font Awesome stylesheet, juice test.html test-out.html, and the --web-resources-relative-to and --web-resources-rebase-relative-to flags. Trace how the external stylesheet's relative font URL is resolved; done means the command handles that URL without modifying the HTML while preserving other resource references.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.