prettier: CSS Multiline declaration should not be on the same line as the property

Prettier 1.17.0 Playground link

--parser scss

Input:

@font-face {
  @each $format in $formats {
    @if $format == local {
      $format-local: local(if($suffix == "Regular", "#{$name}", "#{$name $suffix}")), local("#{$full-name}");
    } @else {
      $format-url: url("#{$path}/#{$file-name}.#{$format}") format("#{$format}");
      $format-src: append($format-src, $format-url, comma);
    }
  }
}

.class {
  background: #eee linear-gradient(100deg, $color-theme 40%, adjust-color($color-theme, $lightness: -4%) 70%, adjust-color($color-theme, $lightness: -9%)) center/cover no-repeat;
}

Output:

@font-face {
  @each $format in $formats {
    @if $format == local {
      $format-local: local(
          if($suffix == "Regular", "#{$name}", "#{$name $suffix}")
        ),
        local("#{$full-name}");
    } @else {
      $format-url: url("#{$path}/#{$file-name}.#{$format}")
        format("#{$format}");
      $format-src: append($format-src, $format-url, comma);
    }
  }
}

.class {
  background: #eee
    linear-gradient(
      100deg,
      $color-theme 40%,
      adjust-color($color-theme, $lightness: -4%) 70%,
      adjust-color($color-theme, $lightness: -9%)
    )
    center/cover no-repeat;
}

Expected behavior:

The first value should not be on the same line as the property. This is also the default behavior with stylelint-config-recommended. Which follows the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google’s CSS Style Guide, Airbnb’s Styleguide, and @mdo’s Code Guide.

The stylelint rule affected by this.

@font-face {
  @each $format in $formats {
    @if $format == local {
      $format-local:
        local(if($suffix == "Regular", "#{$name}", "#{$name $suffix}")),
        local("#{$full-name}");
    } @else {
      $format-url:
        url("#{$path}/#{$file-name}.#{$format}")
        format("#{$format}");
      $format-src: append($format-src, $format-url, comma);
    }
  }
}

.class {
  background:
    #eee
    linear-gradient(
      100deg,
      $color-theme 40%,
      adjust-color($color-theme, $lightness: -4%) 70%,
      adjust-color($color-theme, $lightness: -9%)
    )
    center/cover
    no-repeat;
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 20 (11 by maintainers)

Most upvoted comments

I’d say better to open a new issue instead of this.

thorn0 on Nov 19, 2019

The issue is not about tools and style guides. What @GrimLink wants sounds reasonable to me:

Prettier 1.19.1 Playground link

--parser css
--print-width 60

Input:

.class {
  background:
    #eee
    linear-gradient(100deg, black 40%, yellow 70%, white)
    center/cover
    no-repeat;
}

Output:

.class {
  background: #eee
    linear-gradient(100deg, black 40%, yellow 70%, white)
    center/cover no-repeat;
}

Requested:

.class {
  background: 
    #eee
    linear-gradient(100deg, black 40%, yellow 70%, white)
    center/cover no-repeat;
}

thorn0 on Nov 19, 2019

@JounQin that is not the issue. The way prettier formats multiline css properties is. Please read issue text -> https://github.com/prettier/prettier/issues/6986#issue-524003880 before giving me an answer like this.

GrimLink on Nov 19, 2019

@evilebottnawi again it’s for multiline properties So the second rule (always-multi-line) not the first rule!

First of the first example is also not used by styleguides.

a {
  box-shadow:
    0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, 0.8);
}

GrimLink on Nov 18, 2019