@log4js-node/sandboxed-module

PostCSS Shopify Liquid Expander

[PostCSS] plugin for variable of theme setting in shopify css file.

It's common to use code like {{ settings.headline_color }} as value of css property in css file of shopify theme. It cause some annoying issues since it's a invalid value of css. For exmaple, your code editor will lost syntax highlighting.

With this simple plugin, you can use code like $(settings.headline_color) instead. It will be transformed to the syntax shopify support.

This...

.foo {
    color: $(settings.headline_color);
    font-family: $(settings.regular_websafe_font | replace: '+', ' ');
    font-size: $(settings.regular_font_size)px;
    border: 1px solid $(settings.border_color);
    background-color: rgba($(settings.header_bg_color), 0.9);
    background-image: url( $("logo.png" | asset_url));
}

Turns into...

.foo {
    color: {{ settings.headline_color }};
    font-family: {{ settings.regular_websafe_font | replace: '+', ' ' }};
    font-size: {{ settings.regular_font_size }}px;
    border: 1px solid {{ settings.border_color ));
    background-color: rgba({{ settings.header_bg_color }}, 0.9);
    background-image: url({{ "logo.png" | asset_url }});
}

Usage

postcss([ require('postcss-shopify-liquid-expander') ])