PostCSS Shopify Settings Variables

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 }});
}

Usage

postcss([ require('postcss-shopify-settings-variables') ])

See PostCSS docs for examples for your environment.