How can I {% include %} Compiled SCSS as Inline Styles?

ToneFox
Tourist
5 0 15

I am attempting to extract critical SCSS styles from our theme's stylesheet to insert into the page as inline styles, but I ran into limitations with Shopify that are making it a challenge. I've done some research on this matter but the utility I found (Slate) is no longer in development.

 

To {% include %} the text of the stylesheet directly into the page, it needs to be stored within the snippets folder, but Shopify does not compile SCSS snippets. I would {% include %} it from the assets folder instead, but the include function doesn't work on assets. As a last ditch effort, I would have liked to precompile the SCSS in the critical styles file and just include them from the snippets folder as plain CSS, but since the stylesheet is full of Liquid tags, it won't compile. At this point it appears that my only option is to perform some sort of custom processing on the file to compile the SCSS while preserving the Liquid tags. Even if that works, I would prefer to leave the SCSS intact since it is obviously much easier to work with.

 

I'm fairly new to Shopify development so I'm not sure what the best practice is in this case, but I would presume that there must be some way to accomplish this. If anyone has advice it would be greatly appreciated. Thank you!

PaulNewton
Shopify Partner
2579 134 440

Advanced SCSS isn't supported on shopify, the cache system of assets v snippets is just different it seems so optimizing the critical path is a bit of a pain

 

name.scss.liquid and name.css.liquid both render some liquid features with {% include %} being the notable exception.

And unfortunately we cannot set mime types on custom pages otherwise you could just us an alternate template with no layout to serve the CSS.

 

I would have liked to precompile the SCSS in the critical styles file and just include them from the snippets folder as plain CSS, but since the stylesheet is full of Liquid tags, it won't compile

I'm not following that exactly, any .liquid snippet should compile

Serve it as a liquid snippet then copy the rendered output on the CDN to another file.

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
ToneFox
Tourist
5 0 15

Serve it as a liquid snippet then copy the rendered output on the CDN to another file.

Shopify's system also processes the the Liquid tags. The method I was referring to was to compile the SCSS with a non-Shopify SCSS preprocessor so that I could preserve the Liquid and therefore the functionality of the theme customizer. Since Liquid uses curly brackets however, a normal SCSS processor would get tripped up. Ideally I would need a custom SCSS preprocessor that recognizes and ignores Liquid, but it's not worth taking the time to write.

 

I think I will end up using your approach however. It will take some time, but I should be able to find and replace the Liquid values in the rendered stylesheet with their original Liquid tags to restore the theme customizer's variables. Thank you for your response!

0 Likes
Ross_Angus
Tourist
8 0 0

I have a similar issue to @ToneFox and see where this question is coming from. It seems to me unrealistic to manage 4,000 lines of CSS in one file. Other development environments allow code to be split into discrete components, which can be assembled at runtime. render and snippets the ideal functionality to achieve this, when developing Shopify locally. But when I attempt this, I get the error message

Liquid error: This liquid context does not allow includes.

I believe what @ToneFox was suggesting was to have another watch task running which updates the main application.css.liquid file with these modules, before they are synced with Shopify.

Does anyone know a way around this? I really don't want to start managing 4,000 lines of CSS or having multiple HTTP connections, per page impression.

0 Likes
Ross_Angus
Tourist
8 0 0

I've looked into this a bit more and Shopify does support HTTP/2. This suggests that including multiple CSS files is perhaps the way to go. I'd like to hear everyone's thoughts on this, however.

0 Likes
PaulNewton
Shopify Partner
2579 134 440

For critical path isn't HTTP/2 irrelevant since the goal is to inline any critical styles as early as possible in the page source not deliver them over a separate network request.

Beyond that initial load then sure multiple files come with benefits but no hard rule on when the benefit becomes a drawback on the client side of things.

 

Tangent..

I guess retrieving the rendered CSS for multiple file regardless of build process seems to be a consistent core issue.

Slate while not being developed is still available and repurposable as a build tool for this purpose I suppose.

There's also setting up a utility theme that just spits out the CSS assets in json, or loads the literal content in via ajax into the page text.

Since they get put into theme exports I don't think I've ever checked if the rendered css files are made available the assets api in which case themekit should be able to grab those too.

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes