How to render a liquid css/stylesheet file ?

[PlanetIrata]

Hi,

I'm wondering how to render a styles.css.liquid file with LiquidJS from several smaller files (header.css.liquid, footer.css.liquid...) ?

The stylesheet_tag is not supported in LiquidJS, therefore it is not possible to write this in a layout fil in order for the css file to be parsed:

{{ 'style.css.liquid' | stylesheet_tag }}

What are the best practices to manage the CSS with LiquidJS in a file (and not in a huge <style> tag included in each page).

Thanks for your help!

[harttle]

Not sure what this filter exactly does. But it's easy to implement and register such a filter to render that css file and wrap the result with a `<style>` tag. I guess the tricky part will be the tags and filters inside the .css.liquid file. Back to the question, the best way is to implement a filter or a set of required filters and tags in a plug-in and register to LiquidJS.

[PlanetIrata]

The stylesheet_tag filter just create a <link rel="stylesheet" href="style.css"> tag, but the interesting part is that the style.css.liquid file is parsed and rendered...

[ekwoka]

For Shopify, they automatically process .css.liquid files into .css files whenever your theme is saved (not on the fly like other files).

[harttle]

I suppose the stylesheet_tag is more like responsibility of site generator, not template engine itself. Because it need to know where's the CSS files are located and how to build those files.