Fix spacing issue in postcss simple vars (#4408)

src/language-css/printer-postcss.js

@@ -44,6 +44,7 @@ const hasComposesValueNode = utils.hasComposesValueNode;
 const hasLessExtendValueNode = utils.hasLessExtendValueNode;
 const hasParensAroundValueNode = utils.hasParensAroundValueNode;
 const maybeToLowerCase = utils.maybeToLowerCase;
+const isPostcssSimpleVar = utils.isPostcssSimpleVar;
 
 function genericPrint(path, options, print) {
   const node = path.getValue();
@@ -409,6 +410,9 @@ function genericPrint(path, options, print) {
         const iNextNode = node.groups[i + 1];
         const iNextNextNode = node.groups[i + 2];
 
+        if (isPostcssSimpleVar(iNode, iNextNode)) {
+          continue;
+        }
         // Ignore after latest node (i.e. before semicolon)
         if (!iNextNode) {
           continue;

src/language-css/utils.js

@@ -211,6 +211,15 @@ function hasParensAroundValueNode(node) {
   );
 }
 
+function isPostcssSimpleVar(currentNode, nextNode) {
+  return (
+    currentNode.value === "$$" &&
+    currentNode.type === "value-func" &&
+    nextNode &&
+    nextNode.type === "value-word" &&
+    !nextNode.raws.before
+  );
+}
 module.exports = {
   getAncestorCounter,
   getAncestorNode,
@@ -237,5 +246,6 @@ module.exports = {
   maybeToLowerCase,
   hasLessExtendValueNode,
   hasComposesValueNode,
-  hasParensAroundValueNode
+  hasParensAroundValueNode,
+  isPostcssSimpleVar
 };

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

@@ -552,3 +552,26 @@ a {
 }
 
 `;
+
+exports[`postcss-simple-vars.css 1`] = `
+background-color: $$(style)Color;
+background-color: $$(style)Color Color122;
+color: @@color;
+font: 100% $font-stack;
+background-color: darken(@link-color, 10%);
+border: 1px solid var(--border-color);
+color: $(style)color;
+color: @@(style) color123;
+color: @@(style)color123;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+background-color: $$(style)Color;
+background-color: $$(style)Color Color122;
+color: @@color;
+font: 100% $font-stack;
+background-color: darken(@link-color, 10%);
+border: 1px solid var(--border-color);
+color: $(style) color;
+color: @@(style) color123;
+color: @@(style) color123;
+
+`;

tests/css_postcss_plugins/postcss-simple-vars.css

@@ -0,0 +1,9 @@
+background-color: $$(style)Color;
+background-color: $$(style)Color Color122;
+color: @@color;
+font: 100% $font-stack;
+background-color: darken(@link-color, 10%);
+border: 1px solid var(--border-color);
+color: $(style)color;
+color: @@(style) color123;
+color: @@(style)color123;