Relative URLs linked from external CSS assets not getting rewritten

[marshmn]

I am making use of an external CSS library through the asset manager:

{% do assets.addCss('https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css') %}

I've enabled CSS pipeline with the options to bring in external CSS assets and to rewrite any relative URLs in them:

assets:
  css_pipeline: 1
  css_pipeline_include_externals: true
  css_pipeline_before_excludes: true
  css_minify: true
  css_minify_windows: false
  css_rewrite: true

However, the URLs are not getting rewritten - they are being left as relative paths. This naturally then leads to a failed request since the linked file is not available on my server.

The relevant portion of the CSS file:

/* Marker setup */
.awesome-marker {
  background: url('images/markers-soft.png') no-repeat 0 0;
  width: 35px;
  height: 46px;
  position:absolute;
  left:0;
  top:0;
  display: block;
  text-align: center;
}

[rhukster]

I think this can be closed....

[Tugzrida]

I was excited to see this fix in the changelog for v1.6.2 today, but I'm still seeing some similar issues when adding new FontAwesome versions(I haven't tried other resources).

With either adding it as an additional asset in my theme(g5 helium) or using the below twig, the following two situations happen.
{% do assets.addCss('https://use.fontawesome.com/releases/v5.8.1/css/all.css') %}

With include externals ON:
Resource is included in pipeline, but rewritten URLs are missing a slash in the protocol (https:/ not https://.

Eg. ../webfonts/fa-brands-400.eot from the original file becomes https:/use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot in the pipeline.

The missing slash causes the request to stay on grav's domain, ie. the request goes as: https://mydomain.com/use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot which obviously will not work.

With include externals OFF:
The <link> tag to the external resource is correctly present when the page is loaded the first time, but then doesn't appear in the DOM again until the cache is cleared, then again only appears in the first load, resulting in resource not being loaded at all for subsequent visits.

For the meantime, I'm going to have to stick with manually adding the <link> tag to the head in helium.

[Tugzrida]

I've done some further digging and it looks like Utils::normalizePath is unaware of protocols having two slashes - before line 261 of Pipeline.php, everything looks fine.

Not uncovered anything more about the disappearing link tags.

[rhukster]

Fixed it with a quick check.

[Tugzrida]

Cool - the url's are now just included as something like https://use.fontawesome.com/releases/v5.8.1/css/../webfonts/fa-brands-400.eot from the example above. The browser then seems to resolve this fine.

The problem of resources disappearing when "Include externals in CSS pipeline" is off is still present however, I'll open a new issue.

[rhukster]

I'm releasing this version now as it has some other important issues fixed. I will revisit this next week . While that option should work, and I will need to fix it, the workaround is to use {position:'before'} in the configuration so it's not included in the pipeline.

[rhukster]

actually keep this one open as I want to fix that /../ stuff in the external URLs too.

[rhukster]

This should be sorted too

[Tugzrida]

Looks to be working perfectly from my testing - thanks!