platformOS Community

CSS with Liquid

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

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.
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);
}
Please sign in or fill up your profile to answer a question