color function: tint, shade, and contrast adjusters have unexpected results when used with alpha adjuster

[tylergaw]

This is an issue caused by an upstream dep. The original issue is in css-color-function. I have a PR and description of the problem here ianstormtaylor/css-color-function#26 and a PR open in the postcss plugin here: postcss/postcss-color-function#33

You can see the same issue in cssnext in the playground with the following (or similar) input:

div {
  color: color(red tint(50%));
  background-color: color(red a(20%) tint(50%));
}

the output for that is:

div {
  color: rgb(255, 128, 128);
  background-color: rgba(255, 230, 230, 0.6);
}

Notice in the output the rgba values don't match up with the rgb and the alpha value is not what was specified in the input.

The shade adjuster has the same issue.

contrast has a similar issue, but not quite the same. For it, it depends on the base color and the contrast amount. Sometimes it works as expected, other times it doesn't. Examples:

div {
  color: color(red a(20%) contrast(50%));
}

works as expected and produces:

div {
  color: rgba(255, 255, 255, 0.2);
}

but using a different base color with the same alpha and contrast values produces incorrect results:

div {
  color: color(blue a(20%) contrast(50%));
}

div {
  color: rgba(247, 247, 255, 0.6);
}

Again, this is documented in detail in ianstormtaylor/css-color-function#26

[jonathantneal]

@tylergaw, do you have this issue with postcss-color-mod-function? If so, this may be resolved by #445

[tylergaw]

Hey @jonathantneal been a while since I looked at this, but think I'm following. I haven't used postcss-color-mod-function yet, so can't speak to that. If you're updating postcss-next to use that instead of postcss-color-function then yeah, this issue is no longer valid.

[MoOx]

postcss-cssnext has been deprecated in favor of postcss-preset-env. Read more at https://moox.io/blog/deprecating-cssnext/