search

gajus / usus

Webpage pre-rendering service. ⚡️
Other
805 stars 33 forks source link

Postprocessing url() in result critical css #32

Open amorphine opened 6 years ago

amorphine commented 6 years ago

Hello, thanks for the work you do: it's great! But I have an issue I hope you help with: Is there a convenient way to rewrite relative paths in url()? The critical css is placed in head section and relative paths copied from css files are usually broken due to the files are located in different path than index.php or something?

gajus commented 6 years ago

Is there a convenient way to rewrite relative paths in url()? The critical css is placed in head section and relative paths copied from css files are usually broken due to the files are located in different path than index.php or something?

I don't understand the issue based on this description. Can you produce an example with ins and outs?

amorphine commented 6 years ago

Sure There's css file style.css with content

.block {
 background-image: url(./images/img.jpg)
}

The css-file can be placed anywhere. Let's say it's located in assets/styles We include css by <link rel="stylesheet" href="assets/styles/style.css"/> When the page is rendered the image is found correctly: url(./images/img.jpg) contains a relative path to the image. It's relative on the css-file location. So assets/styles/ + ./images/img.jpg gives the correct path to image: site.com/assets/styles/images/img.jpg When we generate critical css we get the same code

.block {
 background-image: url(./images/img.jpg)
}

But being included in the head section in <style>...</style> the critical css ships broken links to images: url(./images/img.jpg) is perceived by the browser as _currenturl/images/img.jpg .

So the question is: is there a native way to generate critical css avoiding the issue?

gajus commented 6 years ago

Oh I see. Thats an issue.

A fix would require resolving these paths and constructing an absolute resource path.

There is no such behaviour available at the moment.

The reason I have not run into such case is because all my images are being referred with an absolute path.

stereobooster commented 6 years ago

Same issue fixed in minimalcss https://github.com/peterbe/minimalcss/pull/28. May be useful as reference