Error thrown on trailing !important following Function

[jwilsson]

Originally reported at lesshint/lesshint#367

• Node Version: 6.10.3
• NPM Version: 4.5.0
• postcss-values-parser Version: 1.2.1

This issue is regarding a problem with:

• Standard CSS
• LESS
• SCSS
• SASS

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.

.blah(fade(rgb(0, 0, 0), 10%)) !important;

/Users/jwilsson/value-test/node_modules/postcss-values-parser/lib/parser.js:114
    throw new ParserError(message + ` at line: ${token[2]}, column ${token[3]}`);
    ^

ParserError: Expected opening parenthesis at line: 1, column 30
    at Parser.error (/Users/jwilsson/value-test/node_modules/postcss-values-parser/lib/parser.js:114:11)
    at Parser.parenClose (/Users/jwilsson/value-test/node_modules/postcss-values-parser/lib/parser.js:355:12)
    at Parser.parseTokens (/Users/jwilsson/value-test/node_modules/postcss-values-parser/lib/parser.js:222:14)
    at Parser.loop (/Users/jwilsson/value-test/node_modules/postcss-values-parser/lib/parser.js:119:12)
    at Parser.parse (/Users/jwilsson/value-test/node_modules/postcss-values-parser/lib/parser.js:48:17)
    at Object.<anonymous> (/Users/jwilsson/value-test/index.js:2:66)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Expected Behavior

Not throw an error and return a AST.

Actual Behavior

It throws the above error.

How can we reproduce the behavior?

Create and run a .js-file with this code in it:

const parser = require('postcss-values-parser');
const ast = parser('.blah(fade(rgb(0, 0, 0), 10%)) !important;').parse();

[shellscape]

Shouldn't that be executed with loose: true?

And we've got this test: https://github.com/shellscape/postcss-values-parser/blob/master/test/paren.js#L105, which has more paren groupings than the failing case there, so I'm not sure why that's happening.

[shellscape]

Some quick triage shows that this isn't a paren issue at all and has nothing to do with nested parens. The parser doesn't know how to handle the trailing !important. Removing that results in a successful parse.

[shellscape]

Further testing reveals that there's a flaw in nested Function parsing.

Parsing .blah(fade(rgb())) will result in:

FunctionNode {
  raws: { before: '', after: '' },
  value: 'fade',
  source: { start: { line: 1, column: 7 }, end: { line: 1, column: 10 } },
  sourceIndex: 6,
  nodes: 
   [ Parenthesis {
       raws: [Object],
       value: '(',
       source: [Object],
       sourceIndex: 10,
       type: 'paren',
       parenType: '',
       parent: [Circular] },
     FunctionNode {
       raws: [Object],
       value: 'rgb',
       source: [Object],
       sourceIndex: 11,
       nodes: [Object],
       type: 'func',
       unbalanced: 0,
       parent: [Circular] },
     Parenthesis {
       raws: [Object],
       value: ')',
       source: [Object],
       sourceIndex: 16,
       type: 'paren',
       parenType: '',
       parent: [Circular] },
     Parenthesis {
       raws: [Object],
       value: ')',
       source: [Object],
       sourceIndex: 17,
       type: 'paren',
       parenType: '',
       parent: [Circular] } ],
  type: 'func',
  unbalanced: 1,
  ...

rgbs parens should be part of it's nodes collection, and a closing paren is sneaking out into .fade.

So, looks like there are multiple fixes needed for this to start working right.

[jwilsson]

Cool, thanks for taking a closer look!

It should be parsed with loose: true, yes. I just forgot that one. But I'll take a closer look later.

[shellscape]

@jwilsson give https://github.com/shellscape/postcss-values-parser/tree/fix-nested-funcs a try

[jwilsson]

@shellscape Works great! Thanks for the quick fix!