Formatter isn't handling {% style %} well

[james0r]

Snippet pulled from Shopify/Dawn theme.

Before:

{% style %}
     {{ settings.type_body_font | font_face: font_display: 'swap' }}
     {{ body_font_bold | font_face: font_display: 'swap' }}
     {{ body_font_italic | font_face: font_display: 'swap' }}
     {{ body_font_bold_italic | font_face: font_display: 'swap' }}
     {{ settings.type_header_font | font_face: font_display: 'swap' }}

     :root {
       --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
       --font-body-style: {{ settings.type_body_font.style }};
       --font-body-weight: {{ settings.type_body_font.weight }};

       --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
       --font-heading-style: {{ settings.type_header_font.style }};
       --font-heading-weight: {{ settings.type_header_font.weight }};

       --color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
       --color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
       --color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
       --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
       --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
       --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
       --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
       --payment-terms-background-color: {{ settings.colors_background_1 }};
     }

     *,
     *::before,
     *::after {
       box-sizing: inherit;
     }

     html {
       box-sizing: border-box;
       font-size: 62.5%;
       height: 100%;
     }

     body {
       display: grid;
       grid-template-rows: auto auto 1fr auto;
       grid-template-columns: 100%;
       min-height: 100%;
       margin: 0;
       font-size: 1.5rem;
       letter-spacing: 0.06rem;
       line-height: 1.8;
       font-family: var(--font-body-family);
       font-style: var(--font-body-style);
       font-weight: var(--font-body-weight);
     }

     @media screen and (min-width: 750px) {
       body {
         font-size: 1.6rem;
       }
     }
   {% endstyle %}

After document formatting:

{% style %}

   {{settings.type_body_font | font_face: font_display: 'swap'}}{{body_font_bold | font_face: font_display: 'swap'}}{{body_font_italic | font_face: font_display: 'swap'}}{{body_font_bold_italic | font_face: font_display: 'swap'}}{{settings.type_header_font | font_face: font_display: 'swap'}}:root {
     --font-body-family: {{settings.type_body_font.family}}, {{settings.type_body_font.fallback_families}};
     --font-body-style: {{settings.type_body_font.style}};
     --font-body-weight: {{settings.type_body_font.weight}};

     --font-heading-family: {{settings.type_header_font.family}}, {{settings.type_header_font.fallback_families}};
     --font-heading-style: {{settings.type_header_font.style}};
     --font-heading-weight: {{settings.type_header_font.weight}};

     --color-base-text: {{settings.colors_text.red}}, {{settings.colors_text.green}}, {{settings.colors_text.blue}};
     --color-base-background-1: {{settings.colors_background_1.red}}, {{settings.colors_background_1.green}}, {{settings.colors_background_1.blue}};
     --color-base-background-2: {{settings.colors_background_2.red}}, {{settings.colors_background_2.green}}, {{settings.colors_background_2.blue}};
     --color-base-solid-button-labels: {{settings.colors_solid_button_labels.red}}, {{settings.colors_solid_button_labels.green}}, {{settings.colors_solid_button_labels.blue}};
     --color-base-outline-button-labels: {{settings.colors_outline_button_labels.red}}, {{settings.colors_outline_button_labels.green}}, {{settings.colors_outline_button_labels.blue}};
     --color-base-accent-1: {{settings.colors_accent_1.red}}, {{settings.colors_accent_1.green}}, {{settings.colors_accent_1.blue}};
     --color-base-accent-2: {{settings.colors_accent_2.red}}, {{settings.colors_accent_2.green}}, {{settings.colors_accent_2.blue}};
     --payment-terms-background-color: {{settings.colors_background_1}};
   }

   *,
   *::before,
   *::after {
     box-sizing: inherit;
   }

   html {
     box-sizing: border-box;
     font-size: 62.5%;
     height: 100%;
   }

   body {
     display: grid;
     grid-template-rows: auto auto 1fr auto;
     grid-template-columns: 100%;
     min-height: 100%;
     margin: 0;
     font-size: 1.5rem;
     letter-spacing: 0.06rem;
     line-height: 1.8;
     font-family: var(--font-body-family);
     font-style: var(--font-body-style);
     font-weight: var(--font-body-weight);
   }

   @media screen and(min-width: 750px) {
     body {
       font-size: 1.6rem;
     }
   }

   {% endstyle %}

[panoply]

Hey James,

The bad news is, this occurs because the current version does not support Liquid contained within CSS.

The good news is, its fixed in Liquify. So Liquid contained within CSS, SCSS and LESS will all be formatted correctly, so you can infuse all these languages together, receive linting and validations when code might be incorrect. As an added bonus you will get automatic css code completions within both HTML <style> and Shopify variation Liquid tags {% style %}.

Here is a preview:

Screen.Recording.2021-07-28.at.14.17.50.mov

[panoply]

🚢 Shipped v3.0.0