CODEWITHSUNDEEP
shopifyliquidprettier
mendoza87
mendoza87

Reputation: 36

Shopify Liquid CSS and Prettier formatting

I'm having trouble formatting my theme.css.liquid with Prettier on VS Code on Mac. I tried following the official Shopify instructions for prettier but no luck. It doesn't seem to like the liquid double quotes.

I have tried with the Prettier Plugin and installing Shopify Liquid Prettier as a dev dependency and also with the Shopify Liquid VS Code Extension.

My .prettierrc

{
  "plugins": ["@shopify/prettier-plugin-liquid"]
}

My unformatted code

@charset "UTF-8";


:root {
  --colorBtnPrimary: {{ settings.color_button | default: "#000" }};
  /*--colorBtnPrimaryLight:{{ settings.color_button | default: "#000" | color_darken: 10 }};*/
  --colorBtnPrimaryLight:{{ settings.color_button_hover | default: "#000" }};
  --colorBtnPrimaryDim:{{ settings.color_button | default: "#000" | color_darken: 5 }};
  --colorBtnPrimaryText:{{ settings.color_button_text | default: "#fff" }};
  --colorCartDot:{{ settings.color_cart_dot | default: "#ff4f33" }};
}

Formatted with prettier output:

@charset "UTF-8";

:root { --colorBtnPrimary: {{ settings.color_button | default: '#000' }}; /*--colorBtnPrimaryLight:
{{- settings.color_button | default: '#000' | color_darken: 10 -}}
;*/ --colorBtnPrimaryLight:{{ settings.color_button_hover | default: '#000' }}; --colorBtnPrimaryDim:
{{- settings.color_button | default: '#000' | color_darken: 5 -}}
; --colorBtnPrimaryText:{{ settings.color_button_text | default: '#fff' }}; --colorCartDot:
{{- settings.color_cart_dot | default: '#ff4f33' -}}
;

Formatted with CSS Language features

:root {
  --colorBtnPrimary: {
      {
      settings.color_button | default: "#000"
    }
  }

;
...

Desired output

:root {
  --colorBtnPrimary: {{ settings.color_button | default: "#000" }};
}

Trying to format with the Shopify Prettier Plugin didn't do anything. I can't even choose it from the list if I try to "Format Document With...". Formatting other liquid files is no problem! I just have trouble with the theme.css.liquid.

Any help is appreciated! Thank you

Upvotes: 1

Views: 428

Answers (1)

Andy
Andy

Reputation: 11

I don't think you still need it but for anyone else here is a pretierrc.json i have that worksfor me :)

 {
    "printWidth": 120,
    "tabWidth": 4,
    "singleQuote": false,
    "plugins": ["@shopify/prettier-plugin-liquid"],
    "bracketSpacing": true,
    "prettier.bracketSameLine": true,
    "prettier.bracketSpacing": false,
    "singleLineLinkTags": true,
    "indentSchema": true,
    "overrides": [
        {
            "files": "*.liquid",
            "options": {
                
            }
        }
    ]
}

The only problem i have is that if i use a style or something else like this

.block-{{ block.id }}-element {

it saves like this

.block-{{ block.id }}
 -element {

Upvotes: 1

Related Questions