Less: parser :extend as selector (prettier#8178)

changelog_unreleased/less/pr-8178.md

@@ -0,0 +1,20 @@
+#### Fix `:extend` pseudo-class ([#8178](https://github.com/prettier/prettier/pull/8178) by [@fisker](https://github.com/fisker))
+
+The selector is parsed as value before, now it's recognized as selector.
+
+<!-- prettier-ignore -->
+```less
+// Input
+.hello {
+  &:extend(.input[type="checkbox"]:checked ~ label)}
+
+// Prettier stable
+.hello {
+  &:extend(.input[type= "checkbox" ]: checked ~label);
+}
+
+// Prettier master
+.hello {
+  &:extend(.input[type="checkbox"]:checked ~ label);
+}
+```

src/language-css/parser-postcss.js

@@ -375,14 +375,21 @@ 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 === ":";
+      // extend is missing
+      if (!node.extend) {
+        node.extend = node.raws.between === ":";
+      }
+
+      // `:extend()` is parsed as value
+      if (node.extend && !node.selector) {
+        delete node.value;
+        node.selector = parseSelector(value.slice("extend(".length, -1));
+      }
     }
 
     if (node.type === "css-atrule") {

src/language-css/printer-postcss.js

@@ -151,6 +151,9 @@ function genericPrint(path, options, print) {
         insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
         node.raws.between.trim() === ":" ? ":" : node.raws.between.trim(),
         node.extend ? "" : " ",
+        isLessParser(options) && node.extend && node.selector
+          ? concat(["extend(", path.call(print, "selector"), ")"])
+          : "",
         hasComposesNode(node)
           ? removeLines(path.call(print, "value"))
           : path.call(print, "value"),

tests/css_less/__snapshots__/jsfmt.spec.js.snap

@@ -1779,6 +1779,10 @@ label {
   &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class .some-very-loooooooooooooong-class all);
 }
 
+// #8177
+.hello {
+  &:extend(.input:disabled)}
+
 =====================================output=====================================
 @nice-blue: #5b83ad;
 @light-blue: @nice-blue + #111;
@@ -3393,20 +3397,28 @@ label {
 
 // extend #7977
 .class {
-  &:extend(
-    .some-class .some-other-class .some-very-loooooooooooooong-class all
-  );
+  &:extend(.some-class
+    .some-other-class
+    .some-very-loooooooooooooong-class
+    all);
 }
 .class {
-  &:extend(
-    .some-class .some-other-class .some-very-loooooooooooooong-class all
-  );
+  &: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
-  );
+  &:extend(.some-class
+    .some-other-class
+    .some-very-loooooooooooooong-class
+    .some-very-loooooooooooooong-class
+    all);
+}
+
+// #8177
+.hello {
+  &:extend(.input:disabled);
 }
 
 ================================================================================

tests/css_less/less.less

@@ -1687,3 +1687,7 @@ label {
 .class {
   &:extend(.some-class .some-other-class .some-very-loooooooooooooong-class .some-very-loooooooooooooong-class all);
 }
+
+// #8177
+.hello {
+  &:extend(.input:disabled)}