ParserError: url() function containing function

[vjeux]

• Node Version: 4.3.2
• NPM Version: 3.10.10
• postcss-values-parser Version: 1.2.2

This issue is regarding a problem with:

• Standard CSS

url(var(audience-network-checkbox-image)) center no-repeat

test.css: SyntaxError: ParserError: Expected opening parenthesis at line: 1, column 41 (104:54)
  102 |
  103 | .audienceNetworkFilter/checkboxSelected .audienceNetworkFilter/checkbox {
> 104 |   background: url(var(audience-network-checkbox-image)) center no-repeat;
      |                                                       ^
  105 | }

Expected Behavior

Not to error on the )

Actual Behavior

Errors

How can we reproduce the behavior?

Just parse this block of code

[vjeux]

url(var(fbs-logo-icon-image-1x))

outputs

Error: Unbalanced parenthesis

[shellscape]

I'd highly recommend updating to at least Node 4.6.0. That's the minimum version supported at the moment.

As for the error, I'd have to look into parser.js.

[shellscape]

yeah here's the problem; for url(var(foo)) is parsing the contents of the url func as value: 'var(foo', and dropping the closing paren. I don't think the parser is anticipating url containing anything but a string/word value.

[vjeux]

Can we use a stack instead of a single value like in the first report I brought up?

[shellscape]

Normally I'd say yes, but the parser is explicitly treating anything within it as a whole value. And then there's this; https://www.w3.org/TR/CSS2/syndata.html#uri and https://www.w3.org/TR/CSS22/syndata.html#uri, which pretty much says that the var() in the url() is invalid.

I ran the following snippets through https://jigsaw.w3.org/css-validator/#validate_by_input+with_options and both failed:

.foo {
  background: url(var(bar));
}

--image: "a.png";

.foo {
  background: url(var(--image));
}

So what we've got here is input that isn't CSS3 compliant (and I'm pretty sure that var() is part of a draft at the moment). This falls into the loose area for the parser. It'll have to be updated to allow for functions within url() round about this line, for which the check should be conditional based upon the state of the loose config option.