postcss-liquid-variables

PostCSS plugin for using Liquid variables in CSS files.

Usage no npm install needed!

<script type="module">
  import postcssLiquidVariables from 'https://cdn.skypack.dev/postcss-liquid-variables';
</script>

README

PostCSS Liquid Variables

PostCSS plugin to allow use of Liquid theme variables in CSS files.

Forked from PostCSS Shopify Settings Variables and adjusted slightly for use with non-Shopify Liquid templates.

.foo {
  background-color: $(theme_preferences.background_colour);
}

Will be transformed to:

.foo {
  background-color: {{ theme_preferences.background_colour }};
}

Usage

postcss([ require('postcss-liquid-variables') ])

See PostCSS docs for examples for your environment.