From eec3e82f48b999a93127edfaa051236250a9595a Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Mon, 28 Dec 2020 15:22:25 -0800
Subject: [PATCH] Fix absolute path in custom CSS url() calls (#9966)

At Facebook we have some custom pre-processor `-fb-url(/abs/path/)` that gets messed up as `-fb-url(/ abs/path)`  with the current version of prettier.

The parser has hardcoded logic to only parse as path things that use `url()` but not `-fb-url()` and it parses it as `division /` and `abs/path/`. Because we put a space after division, the bug is introduced.

I don't really know the impact of changing the parser, but on the printer side, it is straightforward to not add a space after `/` if it's the first element in a group. I can't think of any reason why you could write `(/ something` in CSS so I think it's a safe change.
---
 changelog_unreleased/css/9966.md              | 14 +++++++++++++
 src/language-css/printer-postcss.js           |  7 +++++++
 .../css/url/__snapshots__/jsfmt.spec.js.snap  | 21 +++++++++++++++++++
 tests/css/url/jsfmt.spec.js                   |  1 +
 tests/css/url/url.css                         |  4 ++++
 5 files changed, 47 insertions(+)
 create mode 100644 changelog_unreleased/css/9966.md
 create mode 100644 tests/css/url/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/css/url/jsfmt.spec.js
 create mode 100644 tests/css/url/url.css

diff --git a/changelog_unreleased/css/9966.md b/changelog_unreleased/css/9966.md
new file mode 100644
index 000000000..7bf310eda
--- /dev/null
+++ b/changelog_unreleased/css/9966.md
@@ -0,0 +1,14 @@
+#### Fix absolute path in custom CSS -custom-url() calls (#9966 by @vjeux)
+
+The CSS parser is parsing this as `["division", "absolute/path"]` instead of a single `"/absolute/path"` token unless you are in a `url()` call. Because we put space after division, it results in an incorrect path. The fix was to avoid printing a space if a division is the first token of a call, which hopefully should be safe.
+
+<!-- prettier-ignore -->
+```css
+-custom-url(/absolute/path)
+
+/* Prettier stable */
+-custom-url(/ absolute/path)
+
+/* Prettier master */
+-custom-url(/absolute/path)
+```
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index 48ebc028c..8386d0bb3 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -675,6 +675,13 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        // absolute paths are only parsed as one token if they are part of url(/abs/path) call
+        // but if you have custom -fb-url(/abs/path/) then it is parsed as "division /" and rest
+        // of the path. We don't want to put a space after that first division in this case.
+        if (!iPrevNode && isDivisionNode(iNode)) {
+          continue;
+        }
+
         // Print spaces before and after addition and subtraction math operators as is in `calc` function
         // due to the fact that it is not valid syntax
         // (i.e. `calc(1px+1px)`, `calc(1px+ 1px)`, `calc(1px +1px)`, `calc(1px + 1px)`)
diff --git a/tests/css/url/__snapshots__/jsfmt.spec.js.snap b/tests/css/url/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..ff0a122da
--- /dev/null
+++ b/tests/css/url/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`url.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+div {
+  background: url(/images/bg.png);
+  background: -fb-url(/images/bg.png);
+}
+
+=====================================output=====================================
+div {
+  background: url(/images/bg.png);
+  background: -fb-url(/images/bg.png);
+}
+
+================================================================================
+`;
diff --git a/tests/css/url/jsfmt.spec.js b/tests/css/url/jsfmt.spec.js
new file mode 100644
index 000000000..7d3726c81
--- /dev/null
+++ b/tests/css/url/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);
diff --git a/tests/css/url/url.css b/tests/css/url/url.css
new file mode 100644
index 000000000..db4e23140
--- /dev/null
+++ b/tests/css/url/url.css
@@ -0,0 +1,4 @@
+div {
+  background: url(/images/bg.png);
+  background: -fb-url(/images/bg.png);
+}