Liquid CSS code formatting

[Muhammad-Jawad133]

I have an swear issue using this extension. so You can see in attached screenshot. when I am installing this extension and enable it's messy my all CSS code in liquid file. please suggest me to fix it and help me. I am trying but not able to fix it. I have deleted all of my other extensions and use this extension alone but it's still doing the same. Please help me. now I have disabled tis extension form my vs code. Loom video also attached https://loom.com/share/a0518dc97a07466e974dab169710565f

[ianjwhitmore]

Had the same exact issue today and had to uninstall.

[Muhammad-Jawad133]

Had the same exact issue today and had to uninstall.

yeah ianjwhitmore I am too much worried about it. I don't know how to fix it. this extension published by Shopify.dev .

[panoply]

Hey guys,

Patch is coming in #138 - You can always ignore these files, in the .liquidrc file:

{
   "ignore": ["./path/to/file.css"]
}

When you want disable formatting altogether, In your workspace settings:

  "[liquid]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": false // Make this false
  },

This will turn off formatting.

[Muhammad-Jawad133]

Hey guys,

Patch is coming in #138 - You can always ignore these files, in the .liquidrc file:

{
   "ignore": ["./path/to/file.css"]
}

When you want disable formatting altogether, In your workspace settings:

  "[liquid]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": false // Make this false
  },

This will turn off formatting.

Hey panoply, Thanks to help me. but if I will do like this so I will have to add this code for everytime for every css.liquid file, if I write css code in any liquid file, it will auto format the code and mess my css code in every liquid file.

[panoply]

@Muhammad-Jawad133 Ah, I see. In that case you can just disable formatting for liquid-css language in you vscode workspace settings:

 "[liquid-css]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": false // Make this false
  }

[Muhammad-Jawad133]

@Muhammad-Jawad133 Ah, I see. In that case you can just disable formatting for liquid-css language in you vscode workspace settings:

 "[liquid-css]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": false // Make this false
  }

@panoply Thank you very much, should I paste this code in user settings == settings.json?

[panoply]

Yeah, that will work. You can also use a .vscode/settings.json file. However user settings should work too.

[Muhammad-Jawad133]

Yeah, that will work. You can also use a .vscode/settings.json file. However user settings should work too.

@panoply

I did exactly like you said but my I have still the same issue. that code you have provided me that works for only liquid.css file, but sometime when I write style code in my liquid file or JavaScript code in liquid file then this extension messing my that CSS or JS code in every liquid file. you can see in the attached screenshot.

[panoply]

Hey, so this is all listed in the readme file and I ask you to please read it. Use the following settings to disable in other files:

{
  "[liquid]": {
        "editor.defaultFormatter": "sissel.shopify-liquid",
        "editor.formatOnSave": false // Make this false
  },
  "[liquid-css]": {
        "editor.defaultFormatter": "sissel.shopify-liquid",
        "editor.formatOnSave": false // Make this false
  },
  "[liquid-javascript]": {
        "editor.defaultFormatter": "sissel.shopify-liquid",
        "editor.formatOnSave": false // Make this false
  }
}

[panoply]

Also, {% style %} tags are only partially supported. You will need to digest and understand the formatting rules to apply in order to get you preferred results.

[Avnsx]

same issue here with formatting, even if i do the smallest 1 letter change and save my theme.liquid it messes up the entire formatting and bricks my website. for self producing you can use your extension to overwrite theme.liquid from the shopify theme called "refresh" it instantly bricks it

[Avnsx]

disable formatting for liquid-css language in you vscode workspace settings

then what is the point of using your extension in first place, if i disable one of the most important features i installed it for?? 🤣

[panoply]

@Avnsx this is likely due to the infusion of CSS together with Liquid code. You can either contribute to the conversation in a productive manner or simply don't use the extension. If you can do better, please go right ahead and PR.

[panoply]

@jackchristian1995 Can you send me the code sample?

FWIW if you can run the CSS within code blocks, eg:

{% style %}
 :root {
    --max-content-width: {{ settings.max_content_width }}%;
 }
{% endstyle %}

In the Æsthetic Playground and then press cmd+s it would help me understand issues occuring for the 4.0.0 release:

https://æsthetic.dev/playground/

[panoply]

Solving in #138 – Shiping tomorrow.