Skip to content

Latest commit

 

History

History
637 lines (436 loc) · 19.5 KB

config.md

File metadata and controls

637 lines (436 loc) · 19.5 KB
Raw

Configuration

Options name in this page are in camel case. If you're using Malva as a Rust crate, please use snake case instead.

printWidth

The line width limitation that Malva should (but not must) avoid exceeding. Malva will try its best to keep line width less than this value, but it may exceed for some cases, for example, a very very long single word.

Default option is 80.

Example for 80

Playground

a {
  font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;
}

Example for 40

Playground

a {
  font:
    ultra-condensed small-caps 1.2em
    "Fira Sans",
    sans-serif;
}

useTabs

Specify use space or tab for indentation.

Default option is false.

Example for false

Playground

Example for true

Playground

indentWidth

Size of indentation. When enabled useTabs, this option may be disregarded, since only one tab will be inserted when indented once.

Default option is 2. This can't be zero.

Examples below will are based on useTabs: false.

Example for 2

Playground

a {
  text-decoration: none;
}

Example for 4

Playground

a {
    text-decoration: none;
}

lineBreak

Specify use \n (LF) or \r\n (CRLF) for line break.

Default option is "lf". Possible options are "lf" and "crlf".

Example for "lf"

Playground

Example for "crlf"

Playground

hexCase

Control the case of hex color values.

Possible options:

  • "lower": Hex color values will be converted to lower case.
  • "upper": Hex color values will be converted to upper case.
  • "ignore": Hex color values will be kept as-is.

Default option is "lower".

Example for "lower"

Playground

a {
  background: #fff;
}

Example for "upper"

Playground

a {
  background: #FFF;
}

Example for "ignore"

Playground

a {
  background: #FfF;
}

hexColorLength

Control the hex color values in short-hand form or long-hand form.

Possible options:

  • null: Hex color values will be kept as-is.
  • "short": Hex color values will be converted to short-hand form.
  • "long": Hex color values will be converted to long-hand form.

Default option is null.

Example for null

Playground

a {
  color: #fff;
  color: #ffffff;
}

Example for "short"

Playground

a {
  color: #fff;
}

Example for "long"

Playground

a {
  color: #ffffff;
}

quotes

Control the quotes of strings.

Possible options:

  • "alwaysDouble": Always use double quotes. Double quotes in strings will be escaped.
  • "alwaysSingle": Always use single quotes. Single quotes in strings will be escaped.
  • "preferDouble": Use double quotes as possible. However if there're double quotes in strings, quotes will be kept as-is.
  • "preferSingle": Use single quotes as possible. However if there're single quotes in strings, quotes will be kept as-is.

Default option is "alwaysDouble".

Example for "alwaysDouble"

Playground

::before {
  content: "";
  content: "\"";
}

Example for "alwaysSingle"

Playground

::before {
  content: '';
  content: '\'';
}

Example for "preferDouble"

Playground

::before {
  content: "";
  content: '"';
}

Example for "preferSingle"

Playground

::before {
  content: '';
  content: "'";
}

operatorLinebreak

Control whether line break should come before or after operators.

Possible options:

  • "before": Line break will come before operators.
  • "after": Line break will come after operators.

Default option is "after".

Example for "before"

Playground

a {
  width: calc(
    100%
      - (
      var(--sidebar-width) + var(--padding-horizontal) + var(--border-width)
        + var(--margin-horizontal)
        + var(--scrollbar-width)
    )
  );
}

Example for "after"

Playground

a {
  width: calc(
    100% -
      (
      var(--sidebar-width) + var(--padding-horizontal) + var(--border-width) +
        var(--margin-horizontal) +
        var(--scrollbar-width)
    )
  );
}

blockSelectorLinebreak

Control line break behavior after selector commas.

Possible options:

  • "always": Always insert line break after comma.
  • "consistent": If the whole selector can be put on a single line, there won't be line breaks; otherwise, there will be line breaks after each comma.
  • "wrap": Selector will be put on one line as possible. Once it exceeds printWidth, line break will be inserted where the code exceeds printWidth.

Default option is "consistent".

Example for "always"

Playground

h1,
h2,
h3,
h4,
h5,
h6 {}

Example for "consistent"

Playground

In this example, the first selector can be put on one line, but the second selector can't, so there will be line breaks.

h1, h2, h3, h4, h5, h6 {}
.very-very-very-very-very-very-long-selector,
.very-very-very-very-very-very-very-very-very-long-selector {}

Example for "wrap"

Playground

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video {}

omitNumberLeadingZero

Control whether omit leading zero before dot of numbers or not.

Default option is false.

Example for false

Playground

a {
  width: 0.1px;
}

Example for true

Playground

a {
  width: .1px;
}

trailingComma

Control whether trailing comma should be inserted or not.

This only affects Sass list, Sass map, Sass parameters/arguments list, Less list and Less parameters/arguments list. CSS functions won't respect this option.

Default option is false.

Example for false

Playground

$config: (
  themes: (
    mist: (header: #dcfac0, content: #00968b, footer: #85c79c),
    $spring: (header: #f4fac7, content: #c2454e, footer: #ffb158)
  )
);

Example for true

Playground

$config: (
  themes: (
    mist: (header: #dcfac0, content: #00968b, footer: #85c79c),
    $spring: (header: #f4fac7, content: #c2454e, footer: #ffb158),
  ),
);

padComments

Control whether whitespace should be inserted at the beginning and end of comments.

Though this option is set to false, comments contain leading or trailing whitespace will still be kept as-is.

Default option is false.

Example for false

Playground

/*comments*/
/* comments */

Example for true

Playground

/* comments */
/* comments */

linebreakInPseudoParens

Control whether line break should be inserted in pseudo class/element parens or not if current line is too long.

Default option is false.

Example for false

Playground

:where(#p0:checked ~ #play:checked ~ #c1:checked, #p1:checked
  ~ #play:checked
  ~ #c2:checked, #p2:checked ~ #play:checked ~ #cO:checked) {}

Example for true

Playground

:where(
  #p0:checked ~ #play:checked ~ #c1:checked,
    #p1:checked ~ #play:checked ~ #c2:checked,
    #p2:checked ~ #play:checked ~ #cO:checked
) {}

declarationOrder

Control the strategy of sorting CSS declarations (a.k.a. properties). If it's null, it won't sort CSS declarations.

Here're the strategies:

  • alphabetical: Order in a simple alphabetical manner from a - z. This strategy will also sort unknown properties.
  • smacss: Order from most important, flow affecting properties, to least important properties. Unknown properties won't be sorted.
  • concentric: Order properties applying outside the box model, moving inward to intrinsic changes. Unknown properties won't be sorted.

For more detail, please read https://github.com/Siilwyn/css-declaration-sorter.

Default option value is null.

Notes

  • For all strategies, custom properties (whose name starts with --) won't be sorted.
  • It will only sort adjacent CSS declarations. For example:
div {
  width: 0;
  height: 0;
  span {}
  min-width: 0;
  min-height: 0;
}

Those declarations above the span {} and those declarations below the span {} will be sorted separately.

Example for "alphabetical"

Playground

div {
  display: flex;
  height: 0;
  width: 0;
}

Example for "smacss"

Playground

div {
  display: flex;
  width: 0;
  height: 0;
}

Example for "concentric"

Playground

div {
  display: flex;
  width: 0;
  height: 0;
}

singleLineBlockThreshold

Control the threshold value for putting block on a single line. If the number of statements in a block is less than or equal to this value, the block will be put on a single line as possible, but when the code can't fit on single line, it will still break into multiple lines.

This is especially useful for increasing readability when writing atomic CSS. For example:

.border-0 { border-width: 0px; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }

Default option value is null which means always break into multiple lines. The option value can be an integer which is greater than or equal to 0.

Example for null

Playground

a {
  /* comment */
}

a {
  width: 0;
}

Example for 1

Playground

a { /* comment */ }

a { width: 0; }

a {
  width: 0;
  height: 0;
}

Example for 2

Playground

a { /* comment */ }

a { width: 0; }

a { width: 0; height: 0; }

keyframeSelectorNotation

Control whether to use percentage or keyword (from and to) notation as keyframe selectors.

Possible options:

  • null: Keyframe selector notation will be kept as-is.
  • "keyword": Use keyword notation. This only affects 0% and 100%. For other percentage values, they will be kept as-is.
  • "percentage": Use percentage notation.

Default option is null.

Example for null

Playground

@keyframes foo {
  from {}
  50% {}
  100% {}
}

Example for "keyword"

Playground

@keyframes foo {
  from {}
  50% {}
  to {}
}

Example for "percentage"

Playground

@keyframes foo {
  0% {}
  50% {}
  100% {}
}

ignoreCommentDirective

Text directive for ignoring formatting specific statement.

Default is "malva-ignore".

Example

Playground

/* malva-ignore */
a,b{
  width  :  0;
}