New Rule: attributeValues

[panoply]

Description

In some situations controlling how markup attribute values are formatted can be beneficial, especially when working with Liquid. Though I personally consider attribute values to expressed in a strict manner, this option is likely helpful in a lot of situations. The attributeValues formatting option introduces support for exactly this. This ruleset allows users to take reign and control of HTML attributes values and in addition will gracefully handle contained Liquid tokens infused within.

Goals

This option needs to facilitate multiple beautification options which directly pertain to how attribute values should be formatted in Markup languages. The inherited behaviour of PrettyDiff and Sparser here is a little problematic and changes applied for this enhancement require various refactors. The main goal here is provide stable enough processing and output for typical coding styles whereas the edge cases and chaotic projects, like that seen in the utter debauchery that is Shopify Dawn, will likely need some patches in order to handle otherwise despicable code structures.

Context

Introducing this option requires intercepting the lexing records constructed by Sparser. Refactoring the attribute lexer and tokenization approach of the markup lexer is essential. The attribute values also need to be walked and temporary reference generated before logic is passed to the various handlers in PrettyDiff.

Ruleset

The option will provide multiple beautification style choices. The initial rollout will include the following:

• preserve
• strip
• collapse
• wrap

There is consideration and room for advancement here, so introducing template specific beautification choices is likely to incur in the pre-release version or very soon after but for now will not be supported.

• wrap-liquid
• collapse-inline-preserve

Definition

The option will be available to markup and can be defined as followed:

prettify.options({
  markup: {
    attributeValues: 'preserve' | 'strip' | 'collapse' | 'wrap'
  }
})

Examples

The below examples showcase how the different formatting styles will output attribute values.

Preserve (default)

The preserve option will leave HTML attribute values intact, preserving the input provided.

Before Formatting

<div class="one 
  two         three {% if x %} four {% else %} five {% endif %}      {{ some.object }} 
  six         seven"></div>

After Formatting

<div class="one 
  two         three {% if x %} four {% else %} five {% endif %}      {{ some.object }} 
  six         seven"></div>

Strip

The strip option will strip newlines and equally distribute spacing by removing extraneous whitespace between entries from values and replacing them with a single space character.

Before Formatting

<div class="one    two   three 
       {% if x %} four {% else %} five {% end if %} {{ some.object }}             six seven"></div>

After Formatting

<div class="one two three {% if x %}four{% else %}five{% end if %} {{ some.object }} six seven"></div>

Wrap

The wrap option will apply indentation to attribute values if wrap limit has been exceeded. This option respects the inner contents of Liquid tokens and will not augment such expressions if detected. Indentation is applied for each whitespace separated character in the value sequence.

Below we assume wrap has been exceeded.

Before Formatting

<div class="one two three {% if x %} four {% else %} five {% end if %} {{ some.object }} six seven"></div>

After Formatting

<div class="one 
           two 
           three 
           {% if x %} four {% else %} five {% endif %} 
           {{ some.object }} 
           six 
           seven"></div>

Collapse

The collapse option will apply indentation to all attribute values. This option does not respect the inner contents of Liquid tokens and will apply forced indentation for each whitespace separated character in the value structure and any Liquid token encountered, for example:

Before Formatting

<div class="one two three {% if x %} four {% else %} five {% end if %} {{ some.object }} six seven"></div>

After Formatting

<div class="one 
          two 
          three 
          {% if x %} 
          four 
          {% else %} 
          five 
          {% endif %} 
          {{ some.object }} 
          six 
          seven"></div>

[itszoose]

Please have a look at this issue, it's driving me crazy, I am using Alpine js and sometimes I need to write code in new lines.

[panoply]

@itszoose try and keep the issue to a single repository. Thanks