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 lose syntax highlighting.
With this simple plugin, you can use code like $(headline_color) instead. It will be transformed to the syntax shopify support.
this...
.foo {
color: $(headline_color);
font-family: $(regular_websafe_font | replace: '+', ' ');
font-size: $(regular_font_size)px;
border: 1px solid $(border_color);
background: rgba($(settings.header_bg_color), 0.9);
background: url(logo.png);
}...is transformed into 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: rgba({{ settings.header_bg_color }}, 0.9);
background: url({{ "logo.png" | asset_url }});
}postcss([ require('postcss-shopify-settings-variables') ])See PostCSS docs for examples for your environment.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent