platformOS Community

Patrick - Combinate Jun 23 2021 at 01:45

Do we run the CSS files through the liquid engine?

I would like to be able to build the CSS file using liquid so that we can expose some elements to the user for custom styling

Shopify docs:
https://shopify.github.io/slate/docs/styles-with-liquid#basics-of-liquid-styles

If I create a file called app.css.liquid and incluide the following:

body {
    font-family: {{"sans-serif"}};
}

The file is not found when using
<link rel="stylesheet" href="{{ "styles/app.css" | asset_url }}">

We could get around this by using {{ include "styles/app.css" }} and loading it from a partial, but this would then be without a CDN

zx Jun 24 2021 at 07:55

The way around it would be to define some CSS variables in your main application .liquid file and then use it in the actual CSS.

app.liquid

<head>
	<style>
		:root {
			--main-bg-color: brown;
		}
	</style>
</head>

style.css

element {
	background-color: var(--main-bg-color);
}

Patrick - Combinate Jul 30 2021 at 02:18
That is clever! Nice idea!

Pawel Jun 23 2021 at 09:30

Only liquid files are processed by liquid, assets land directly on the storage and CDN.

asset_url is retrieving paths to files put into app/assets when deploying
app.css.liquid is in app/views where liquid is evaluated, but is not an asset per usual definition.

Dean Jun 23 2021 at 12:37

Sort of related to this, the docs here -> https://documentation.platformos.com/developer-guide/assets/adding-visuals-pages-css#step-2-create-css-file show an example of:

.logo {
  background: transparent url("../images/logo.svg") top center no-repeat;
}

In a CSS file. If that image is then updated though, the file update is NOT reflected on page as the ?updated= is not automatically appended. Is there a way around that?

Pawel Jun 23 2021 at 18:50
If you hardcode path, its hardcoded. Way around that is to manually update that path with query param when it changes, ie. logo.svg?v=2 or leave it as it is, and then use inline CSS to override image url: <div style="background-image: url({{ 'logo.svg' | asset_url }})">
zx Jun 24 2021 at 07:56
You can set that in CSS variable in some .liquid using | asset_url and then use that variable in the actual CSS file.

Rich - One Orange Cow Aug 15 2021 at 13:02

CSS files don't need to have the extention .css so you could use any old liquid file to dynamically generate your CSS and have it linked in.

But to do it correctly use page formats (or name your file something.css.liquid) and generate your CSS dynamically via liquid and POS will set the correct content type and everything. Also turn on caching because the content I'm assuming is quite static and you want the performance.

https://documentation.platformos.com/developer-guide/pages/pages#formats

CSS with Liquid