0.0.5 • Published 6 years ago
postcss-shopify-liquid-expander v0.0.5
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') ])