From 76cb1efcb624fa1c9812e7a993d21b010327627e Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Wed, 8 Apr 2020 23:02:13 +0800
Subject: [PATCH] Fix less `:extend` format (#7984)

* Fix less `:extend` format

* Add changelog

* Add longer test

* Add issue link

* Style

* Fix changelog
---
 changelog_unreleased/less/pr-7984.md          | 30 ++++++++++++++++++
 src/language-css/parser-postcss.js            | 10 ++++++
 .../css_less/__snapshots__/jsfmt.spec.js.snap | 31 +++++++++++++++++++
 tests/css_less/less.less                      | 13 ++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 changelog_unreleased/less/pr-7984.md

diff --git a/changelog_unreleased/less/pr-7984.md b/changelog_unreleased/less/pr-7984.md
new file mode 100644
index 000000000000..5e3a864bcac1
--- /dev/null
+++ b/changelog_unreleased/less/pr-7984.md
@@ -0,0 +1,30 @@
+#### Fix `:extend` format ([#7984](https://github.com/prettier/prettier/pull/7984) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```less
+// Input
+.class {
+  &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class all);
+}
+
+// Prettier stable
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+
+// Prettier stable (Second format)
+.class {
+  &: extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+
+// Prettier master
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+```
diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js
index 186de9959287..cd3fb3c65bf4 100644
--- a/src/language-css/parser-postcss.js
+++ b/src/language-css/parser-postcss.js
@@ -375,6 +375,16 @@ function parseNestedCSS(node, options) {
       node.value = parseValue(value);
     }
 
+    // extend is missing
+    if (
+      isLessParser(options) &&
+      node.type === "css-decl" &&
+      !node.extend &&
+      value.startsWith("extend(")
+    ) {
+      node.extend = node.raws.between === ":";
+    }
+
     if (node.type === "css-atrule") {
       if (isLessParser(options)) {
         // mixin
diff --git a/tests/css_less/__snapshots__/jsfmt.spec.js.snap b/tests/css_less/__snapshots__/jsfmt.spec.js.snap
index 2ad76421687d..2bd5cff0b61d 100644
--- a/tests/css_less/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css_less/__snapshots__/jsfmt.spec.js.snap
@@ -1766,6 +1766,19 @@ label {
 // should not parse as custom-selector
 @custom-selector     :--icon #id;
 
+// extend #7977
+.class {
+  &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class all);
+}
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+.class {
+  &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class .some-very-loooooooooooooong-class all);
+}
+
 =====================================output=====================================
 @nice-blue: #5b83ad;
 @light-blue: @nice-blue + #111;
@@ -3378,6 +3391,24 @@ label {
 // should not parse as custom-selector
 @custom-selector: --icon #id;
 
+// extend #7977
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class
+      .some-very-loooooooooooooong-class all
+  );
+}
+
 ================================================================================
 `;
 
diff --git a/tests/css_less/less.less b/tests/css_less/less.less
index 56250af0f8f5..0ff89a8d8f09 100644
--- a/tests/css_less/less.less
+++ b/tests/css_less/less.less
@@ -1674,3 +1674,16 @@ label {
 
 // should not parse as custom-selector
 @custom-selector     :--icon #id;
+
+// extend #7977
+.class {
+  &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class all);
+}
+.class {
+  &:extend(
+    .some-class .some-other-class .some-very-loooooooooooooong-class all
+  );
+}
+.class {
+  &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class .some-very-loooooooooooooong-class all);
+}