refactor: `less` extend (#4526)

src/language-css/printer-postcss.js

@@ -48,7 +48,6 @@ const isParenGroupNode = utils.isParenGroupNode;
 const isForKeywordNode = utils.isForKeywordNode;
 const isURLFunctionNode = utils.isURLFunctionNode;
 const isIfElseKeywordNode = utils.isIfElseKeywordNode;
-const hasLessExtendNode = utils.hasLessExtendNode;
 const hasComposesNode = utils.hasComposesNode;
 const hasParensAroundNode = utils.hasParensAroundNode;
 const hasEmptyRawBefore = utils.hasEmptyRawBefore;
@@ -142,11 +141,7 @@ function genericPrint(path, options, print) {
         node.raws.before.replace(/[\s;]/g, ""),
         insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
         node.raws.between.trim() === ":" ? ":" : node.raws.between.trim(),
-        // When the following less construct &:extend(.foo); is parsed with scss,
-        // it will put a space after `:` and break it. Ideally we should parse
-        // less files with less, but we can hardcode this to work with scss as
-        // well.
-        hasLessExtendNode(node) ? "" : " ",
+        node.extend ? "" : " ",
         hasComposesNode(node)
           ? removeLines(path.call(print, "value"))
           : path.call(print, "value"),

src/language-css/utils.js

@@ -239,18 +239,6 @@ function isPostcssSimpleVarNode(currentNode, nextNode) {
   );
 }
 
-function hasLessExtendNode(node) {
-  return (
-    node.value &&
-    node.value.type === "value-root" &&
-    node.value.group &&
-    node.value.group.type === "value-value" &&
-    node.value.group.group &&
-    node.value.group.group.type === "value-func" &&
-    node.value.group.group.value === "extend"
-  );
-}
-
 function hasComposesNode(node) {
   return (
     node.value &&
@@ -391,7 +379,6 @@ module.exports = {
   isForKeywordNode,
   isURLFunctionNode,
   isIfElseKeywordNode,
-  hasLessExtendNode,
   hasComposesNode,
   hasParensAroundNode,
   hasEmptyRawBefore,

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

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`extend.css 1`] = `
-.foobar {
-  &:extend(.foo);
-}
-
-.thing {
-  &:hover {
-    background-color: blue;
-    .thing-child {
-    }
-  }
-}
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-.foobar {
-  &:extend(.foo);
-}
-
-.thing {
-  &:hover {
-    background-color: blue;
-    .thing-child {
-    }
-  }
-}
-
-`;

tests/css_extend/extend.css

@@ -1,11 +0,0 @@
-.foobar {
-  &:extend(.foo);
-}
-
-.thing {
-  &:hover {
-    background-color: blue;
-    .thing-child {
-    }
-  }
-}

tests/css_extend/jsfmt.spec.js

@@ -1 +0,0 @@
-run_spec(__dirname, ["css"]);

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

@@ -1629,6 +1629,17 @@ li + ul,
 li + li {
   border-top: 0;
 }
+
+.foobar {
+  &:extend(.foo);
+}
+
+.thing {
+  &:hover {
+    background-color: blue;
+    .thing-child {}
+  }
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @nice-blue: #5b83ad;
 @light-blue: @nice-blue + #111;
@@ -3190,4 +3201,16 @@ li + li {
   border-top: 0;
 }
 
+.foobar {
+  &:extend(.foo);
+}
+
+.thing {
+  &:hover {
+    background-color: blue;
+    .thing-child {
+    }
+  }
+}
+
 `;

tests/css_less/less.css

@@ -1626,3 +1626,14 @@ li + ul,
 li + li {
   border-top: 0;
 }
+
+.foobar {
+  &:extend(.foo);
+}
+
+.thing {
+  &:hover {
+    background-color: blue;
+    .thing-child {}
+  }
+}