Repository: prettier/prettier (JavaScript)
Date: 2020-07-03 10:04:52+00:00
Task type: Bug Fix

Issue:
Less: Incorrect formatting of inline comment inside `selector()`
**Prettier pr-8545**
[Playground link](https://deploy-preview-8545--prettier.netlify.app/playground/#N4Igxg9gdgLgprEAuEABAzgVwA7YgJxnQAJ04AbOMGAgCgB0pjikAzCMTdAWgDcBLdPwBGlYgHpxxAFT0QAQzmMAlMWCNGAX0YgANCAjYY-aOmSh5+fBADuABUsIzKeeRvyAnmf3D88sADWcDAAytj+-FAA5sgw+Jhw+nAAtsJwACbpGQAy8tGY8lFwAGIEyfIwxtHICpg0eiAAFjDJ5ADqjfzw6OFgcCFOXfwCMB41YOjeIJFkhHZ+UeXIrK5k+gBW6AAeAEJ+gcEh8slw2ZFwy6uJIJtbIZFRlACKmBDwl+RrIOH4szWUkwa2HwkRgbX46RgjWQAA4AAz6YEQMhtPzYGrAuCzXgXfQAR1e8HmhmcCh4UDgGQyDXwcAJ-Fp80KSzYV30ZGS-Fi8WuQmiz0JF1Zn2uMHkwnBkOhSAATPo4vJ+OQHgBhCDJFkgLEAVgaXDgABVxc4ViL9LwEgBJKBZWAhMAgowAQRtIVGlA+ZE0miAA)
```sh
--parser less
```

**Input:**
```less
@supports selector(
  :focus-visible // *"a"
) {

}

```

**Output:**
```less
@supports selector(:focus-visible //   a) {
}

```

**Expected behavior:**

Print the right comment

--- 

Post by @thorn0 https://github.com/prettier/prettier/pull/8545#pullrequestreview-441790582
Possible solution https://github.com/prettier/prettier/pull/8545#issuecomment-653079204


Issue discussion:
I don't believe this is a bug.

In css, comments seem to not be allowed inside the selector(), see https://jsfiddle.net/5rtf16ak/12/
Less seems to also leave alone the statement when transpiling to css.
@boyenn CSS doesn't support `//` comments, but turns out Less indeed doesn't strip them inside `selector(...)` ([demo](https://jsbin.com/hewizek/3/edit?html,js,console)). Might be a bug in Less. I opened https://github.com/less/less.js/issues/3527.
Let's ignore the syntax, just try to bring `*` and quotes back?
@fisker Of course, it's better to bring them back, but I think we can ignore this issue for now. Neither Less nor SCSS supports this syntax, so it shouldn't break anyone's code. 

Solution patch:
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index 708b75c2bdcf..a594da50eadd 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -20,6 +20,7 @@ const {
     indent,
     dedent,
     ifBreak,
+    breakParent,
   },
   utils: { removeLines },
 } = require("../document");
@@ -501,6 +502,23 @@ function genericPrint(path, options, print) {
         return options.originalText.slice(start, end).trim();
       }
 
+      // Same reason above
+      const grandParent = path.getParentNode(1);
+      if (
+        parentNode.type === "value-paren_group" &&
+        grandParent &&
+        grandParent.type === "value-func" &&
+        grandParent.value === "selector"
+      ) {
+        const start = options.locStart(parentNode.open) + 1;
+        const end = options.locEnd(parentNode.close) - 1;
+        const selector = options.originalText.slice(start, end).trim();
+
+        return lastLineHasInlineComment(selector)
+          ? concat([breakParent, selector])
+          : selector;
+      }
+
       return node.value;
     }
     // postcss-values-parser


Test patch:
diff --git a/tests/less/function-selector/__snapshots__/jsfmt.spec.js.snap b/tests/less/function-selector/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..d3d590221b64
--- /dev/null
+++ b/tests/less/function-selector/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`selector.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@supports selector(
+:focus-visible // *"a"
+) {
+a{color:#f00
+}
+}
+
+=====================================output=====================================
+@supports selector(
+  :focus-visible // *"a"
+) {
+  a {
+    color: #f00;
+  }
+}
+
+================================================================================
+`;
diff --git a/tests/less/function-selector/jsfmt.spec.js b/tests/less/function-selector/jsfmt.spec.js
new file mode 100644
index 000000000000..73b809901fce
--- /dev/null
+++ b/tests/less/function-selector/jsfmt.spec.js
@@ -0,0 +1,1 @@
+run_spec(__dirname, ["less"]);
diff --git a/tests/less/function-selector/selector.less b/tests/less/function-selector/selector.less
new file mode 100644
index 000000000000..a66817b9da1c
--- /dev/null
+++ b/tests/less/function-selector/selector.less
@@ -0,0 +1,6 @@
+@supports selector(
+:focus-visible // *"a"
+) {
+a{color:#f00
+}
+}