Skip parsing inline JavaScript code in Less (#14109)

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>
+```

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
   );

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'
+    }
+  })()\`;
+}
+
+================================================================================
+`;

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'
+    }
+  })()`
+}

tests/format/less/inline-javascript/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(import.meta, ["less"]);