From e01f86aa099fd02c96e4d93f2d3c2b0f2a22dc50 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Mon, 30 Jan 2023 13:31:23 +0800
Subject: [PATCH] Skip parsing inline JavaScript code in Less (#14109)

---
 changelog_unreleased/less/14109.md            | 27 ++++++++++++++
 src/language-css/parser-postcss.js            |  5 +++
 .../__snapshots__/jsfmt.spec.js.snap          | 35 +++++++++++++++++++
 .../inline-javascript/inline-javascript.less  | 11 ++++++
 .../less/inline-javascript/jsfmt.spec.js      |  1 +
 5 files changed, 79 insertions(+)
 create mode 100644 changelog_unreleased/less/14109.md
 create mode 100644 tests/format/less/inline-javascript/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/format/less/inline-javascript/inline-javascript.less
 create mode 100644 tests/format/less/inline-javascript/jsfmt.spec.js

diff --git a/changelog_unreleased/less/14109.md b/changelog_unreleased/less/14109.md
new file mode 100644
index 000000000..cae76dc4e
--- /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 6c2fbe700..10bcc0c1a 100644
--- a/src/language-css/parser-postcss.js
+++ b/src/language-css/parser-postcss.js
@@ -203,6 +203,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
   );
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 000000000..1c360caf2
--- /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 000000000..c057e4980
--- /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 000000000..92093c8d5
--- /dev/null
+++ b/tests/format/less/inline-javascript/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(import.meta, ["less"]);