Issue on color-mod()

[ai]

• Node Version: 10
• NPM Version: 6.4.1
• postcss-values-parser Version: 1.5.0

This issue is regarding a problem with:

• Standard CSS
• LESS
• SCSS
• SASS
• postcss-preset-env additional syntax

If you have a large amount of code to share which demonstrates the problem you're experiencing, please provide a link to your
repository rather than pasting code. Otherwise, please paste relevant short snippets below.

.foo {
  background: color-mod(var(--accent) s(+ 30%) l(+ 10%));
}

    ERROR in ./layout/pay-Pay.css (./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/src!./layout/pay-Pay.css)
    Module build failed (from ./node_modules/postcss-loader/src/index.js):
    ParserError: Syntax Error at line: 1, column 27
        at /home/ai/Dev/amplifr-front/layout/pay-Pay.css:18:5
        at Parser.error (/home/ai/Dev/amplifr-front/node_modules/postcss-values-parser/lib/parser.js:127:11)
        at Parser.operator (/home/ai/Dev/amplifr-front/node_modules/postcss-values-parser/lib/parser.js:183:18)
        at Parser.parseTokens (/home/ai/Dev/amplifr-front/node_modules/postcss-values-parser/lib/parser.js:245:14)
        at Parser.loop (/home/ai/Dev/amplifr-front/node_modules/postcss-values-parser/lib/parser.js:132:12)
        at Parser.parse (/home/ai/Dev/amplifr-front/node_modules/postcss-values-parser/lib/parser.js:51:17)
        at root.walkDecls.decl (/home/ai/Dev/amplifr-front/node_modules/postcss-custom-properties/index.cjs.js:191:51)
        at /home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:198:18
        at /home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:146:18
        at Rule.each (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:110:16)
        at Rule.walk (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:143:17)
        at /home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:156:24
        at Rule.each (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:110:16)
        at Rule.walk (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:143:17)
        at /home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:156:24
        at Root.each (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:110:16)
        at Root.walk (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:143:17)
        at Root.walkDecls (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:196:19)
        at transformProperties (/home/ai/Dev/amplifr-front/node_modules/postcss-custom-properties/index.cjs.js:188:8)
        at /home/ai/Dev/amplifr-front/node_modules/postcss-custom-properties/index.cjs.js:541:9
        at Generator.next (<anonymous>)
        at asyncGeneratorStep (/home/ai/Dev/amplifr-front/node_modules/postcss-custom-properties/index.cjs.js:12:24)
        at _next (/home/ai/Dev/amplifr-front/node_modules/postcss-custom-properties/index.cjs.js:34:9)

Expected Behavior

I understand that color-mod was not official CSS syntax. But right now it is the most popular way (the only way for most of the users) to work with color in pure PostCSS environment.

/cc @jonathantneal

[shellscape]

@ai I'm undertaking a rewrite using PostCSS' base tokenizer. tests are looking good so far, and the implementation appears to tokenize the value for this issue correctly. Will keep posted on the status of the rewrite.

[shellscape]

Happy to report that the offending css value passes in the next branch. I'll be releasing a beta of 3.0.0 later today. Thanks for reporting the issue. Cheers 🍻