Support for raw include for inlining CSS, SVG, etc.

[manastungare]

I’d like to inline tiny bits of CSS and a few SVG images for performance-critical paths. I found that {% include file.css %} tries to parse the inlined file as HTML, which, of course, fails for CSS & SVG.

Invalid syntax for include tag. File contains invalid characters or sequences:

{% raw %} doesn’t quite work either, since that prevents transclusion in the first place.

Something like include_raw or include file.css raw=true could include the raw files, but treat them as opaque non-markup text.

Is this something Liquid could support?

[fw42]

Hm. What kind of CSS and SVG files are you using that they contain Liquid tags (like {% raw %})?

[manastungare]

They don’t, which is the weird part. Here, for example, is an entire SVG file that reports this error.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" enable-background="new 0 0 266.893 266.895"><rect width="100" height="100" fill="#3c5a99" fill-rule="evenodd"/><path d="M70.596 100v-38.773h13.014l1.949-15.11h-14.963v-9.647c0-4.375 1.215-7.356 7.488-7.356l8.001-.004v-13.515c-1.384-.184-6.134-.596-11.659-.596-11.536 0-19.434 7.042-19.434 19.974v11.143h-13.047v15.11h13.047v38.773h15.604z" fill="#fff"/></svg>

[fw42]

Hm I don't get any errors when I put this through Liquid::Template.parse()

[fw42]

Is this an issue on a Shopify store? Or where are you using Liquid? If it's on Shopify, can you send me your shop name and a Liquid code snippet which reproduces this problem? flo@shopify.com

[manastungare]

Using this in a Jekyll template as:
{% include file.svg %} or file.css

[manastungare]

I started creating a minimal test case for this issue, and realized it doesn't reproduce any more. I think it might have been something with how Jekyll was using Liquid. Sorry for the noise! This works as expected now.

[mrkgnao]

I'm having some trouble with this. I have a small Jekyll blog hosted on GitHub Pages, and it features some math, so I have a plain text file with some LaTeX macros that I {% include %} into the blog post body. Pretty simple stuff, I'm new to this.

However, some LaTeX macros have a {% in their syntax, which obviously freaks Liquid out and makes Jekyll fail to compile the static files.

Is there any chance of an include_unescaped_file being a thing?

[jonhoo]

I have this as well when including a page that contains BibTeX descriptions, which often contain {{. The solution for now seems to be that I need to modify the file being included to be wrapped in {% raw %}, but that's hard as it is externally generated.

[adamhollett]

If you're having this issue when using Jekyll, it might be an issue with Jekyll's implementation of include: https://github.com/jekyll/jekyll/blob/master/lib/jekyll/tags/include.rb

Feel free to open an issue in the Jekyll repository.

[mhansen]

This is a very old issue, but in case anyone finds this googling, here's a solution:

Put raw_include_relative.rb in _plugins/ directory at your Jekyll root:

# raw_include_relative.rb
module Jekyll
 module Tags
 class RawIncludeRelativeTag < IncludeRelativeTag
 # Overriding is explicitly allowed, to modify file content by subclassing:
 # https://github.com/jekyll/jekyll/blob/f5826eed3cde692f84e35140209d5a59ec3eb295/lib/jekyll/tags/include.rb#L178
 def read_file(file, context)
 # Hack: instead of including the file directly without liquid escaping,
 # simply wrap the entire file in a `raw` liquid tag, suppressing liquid
 # processing.
 "{% raw %}" + super + "{% endraw %}"
 end
 end
 end
end

Liquid::Template.register_tag("raw_include_relative", Jekyll::Tags::RawIncludeRelativeTag)

Then you can use {% raw_include_relative somefile.txt %} just as you would use include_relative.

In-practice example.