0

Using the following postcss plugins:

  • postcss-cssnext
  • postcss-nested
  • postcss-color-function

I constantly hit the following error, when using the following color function.

Unable to parse color from string "l(-20%)"

styles.css

@import 'variables.css';
//          ^-- contains: --blue: #3892e0;

& a {
    color: color(var(--blue), l(-20%));
    &:hover {
        color: color(var(--blue), l(0%));
    }
}

Webpack 2 snippet

{
    loader: 'postcss-loader',
    options: {
        plugins: [
            cssImport({ path: './src' }),
            cssnext({ browsers: ['last 2 versions'] }),
            colorFunction(),
            nested(),
        ],
    }
}
Chris
  • 54,599
  • 30
  • 149
  • 186
  • colorFunction is already included in cssnext. And cssnext also already include a draft nesting proposal syntax. – MoOx Feb 20 '17 at 15:07
  • Gotcha - to clarify - I can drop `nested()` and `colorFunction()` from the plugin lineup? It doesn't really impact the question/answer in this particular case, as the error message is still quite cryptic. Btw, nice work on CSSNext @MoOx – Chris Feb 20 '17 at 15:15
  • Obviously it's not an anwser, just a comment. Check out what is included http://cssnext.io – MoOx Feb 20 '17 at 18:53
  • Groovy thanks @MoOx – Chris Feb 21 '17 at 00:36

1 Answers1

2

The error, although not descriptive, is indicating that the , is unneeded. This follows future CSS (proposed) spec, but can be a nasty habit to drop if you come from any other language.

The solution is simply to remove the ,'s:

& a {
    color: color(var(--blue) l(-20%));
    &:hover {
        color: color(var(--blue) l(0%));
    }
}
Chris
  • 54,599
  • 30
  • 149
  • 186