New Rule: attributeCasing

[panoply]

Description

This directly pertains to #24 and covers the introduction of a new markup beautification rule (option). I will not bring support for uppercase structures, that is a code smell and frowned upon. Only preservation and/or conversion for lowercase will be provided.

Goals

The goal with this rule is allow users to choose how they would like Prettify to handle their input when it comes to attribute casing. In some projects, folks might like a strict lowercase enforcement be applied whereas other project might require the complete opposite, ie: case preservation. This new rule will not effect Liquid attributes used in markup tokens, it only relates to HTML attributes.

Ruleset

This option will be a multiselect type which defaults to preserved:

Options	Description
preserve	All tag attribute keys/values are preserved (default)
lowercase	All tag attribute keys/values are converted to lowercase
lowercase-keys	Only attribute keys are converted to lowercase
lowercase-values	Only attribute values are converted to lowercase

Definition

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

prettify.options({
  markup: {
    attributeCasing: 'preserve' | 'lowercase' | 'lowercase-keys' | 'lowercase-values'
  }
})

Examples

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

Preserve (default)

The preserve option will leave HTML attribute casing intact.

Before Formatting

<div class="HelloWorld" data-VaLuE="eXampLE"></div>

After Formatting

<div class="HelloWorld" data-VaLuE="eXampLE"></div>

Lowercase

The lowercase option will convert all attribute keys and values to lowercase

Before Formatting

<div class="HelloWorld" data-VaLuE="eXampLE"></div>

After Formatting

<div class="helloworld" data-value="example"></div>

Lowercase Keys

The lowercase-keys option will convert all attribute keys to lowercase

Before Formatting

<div class="HelloWorld" data-VaLuE="eXampLE"></div>

After Formatting

<div class="HelloWorld" data-value="eXampLE"></div>

Lowercase Values

The lowercase-keys option will convert all attribute keys to lowercase

Before Formatting

<div class="HelloWorld" data-VaLuE="eXampLE"></div>

After Formatting

<div class="helloworld" data-VaLuE="example"></div>

[panoply]

Update

Applying the logic for this beautification rule. The finalized schema and accepted options are as follows:

Options	Description
preserve	All tag attribute keys/values are preserved (default)
lowercase	All tag attribute keys/values are converted to lowercase
lowercase-name	Only attribute names are converted to lowercase
lowercase-value	Only attribute values are converted to lowercase

Finalised Changes

The lowercase-name will be used instead of lowercase-keys and lowercase-value opposed to lowercase-values. There should be a clear separation of naming conventions here. When describing a HTML attribute, it is more common to refer to data-attr as a name instead of key. Relating to the removal of pluralised values this is merely a matter of preference.

[panoply]

Finalised Shipment

This will conclude the new ruleset of attributeCasing. The formatting option supports Liquid contained html attributes and HTML attributes. Below is the finalised examples:

Input

<div {% if %}DATA-{{ x }}-FOO{% else %}ID="BAR"{% endif %}></div>

Output - preserve

<div CLASS="XX" {% if %}DATA-{{ x }}-FOO{% else %}ID="BAR"{% endif %}></div>

Output - lowercase

<div class="xx" {% if %}data-{{ x }}-foo{% else %}id="bar"{% endif %}></div>

Output - lowercase-name

<div class="XX" {% if %}data-{{ x }}-foo{% else %}id="BAR"{% endif %}></div>

Output - lowercase-value

<div CLASS="xx" {% if %}DATA-{{ x }}-FOO{% else %}ID="bar"{% endif %}></div>

[panoply]

Solved in 0.3.0.beta