postcss-values-parser hangs indefinitely

[mjhenkes]

• Operating System (or Browser): MacOS 10.13.6
• Node Version: 10
• postcss-values-parser Version: 3.2.0

How Do We Reproduce?

You can reproduce the issue with the following script:

const { parse } = require('postcss-values-parser');

const output = parse('derp-face(#0366d6)');

console.log('Output:', output);

How we got into this situation was that we had an undefined (bad) mixin that didn't get resolved and got passed to the values parser. Previously in version 3.1.1 the bad mixin was just ignored, now postcss-values-parser and by relation, webpack hangs indefinitely. We've fixed the bad mixin on our side but some other teams we work with have started seeing the issue. I don't think hanging indefinitely was intended even if this is unexpected css. At a minimum we should probably throw an error if this string is not ok.

Of note: this only breaks if there is a dash in the unresolved mixin.

Expected Behavior

The previous output of the function was:

Root {
  raws: { semicolon: false, after: '' },
  type: 'root',
  nodes:
   [ Func {
       raws: [Object],
       name: 'derp-face',
       type: 'func',
       isColor: false,
       isVar: false,
       nodes: [Array],
       parent: [Circular],
       source: [Object],
       params: '(#0366d6)' } ],
  source:
   { input:
      Input { css: 'derp-face(#0366d6)', hasBOM: false, id: '<input css 1>' },
     start: { line: 1, column: 1 } },
  toString: [Function: bound toString] }

Actual Behavior

The parser hangs indefinitely.

[shellscape]

Thanks for reporting. Are you able to downgrade to the previous version to see if it's a regression that was introduced?

[mjhenkes]

Yes, downgrading to v3.1.1 does not hang and gives the output I posted above.

[processwired]

I'm experiencing the issue as well. postcss-values-parser v3.2.0 as a depency to postcss-custom-properties leads to infinite hangs as soon as a property is set by postcss-custom-properties to be used in postcss-inline-svg. For example this does not work with v3.2.0:

:root {
    --color-white: #fff;
}

.icon {
    background-image: svg-load('icon.svg', fill: var(--color-white));
}

The same works with postcss-values-parser 3.1.1 when explicitly set to package.json:

"dependencies": {
       "postcss-values-parser": "3.1.1",
}

[shellscape]

Happy to review a PR that resolves this.

[mjhenkes]

@shellscape Thanks for the fix!