Using LoadCSS with Sage

Hi there!

I have been trying to use Filament Group’s LoadCSS along with Sage without too much luck.

My initial approach comes from this article, and I have tried to adapt it to Sage using this lib/ file. I have downloaded the bower components, add them to manifest.json and updated the functions file to include the gisted file.

After much debugging I know that the problem is within the initialize_theme_detects() method, as it has been impossible to me to add that script tag into the head section of the site. Currently I don’t get any error message on the browser (it kind of times out).

Do you guys have any idea of what’s going on? Is this the best way of doing this?

Thanks for your work on roots, I am enjoying all your projects, specially trellis and bedrock.


Here’s your namespace:

namespace Roots\Sage\LazyStyles;
use Roots\Sage\Assets;

Why are you redeclaring Assets in every file_get_contents function?

The 2nd thing that sticks out is that you don’t have single quotes around your file paths which means this file_get_contents function is not spitting out a URL string like it should be. Whether you turn those URLs into strings or declare them in variables to go inside the function, I’m pretty sure that needs to change.

I assume you have LoadCSS and Critical scripts processing and loading this new code before your new functions file loads it into the document?

This is something I’ve been thinking about doing for a while now so this looks great so far! I would love to see this either built into Sage or as a Roots plugin until HTTP/2 becomes more common.

Just to note, functions are not the same as classes in PHP when it comes to namespaces, you still need to declare the last level namespace when using functions. You’ll see it around in the Sage theme as well.

Thanks for the leads @asuh, I finally got something working.

As @kalenjohnson pointed out, I needed to keep the “Assets” part in the call to asset_path.

Here is my updated gist. I still don’t know why I can’t call file_get_contents passing in the result of the asset_path function, comments appreciated.

Thanks for your support!

1 Like

I think you’re still missing quotation marks:

<?php echo file_get_contents("$onloadCSSPath"); ?>

Add those quotation marks to the file_get_contents functions and see if that fixes it.

Oh, sorry, I explained myself wrongly.

The code in my gist works perfectly. What I cannot make work is this:

 <?php echo file_get_contents(Assets\asset_path('scripts/onloadCSS.js')); ?>

But I guess the current state of the code is OK

I’d like to test this out on a project to see what’s going on but I’m curious what your Gulp file looks like to generate the loadCSS and critical CSS/JS files. Are you generating those within browsersync as you go or just when you do a Gulp build?

So I found out some stuff around, and this gist;
implements Filament’s Group criticalCSS.

Not a definitive solution, as it looks pretty ugly and does not know the cache invalidation token, so I need to generate it manually…

In your lib/lazy-styles.php file, you reference several CSS/JS files. Are you manually creating these files or using Gulp to generate them? I’m curious how you are using your own code to test this out.

I think that Filament’s Group code is a bit complicated and I prefer Addy Osmani’s version here:

But am I right to guess that you just manually created the CSS and JS files to test with lazy-styles.php?

Yeah, I tried Osmani’s one but I couldn’t make it work. I am pretty limited on my Gulp skills.

I am still working on including the criticalcss generation into the gulp build, I hope to be able to post here a better solution.