Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Negative values in long CSS properties will cause incorrect wrapping #4604

@tlaak

Description

@tlaak

Negative values in e.g. CSS backgrounds seem to cause some weird behaviour with the wrapping. Are they perhaps ignored?

Prettier 1.13.2
Playground link

--parser css

Input:

.this-will-not-wrap {
  background: transparent url(/long/path/to/dummy-image.svg) -1000px center no-repeat;
}

.this-will-wrap-correctly {
  background: transparent url(/long/path/to/dummy-image.svg) 1000px center no-repeat;
}

.this-will-also-wrap-but-incorrectly {
  background: transparent url(/even/longer/path/to/dummy-image.svg) -1000px center no-repeat;
}

Output:

.this-will-not-wrap {
  background: transparent url(/long/path/to/dummy-image.svg) -1000px center no-repeat;
}

.this-will-wrap-correctly {
  background: transparent url(/long/path/to/dummy-image.svg) 1000px center
    no-repeat;
}

.this-will-also-wrap-but-incorrectly {
  background: transparent url(/even/longer/path/to/dummy-image.svg) -1000px center
    no-repeat;
}

Expected behavior:

.this-will-not-wrap {
  background: transparent url(/long/path/to/dummy-image.svg) -1000px center 
    no-repeat;
}

.this-will-wrap {
  background: transparent url(/long/path/to/dummy-image.svg) 1000px center
    no-repeat;
}

.this-will-also-wrap-but-incorrectly {
  background: transparent url(/even/longer/path/to/dummy-image.svg) -1000px 
    center no-repeat;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions