data-uri won't accept fragment identifiers in URLs

[regiskuckaertz]

Hello, so this issue appears not to have been reported before. I'm using grunt-contrib-less v0.10 which uses LESS v1.6 behind the scene. This issue won't happen in the browser since data-uri won't try to resolve the file path in that case, thus I'm unable to reproduce it in less2css.org, sorry.

I'm using SVG filters for a project and, rather than embedding the SVG definitions in the HTML, I'd rather inline it in the CSS. Like so:

.element {
  filter: url('data:image/svg+xml,%3Csvg%20...#blur');
}

I tried using data-uri, like so:

.element {
  filter: data-uri('image/svg+xml', 'filters.svg#blur');
}

but the pre-processor stops with a "File not found" error. The solution I suppose would be to:

1 detect if there's a fragment identifier in filePathNode
2 save it for later and truncate the value accordingly
3 process as usual
4 append the fragment ID to the generated URI

I will try to find time to update the code by myself but I'm quite in a hurry right now, at least I wanted to report the issue.

[lukeapage]

Thanks, whats the fragment used for? (just because I haven't come across it myself)

[regiskuckaertz]

It is needed everywhere CSS and SVG join forces: masks, clipping paths, filters, ... For instance:

<svg>
 <defs>
  <clipPath id="circle">
    <circle r="50" cx="50" cy="50"></circle>
  </clipPath>
 </defs>
<svg>

Then in CSS:

.avatar {
  clip-path: url("mask.svg#circle");
}

(HTML5 Rocks has "everything covered")

[lukeapage]

Ok, we should fix it then