PostCSS plugin to allow use of Shopify specific theme variables in Shopify css files.
It's common in a Shopify theme css file to use code such as {{ settings.headline_color }} as a value of css property. Sadly, this will cause some annoying issues such as your code editor will loose syntax highlighting, and more. This happens because such values are invalid form of css.
With this simple PostCSS plugin, you can safely use code like $(headline_color) instead. This code will be transformed to the syntax Shopify parsers support.
.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);
background: url(logo.png | split: '?' | first);
}Will be transformed to:
.foo {
color: {{ settings.headline_color }}; /* Shopify friendly values */
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 }});
background: url({{ "logo.png" | asset_url | split: '?' | first }});
}postcss([ require('postcss-shopify-settings-variables') ])See PostCSS docs for examples for your environment.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent