Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline CSS #605

Closed
shalzz opened this issue Feb 1, 2019 · 16 comments

Comments

Projects
None yet
4 participants
@shalzz
Copy link
Contributor

commented Feb 1, 2019

Bug Report

Environment

Zola version: 0.5.1

Expected Behavior

Ability to inline CSS in a document. This helps with critical CSS that should be loaded with the main document and makes sure the render/paint time of a page is not held up while separately loading a CSS file.

Current Behavior

No way to inline CSS

@Keats

This comment has been minimized.

Copy link
Collaborator

commented Feb 1, 2019

How would that look?

@shalzz

This comment has been minimized.

Copy link
Contributor Author

commented Feb 2, 2019

A function like get_css or maybe extend load_data to work with .css files so that one can get the contents of the file into a buffer and use it in a template like so:

{% set css = load_data(path="critical.css") %}
<style>{{ css }}</style>
@Keats

This comment has been minimized.

Copy link
Collaborator

commented Feb 2, 2019

load_data should load that css as plain text no? I haven't used it yet but that's what I remember from the review

@shalzz

This comment has been minimized.

Copy link
Contributor Author

commented Feb 2, 2019

That'd only work with css files in static/ right? I haven't tried because I'm using .sass files compiled to .css files and ideally have something that hooks into that system and gives you a buffer of the final output/file.

@Keats

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

.sass files will get compiled in the static folder so yeah load_data should work there.

I don't think it would make sense to hook the Sass compilation with the templating, you wouldn't get live reload anyway.

@shalzz

This comment has been minimized.

Copy link
Contributor Author

commented Feb 5, 2019

Huh.. For me the .sass compiles into the root of the public directory.
Trying to do this with even theme doesn't build:
https://github.com/shalzz/even/commit/ccda2fb9836c552e5ac0069ca6adf132e39ff6ae

@Keats

This comment has been minimized.

Copy link
Collaborator

commented Feb 5, 2019

Sorry I meant public not static.
I'll have a look later, I thought it would work out of the box

@Keats

This comment has been minimized.

Copy link
Collaborator

commented Feb 9, 2019

So the reason it is not working is that load_path defaults to content/ for the base directory...
That does seem like a valid use of load_data though and I would prefer not having too many Tera functions.

What do you think @kellpossible ?

@Keats Keats added the enhancement label Feb 20, 2019

@ryanmcgrath

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2019

FWIW, load_data works fine with relative paths - I use it for exactly this reason (along with loading some JSON to render into a template).

e.g, just {% set css = load_data(path="../das/path/etc") %}

@Keats

This comment has been minimized.

Copy link
Collaborator

commented Mar 9, 2019

Maybe the default folder should be the base_path? To avoid having to use ..

@ryanmcgrath

This comment has been minimized.

Copy link
Contributor

commented Mar 9, 2019

@shalzz

This comment has been minimized.

Copy link
Contributor Author

commented Mar 10, 2019

FWIW, load_data works fine with relative paths - I use it for exactly this reason (along with loading some JSON to render into a template).

e.g, just {% set css = load_data(path="../das/path/etc") %}

Sure relative paths work but the css file should exits before we try to load it. The problem here is with css files compiled from sass.

try building this with your example: https://github.com/shalzz/even/commit/533d25b300a21ed2f0b1c92010ab561dae23a218
you'd get this:

$ zola build
Building site...
-> Creating 15 pages (0 orphan), 1 sections, and processing 0 images
Failed to build the site
Error: Failed to render page '/tmp/even/content/pages/about.md'
Reason: Failed to render 'about.html' (error happened in a parent template)
Reason: /tmp/even/content/../public/site.css doesn't exist
@Keats

This comment has been minimized.

Copy link
Collaborator

commented Mar 11, 2019

Base path would make more sense to me, and I recall wondering why it wasn’t that...

That's now the case in next.

Sure relative paths work but the css file should exits before we try to load it.

It should be fixed in next as well, all assets are now generated/copied before rendering templates.

@Keats

This comment has been minimized.

Copy link
Collaborator

commented Mar 22, 2019

@shalzz your repo is now working with the next branch!

@Keats Keats closed this Mar 25, 2019

@foray1010

This comment has been minimized.

Copy link

commented May 22, 2019

fyi, I have to use <style>{{ css | safe }}</style> instead because I used / in css which is escaped by default

@Keats

This comment has been minimized.

Copy link
Collaborator

commented May 22, 2019

Yeah... It would be great to have the concept of MarkupSafe strings in Tera but I'm not sure how to do that (yet). In the meantime, you can use | safe on pretty much everything from Zola.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.