Repository: prettier/prettier (JavaScript)
Date: 2023-01-04 09:46:00+00:00
Task type: Bug Fix

Issue:
less format problem
**Prettier 2.3.2**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEA6MBDANmACgDwFkBLfYqACgEoACYAHShpoAEAzAVyjBmOgGckNAH4ADCp269o1Oo2bNIUfjBoATOP2IBzKAHViamAAsaAXhoBmABwAWAAzyFSlTQw8O2A0dMWArADsAGyOTAomxPzo2Hj45jSSPHyUAPq0DGEKNABOcDAc2UwpNABUbh5ehiY0APTqmjr6VaYA1DQA5AAO+O1OzAC+Tv1U1KKM-SAANCAQndLKyKAY2dkQAO64ywj8yCDYaxgAnjvTAEbZ7gDWeQDKne7k2sgw2Rxw03AAtqdwahpqABkMFBtJ5tHAAGIQbKfDAwXgg3YYDgwCBTEDGGCfLB6YzEeD8e5gOA3bb44gAN3xh12YH4JxA5H4cGyMFwF20sOQbGwzOmACt+PgAEIXMDXGA3DCfOAA8hwbm894gQX4G6PLBwACKHAg8EVWD5IHu2WZ2V2mvp6M62XIMG8JmQ1ns0xtEGZegunV2Ns0LIpCumAEddfB2bMdigMPwALRQOC-X7o3Ih4i5dkYTkYA1G5mfYjPV7KrQgzU6vUKpA8w3KmAYU4O4zIABM0xeGGIWEeAGEIJ8uShNH50RxmQAVeuR6tGilvACSUA0sBuYFtcwAgoubjBDpqc3B+v0gA)
<!-- prettier-ignore -->
```sh
--parser less
```

**Input:**
<!-- prettier-ignore -->
```less
.calcPxMixin() {
  @functions: ~`(function() {
    const designWidth = 3840
    const actualWidth = 5760
    this.calcPx = function(_) {
      return _ * actualWidth / designWidth + 'px'
    }
  })()`
}
```

**Output:**
<!-- prettier-ignore -->
```less
SyntaxError: CssSyntaxError: Unknown word (6:7)
  4 |     const actualWidth = 5760
  5 |     this.calcPx = function(_) {
> 6 |       return _ * actualWidth / designWidth + 'px'
    |       ^
  7 |     }
  8 |   })()`
  9 | }
```

**Expected behavior:**



Issue discussion:
The next branch seems fixed the parse error, but not formatting as JavaScript code.

**Prettier pr-9583**
[Playground link](https://deploy-preview-9583--prettier.netlify.app/playground/#N4Igxg9gdgLgprEAuEA6MBDANmACgDwFkBLfYqACgEoACYAHShpoAEAzAVyjBmOgGckNAH4ADCp269o1Oo2bNIUfjBoATOP2IBzKAHViamAAsaAXhoBmABwAWAAzyFSlTQw8O2A0dMWArADsAGyOTAomxPzo2Hj45jSSPHyUAPq0DGEKNABOcDAc2UwpNABUbh5ehiY0APTqmjr6VaYA1DQA5AAO+O1OzAC+Tv1U1KKM-SAANCAQndLKyKAY2dkQAO64ywj8yCDYaxgAnjvTAEbZ7gDWeQDKne7k2sgw2Rxw03AAtqdwahpqABkMFBtJ5tHAAGIQbKfDAwXgg3YYDgwCBTEDGGCfLB6YzEeD8e5gOA3bb44gAN3xh12YH4JxA5H4cGyMFwF20sOQbGwzOmACt+PgAEIXMDXGA3DCfOAA8hwbm894gQX4G6PLBwACKHAg8EVWD5IHu2WZ2V2mvp6M62XIMG8JmQ1ns0xtEGZegunV2Ns0LIpCumAEddfB2bMdigMPwALRQOC-X7o3Ih4i5dkYTkYA1G5mfYjPV7KrQgzU6vUKpA8w3KmAYU4O4zIABM0xeGGIWEeAGEIJ8uShNH50RxmQAVeuR6tGilvACSUA0sBuYFtcwAgoubjBDpqc3B+v0gA)
<!-- prettier-ignore -->
```sh
--parser less
```

**Input:**
<!-- prettier-ignore -->
```less
.calcPxMixin() {
  @functions: ~`(function() {
    const designWidth = 3840
    const actualWidth = 5760
    this.calcPx = function(_) {
      return _ * actualWidth / designWidth + 'px'
    }
  })()`
}
```

**Output:**
<!-- prettier-ignore -->
```less
.calcPxMixin() {
  @functions: ~`(
      function() {const designWidth = 3840 const actualWidth = 5760 this.calcPx =
        function(_) {return _ * actualWidth / designWidth + "px"}}
    )
    () `;
}

```
Maybe we should apply js printer for this case
Is this feature deprecated? https://lesscss.org/usage/#less-options-enable-inline-javascript-deprecated-

Solution patch:
diff --git a/changelog_unreleased/less/14109.md b/changelog_unreleased/less/14109.md
new file mode 100644
index 000000000000..cae76dc4ecb8
--- /dev/null
+++ b/changelog_unreleased/less/14109.md
@@ -0,0 +1,27 @@
+#### Keep inline JavaScript code as it is (#14109 by @fisker)
+
+<!-- prettier-ignore -->
+```less
+// Input
+.calcPxMixin() {
+  @functions: ~`(function() {
+    const designWidth = 3840
+    const actualWidth = 5760
+    this.calcPx = function(_) {
+      return _ * actualWidth / designWidth + 'px'
+    }
+  })()`;
+}
+
+// Prettier stable
+.calcPxMixin() {
+  @functions: ~`(
+      function() {const designWidth = 3840 const actualWidth = 5760 this.calcPx =
+        function(_) {return _ * actualWidth / designWidth + "px"}}
+    )
+    () `;
+}
+
+// Prettier main
+<Same as input>
+```
diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js
index fb3055c502bb..d36857877fef 100644
--- a/src/language-css/parser-postcss.js
+++ b/src/language-css/parser-postcss.js
@@ -220,6 +220,11 @@ async function parseNestedValue(node, options) {
 }
 
 async function parseValue(value, options) {
+  // Inline javascript in Less
+  if (options.parser === "less" && value.startsWith("~`")) {
+    return { type: "value-unknown", value };
+  }
+
   const Parser = await import("postcss-values-parser/lib/parser.js").then(
     (m) => m.default
   );


Test patch:
diff --git a/tests/format/less/inline-javascript/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/inline-javascript/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..1c360caf2768
--- /dev/null
+++ b/tests/format/less/inline-javascript/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inline-javascript.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// Deprecated feature https://lesscss.org/usage/#less-options-enable-inline-javascript-deprecated-
+
+.calcPxMixin() {
+  @functions: ~\`(function() {
+    const designWidth = 3840
+    const actualWidth = 5760
+    this.calcPx = function(_) {
+      return _ * actualWidth / designWidth + 'px'
+    }
+  })()\`
+}
+
+=====================================output=====================================
+// Deprecated feature https://lesscss.org/usage/#less-options-enable-inline-javascript-deprecated-
+
+.calcPxMixin() {
+  @functions: ~\`(function() {
+    const designWidth = 3840
+    const actualWidth = 5760
+    this.calcPx = function(_) {
+      return _ * actualWidth / designWidth + 'px'
+    }
+  })()\`;
+}
+
+================================================================================
+`;
diff --git a/tests/format/less/inline-javascript/inline-javascript.less b/tests/format/less/inline-javascript/inline-javascript.less
new file mode 100644
index 000000000000..c057e4980035
--- /dev/null
+++ b/tests/format/less/inline-javascript/inline-javascript.less
@@ -0,0 +1,11 @@
+// Deprecated feature https://lesscss.org/usage/#less-options-enable-inline-javascript-deprecated-
+
+.calcPxMixin() {
+  @functions: ~`(function() {
+    const designWidth = 3840
+    const actualWidth = 5760
+    this.calcPx = function(_) {
+      return _ * actualWidth / designWidth + 'px'
+    }
+  })()`
+}
diff --git a/tests/format/less/inline-javascript/jsfmt.spec.js b/tests/format/less/inline-javascript/jsfmt.spec.js
new file mode 100644
index 000000000000..92093c8d5c93
--- /dev/null
+++ b/tests/format/less/inline-javascript/jsfmt.spec.js
@@ -0,0 +1,1 @@
+run_spec(import.meta, ["less"]);