Description
This new rule helps tame CSS code and allows for a persistent style across your project and be very helpful in cases where you are infusing Liquid into style language and the rule has been introduced for such situations. While I personally consider this a lazy, elementary and novice tactic, It's not uncommon for Liquid to be infused with CSS and Shopify actually advocates such a practice. It is apparent that folks regularly employ the approach in their projects, especially when CSS values are pushing wrap limits. If you are not infusing Liquid into your styles, then this option while perfectly fine to use, it's generally frowned upon, however if your code style tastes prefer this, nothing would stop you from leveraging it.
This is a style exposed option and provides 3 style choices. The option will indent CSS selector property values onto newlines in CSS, SCSS or LESS languages. The optional is particularly helpful when Liquid tags are used as property values as in most cases CSS property value lengths will rarely exceed wraps.
Goals
The goals of this beautification option is to elegantly apply a consistent code style in CSS, SCSS or LESS languages. The rule places property values onto new lines and while not a common practice, it can be exceptionally helpful for cases where Liquid tokens use long naming conventions or you are infusing Liquid conditions, both situations are common in Shopify themes. As aforementioned, this option is not specific to Liquid infused styles, it can be used in styles that do not contain any liquid too.
Context
This option requires refactors only minor augmentation to be applied in the style beautification process. When a user defined wrap
context is imperative and the logic for this is handled in lexical scopes. If the user has defined wrap
but has not provided a word wrap
limit then the rule will fallback to preserve
. Both the preserve
and collapse
styles can also be supported with not too much complexity and heavy lifting.
Ruleset
The option will provide multiple beautification style choices. The initial rollout will include the following:
Definition
The option is set to preserve
by default and made available to style
rules. It can be defined as followed:
prettify.options({
wrap: 80, // Define a wrap limit if using wrap as forceValue beautification style
style: {
forceValue: 'preserve' | 'collapse' | 'wrap'
}
})
Preserve (default)
The below examples showcases how the default preserve
style will behave. Notice how there is no difference between before and after formatting. The structure is left intact.
Before
:root {
--media-padding: {{- settings.media_padding }}px
--font-body-family: {{- settings.type_body_font.family }}, {{- settings.type_body_font.fallback_families }};
--font-body-weight-bold: {{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
}
.selector {
color: rgb(211, 211, 211);
font-size: {{- settings.type_body_font.size | plus: 5 | at_most: 30 }};
font-weight: {{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
font-family: {{- settings.prop | default: settings.type_body_font.family }};
}
After
:root {
--media-padding: {{- settings.media_padding }}px
--font-body-family: {{- settings.type_body_font.family }}, {{- settings.type_body_font.fallback_families }};
--font-body-weight-bold: {{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
}
.selector {
color: rgb(211, 211, 211);
font-size: {{- settings.type_body_font.size | plus: 5 | at_most: 30 }};
font-weight: {{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
font-family: {{- settings.prop | default: settings.type_body_font.family }};
}
Collapse
The collapse
option is ideal and recommended when you are infusing Liquid into styles. This is exceptionally helpful if you are a heathen that inlines styles within a <style>
embedded tag and sprinkles Liquid code within.
Notice how before formatting all selector property values are expressed inline, but after formatting they will output onto new lines. Another important takeaway here is the white space dash (trim) delimiters applied to Liquid tokens. When using this style choice with correct
enabled, Prettify will reason with the input and apply the space trims where necessary, cool heh?
Before
:root {
--media-padding: {{ settings.media_padding }}px
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-weight-bold: {{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
}
.selector {
color: rgb(211, 211, 211);
font-size: {% if some_condition %} {{ settings.font_small }}px{% else %} {{ settings.font_large }}px{% endif %};
font-family: {{ something.prop | filter: 'foo' | default: settings.type_body_font.family }};
background: #ffffff;
}
After
:root {
--media-padding:
{{- settings.media_padding }}px
--font-body-family:
{{- settings.type_body_font.family }},
{{- settings.type_body_font.fallback_families }};
--font-body-weight-bold:
{{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
}
.selector {
color:
rgb(211, 211, 211);
font-size:
{{- settings.type_body_font.size | plus: 5 | at_most: 30 }};
font-weight:
{{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
font-family:
{{- settings.prop | default: settings.type_body_font.family }};
background:
#ffffff;
}
Wrap
The wrap
style choice requires you to define a word wrap
limit in the global options. This style choice will only apply new line indentation on values which exceed the wrap limit. Notice how only a couple of values in the before and after examples are output to new lines. This option will rarely newline pure style selector property values given the tiny length of the values but helpful when you need to new line large values, typical of Liquid tags.
Before
:root {
--media-padding: {{ settings.media_padding }}px
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-weight-bold: {{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
}
.selector {
color: rgb(211, 211, 211);
font-size: {% if some_condition %} {{ settings.font_small }}px{% else %} {{ settings.font_large }}px{% endif %};
font-family: {{ something.prop | filter: 'foo' | default: settings.type_body_font.family }};
}
After
:root {
--media-padding: {{- settings.media_padding }}px
--font-body-family:
{{- settings.type_body_font.family }},
{{- settings.type_body_font.fallback_families }};
--font-body-weight-bold:
{{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
}
.selector {
color: rgb(211, 211, 211);
font-size: {{- settings.type_body_font.size | plus: 5 | at_most: 30 }};
font-weight:
{{- settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
font-family:
{{- settings.prop | default: settings.type_body_font.family }};
}
Conditionals
In situations where you conditionally output selector property values, the control structures will behave the same way as output structures. Indentations are applied in the expressions. Below is an example of beautified conditional values.
.selector {
color: rgb(211, 211, 211);
font-size:
{%- if some_condition -%}
{{- settings.font_small }}px
{%- else -%}
{{- settings.font_large }}px
{%- endif %};
}