Shopify Css.liquid support

[callummcmaugh]

Would it be possible to extend the build tool to allow exporting as index.css.liquid. I'm looking into using slater for some theme development, but I want the native features of using theme settings (eg. {{setting.css_color}}) from shopify in my css files. Alternatively, if there is a way to make this possible without changing slater, that would also work.

[iamkevingreen]

I'm not sure there's an elegant way to minimize/compile css and keep something like the settings in tact, you would need to write a plugin for that formatting I'd imagine? Alternatively you could have a like global.css.liquid that references your settings vars in the build. We do the same thing with a fonts.css.liquid to reference asset uploaded fonts.

[stefanbayjensen]

@callummcmaugh – A way to come around this, could be creating a file with the following code, setting some global CSS variables, as inline style:

<style>
    :root {
        --base-font-size: {{ settings.type_base_size | | divided_by: 10.000 }}rem;
        --color-body-text: {{ settings.color_body_text }};
        --color-primary: {{ settings.color_primary }};
        --color-secondary: {{ settings.color_secondary }};
        --color-white: #fff;
        --color-black: #000;
    }
</style>

If you define these, before including your css-file, you can reference them, within that file. And yes I know css-variables isn't supported in Internet Explorer, but there actually is some fixes for that. We use the following solution, in the index.js file, which is working perfectly!

import cssVars from 'css-vars-ponyfill'
cssVars()