parse error when blend with hsl()

[FourwingsY]

.test {
  color: color(hsl(210, 10%, 85%) blend(hsl(330, 50%, 70%) 50%));
}

Error message says: Unable to parse color from string "hsl(330," can get the bug here too: http://cssnext.io/playground/

[magicznyleszek]

I also have this problem (see https://github.com/MoOx/postcss-cssnext/issues/363). It seems that the blend function only works with simple color names (like red or rebeccapurple) and # but doesn't with rgb() or hsl()

[kopax]

I also hit the same issue.

[benweiser]

Same issue with Sass's lighten/darken functions

[Semigradsky]

#23 the same

[feimosi]

Is there any way to silence these messages? The function works correctly for me, just throws that error.

[mooreInteractive]

If anyone else finds this thread, I fixed it by re-ordering the postcss plugins(I'm using webpack setup).

For this to work and interpret a variable, it needs to come after the plugin that handles variables.

For my setup: Didn't work, showed "Unable to parse color from string" error:

plugins: () => [
    ...
    require('postcss-css-color-function'),
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-calc'),
    ...
]

WORKS, no error:

plugins: () => [
    ...
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-css-color-function'),
    require('postcss-calc'),
    ...
]