Stop inserting space in LESS property access (#14103)

Author: fisker

changelog_unreleased/less/14103.md

@@ -0,0 +1,17 @@
+#### Do not insert space in LESS property access (#14103 by @fisker)
+
+<!-- prettier-ignore -->
+```less
+// Input
+a {
+  color: @colors[@white];
+}
+
+// Prettier stable
+a {
+  color: @colors[ @white];
+}
+
+// Prettier main
+<Same as input>
+```

src/language-css/clean.js

@@ -183,6 +183,27 @@ function clean(ast, newObj, parent) {
       });
     }
   }
+
+  // We parse `@var[ foo ]` and `@var[foo]` differently
+  if (
+    ast.type === "value-comma_group" &&
+    ast.groups.some(
+      (node) =>
+        (node.type === "value-atword" && node.value.endsWith("[")) ||
+        (node.type === "value-word" && node.value.startsWith("]"))
+    )
+  ) {
+    return {
+      type: "value-atword",
+      value: ast.groups.map((node) => node.value).join(""),
+      group: {
+        open: null,
+        close: null,
+        groups: [],
+        type: "value-paren_group",
+      },
+    };
+  }
 }
 
 clean.ignoredProperties = ignoredProperties;

src/language-css/printer-postcss.js

@@ -621,7 +621,26 @@ function genericPrint(path, options, print) {
         }
 
         // Ignore `@` in Less (i.e. `@@var;`)
-        if (iNode.type === "value-atword" && iNode.value === "") {
+        if (
+          iNode.type === "value-atword" &&
+          (iNode.value === "" ||
+            /*
+            @var[ @notVarNested ][notVar]
+            ^^^^^
+            */
+            iNode.value.endsWith("["))
+        ) {
+          continue;
+        }
+
+        /*
+        @var[ @notVarNested ][notVar]
+                            ^^^^^^^^^
+        */
+        if (
+          iNextNode.type === "value-word" &&
+          iNextNode.value.startsWith("]")
+        ) {
           continue;
         }
 

tests/format/less/case/__snapshots__/jsfmt.spec.js.snap

@@ -389,9 +389,15 @@ printWidth: 80
   canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[    @notVarNested][notVar];
   canChangeCase: @var[@notVarNested    ][notVar];
+  canChangeCase: @var[    @notVarNested    ][notVar];
+  canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[@notVarNested][    notVar];
   canChangeCase: @var[@notVarNested][notVar    ];
+  canChangeCase: @var[@notVarNested][    notVar    ];
   canChangeCase: @var[notVar];
+  canChangeCase: @var[    notVar];
+  canChangeCase: @var[notVar    ];
+  canChangeCase: @var[    notVar    ];
 }
 
 =====================================output=====================================
@@ -453,11 +459,17 @@ printWidth: 80
 };
 
 @not-var {
-  canchangecase: @var[ @notVarNested][notVar];
-  canchangecase: @var[ @notVarNested][notVar];
-  canchangecase: @var[ @notVarNested ][notVar];
-  canchangecase: @var[ @notVarNested][ notVar];
-  canchangecase: @var[ @notVarNested][notVar ];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[notVar];
+  canchangecase: @var[notVar];
+  canchangecase: @var[notVar];
   canchangecase: @var[notVar];
 }
 

tests/format/less/case/variable.less

@@ -59,7 +59,13 @@
   canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[    @notVarNested][notVar];
   canChangeCase: @var[@notVarNested    ][notVar];
+  canChangeCase: @var[    @notVarNested    ][notVar];
+  canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[@notVarNested][    notVar];
   canChangeCase: @var[@notVarNested][notVar    ];
+  canChangeCase: @var[@notVarNested][    notVar    ];
   canChangeCase: @var[notVar];
+  canChangeCase: @var[    notVar];
+  canChangeCase: @var[notVar    ];
+  canChangeCase: @var[    notVar    ];
 }