Skip to content

Modern CSS color function syntax #8154

@mathiasbynens

Description

@mathiasbynens

Prettier 2.0.5
Playground link

--parser css

Input:

foo {
  color: rgb(0, 128, 255);
  color: rgba(0, 128, 255, 0.5);
  color: hsl(198, 28%, 50%);
  color: hsla(198, 28%, 50%, 0.5);
  color: lab(56.29% 019.93 16.58 / 50%);
  color: lch(56.29% 19.86 236.62 / 50%);
  /* color(sRGB 0 0.50 1 / 50%); */
}

Output:

foo {
  color: rgb(0, 128, 255);
  color: rgba(0, 128, 255, 0.5);
  color: hsl(198, 28%, 50%);
  color: hsla(198, 28%, 50%, 0.5);
  color: lab(56.29% 019.93 16.58 / 50%);
  color: lch(56.29% 19.86 236.62 / 50%);
  /* color(sRGB 0 0.50 1 / 50%); */
}

Expected behavior:

foo {
  color: rgb(0 128 255);
  color: rgb(0 128 255 / 50%);
  color: hsl(198deg 28% 50%);
  color: hsl(198deg 28% 50% / 50%);
  color: lab(56.29% 019.93 16.58 / 50%);
  color: lch(56.29% 19.86 236.62deg / 50%);
  /* color(sRGB 0 0.50 1 / 50%); */
}

Notes:

  • in general, use the modern comma-free syntax instead of the legacy comma-based syntax ("legacy" is how the CSS Color spec refers to it)
  • use rgb() with the new syntax instead of rgba() (which is a legacy function)
  • use hsl() with the new syntax instead of hsla() (which is a legacy function)
  • consider being opinionated w.r.t. how to represent alpha values. IMHO using percentage notation is most readable, as it clarifies the range: e.g. 70% vs 0.7
  • consider being opinionated about using the deg suffix where applicable, e.g. in the first parameter for hsl() and the last non-alpha parameter for lch(). Again, because this clarifies that the range lies between 0-360.
  • the color() syntax is not yet supported by the parser, but that's a separate issue.
  • optionally, consider being opinionated about preferring #rrggbba/#rgba hex notation over rgb() notation, or the other way around

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:css/scss/lessIssues affecting CSS, Less or SCSSlocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.type:testsIssues about tests that are not correct, should be added, or similar

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions