Prettier format url path with number incorrectly

[jasonxia23]

Prettier 1.15.3
Playground link

--parser css

Input:

body {
  background: url(http://123.example.com);
}

Output:

body {
  background: url(http://123example.com);
}

Expected behavior:

[ikatyang]

As a workaround, you could use quoted url for now:

Prettier 1.15.3
Playground link

--parser css

Input:

body {
  background: url('http://123.example.com');
}

Output:

body {
  background: url("http://123.example.com");
}

[jasonxia23]

Maybe I can help to fix this. Could you give me some advise.

[lydell]

As far as I remember, the issue is that the parser doesn’t treat the whole url(...) thing as one token. Instead, it thinks it’s a general function and splits it into url, (, http, :, /, /, ..., ). So all sorts of weird stuff can happen.

[jasonxia23]

I have spent some time on parser-postcss.js and printer-postcss.js. If I am not making a mistake, tokenizing happens in parser-postcss.js, right? Will it lead to other errors if I just take url(...) as one token. @ikatyang

[ikatyang]

cc @evilebottnawi

[alexander-akait]

Bug in parser, postcss-values-parser broken with url (when it is not "string") #5654 (comment) and i am banned in postcss-values-parser and i can't send a PR (owner don't love me 😕 ). Maybe we need switch on postcss-value-parser (we use this in stylelint, webpack loaders/plugins and other repos) and it is works as expected and no problems, but it is require rewrite many logic. I am planned this on next year (January/February).

[jasonxia23]

Seems to be complicated. Would be glad if I can do some help.

[alexander-akait]

@jasonxia23 I can't, i am banned, sorry, this guys violated Code of Conduct many times and i don't want use his code and work with him also, so we will switch on better and right solution like postcss-value-parser in next year as i said above, anyway feel free to fix this problem on prettier side, you can check isValidUrl here https://github.com/prettier/prettier/blob/master/src/language-css/parser-postcss.js#L31 (you can get logic ) and return value-url node and implement how we should print value-url (maybe better name)

[jasonxia23]

@evilebottnawi Maybe parser should not parse 123.example.com into 123., example, . and com, which cause the issue directly.

[lydell]

Yes, unquoted urls are a special case in the tokenization: https://www.w3.org/TR/css-syntax-3/#url-token-diagram

[shellscape]

@lydell @jasonxia23 evilbotnawi is banned from my repos because he has violated the code of conduct in my repos repeatedly, is generally a toxic individual to work with, and (as evidenced by his comments here) likes to repeat lies about me on various social media sites.

I'm more than happy to help to resolve this bug, but if the intention of the project is to just use a different module soon anyways, I'll keep my focus on the new version rewrite instead. I won't be offended at all I promise, I just have limited time because we'll be welcoming a child soon 😄

[shellscape]

I have published v3.0.0-beta.2 of postcss-values-parser. There are a lot of breaking changes as the entire parser was rewritten, but this should resolve most of the issues in Prettier associated with the module. If you all would like assistance upgrading, please let me know, I'm happy to help.