VSC prettier makes issue with the css selector formatting

Technical Q&A
1

Hi,

I’m using Visual Studio Code for an editor, developing a liquid file. Until now, prettier extension was working fine yet somehow suddenly it does formatting in a werid way to add spaces between colon like below (second line) and place the comma in the following row. Do you know what’s happening here and how I can fix it?

    @media screen and (min-width: 750px) {
      #Banner-{{ section.id }}: : before
      , #Banner-{{ section.id }}
      .banner__media::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }