Keep LESS indirect property lookups tight (#19782)

changelog_unreleased/less/19782.md

@@ -0,0 +1,19 @@
+#### Remove extra spaces after `[$` in indirect property lookups (#19782 by @kovsu)
+
+<!-- prettier-ignore -->
+```less
+// Input
+.foo {
+  value: #namespace[$@prop-name];
+}
+
+// Prettier stable
+.foo {
+  value: #namespace[$ @prop-name];
+}
+
+// Prettier main
+.foo {
+  value: #namespace[$@prop-name];
+}
+```

src/language-css/print/comma-separated-value-group.js

@@ -249,6 +249,28 @@ function printCommaSeparatedValueGroup(path, options, print) {
 
         continue;
       }
+
+      // `foo[$@bar]`
+      //      ^
+      if (
+        iNode.type === "value-word" &&
+        iNode.value.endsWith("[$") &&
+        iNextNode?.type === "value-atword"
+      ) {
+        continue;
+      }
+
+      // `foo[ $@bar ]`
+      //       ^
+      if (
+        iNode.type === "value-word" &&
+        iNode.value === "$" &&
+        iPrevNode?.type === "value-word" &&
+        iPrevNode.value.endsWith("[") &&
+        iNextNode?.type === "value-atword"
+      ) {
+        continue;
+      }
     }
 
     // Ignore escape `\`

tests/format/less/less-test-suite/__snapshots__/format.test.js.snap

@@ -15314,7 +15314,7 @@ parsers: ["less"]
   my-prop: prop-value;
 }
 .test-prop-interp {
-  value: #namespace[$ @prop-name];
+  value: #namespace[$@prop-name];
 }
 
 // Lines 43-47: Variable not found error path

tests/format/less/lookup/__snapshots__/format.test.js.snap

@@ -124,3 +124,46 @@ parsers: ["less"]
 
 ================================================================================
 `;
+
+exports[`lookup-3.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+#ns() {
+  @v: green;
+  color: red;
+}
+
+@p: color;
+
+.box {
+  last: #ns[];
+  bare: #ns[color];
+  prop: #ns[$color];
+  variable: #ns[@v];
+  indirect-prop: #ns[$@p];
+  indirect-prop: #ns[ $@p ];
+  indirect-prop: #ns   [   $@p   ];
+}
+
+=====================================output=====================================
+#ns() {
+  @v: green;
+  color: red;
+}
+
+@p: color;
+
+.box {
+  last: #ns[];
+  bare: #ns[color];
+  prop: #ns[$color];
+  variable: #ns[@v];
+  indirect-prop: #ns[$@p];
+  indirect-prop: #ns[$@p];
+  indirect-prop: #ns[$@p];
+}
+
+================================================================================
+`;

tests/format/less/lookup/lookup-3.less

@@ -0,0 +1,16 @@
+#ns() {
+  @v: green;
+  color: red;
+}
+
+@p: color;
+
+.box {
+  last: #ns[];
+  bare: #ns[color];
+  prop: #ns[$color];
+  variable: #ns[@v];
+  indirect-prop: #ns[$@p];
+  indirect-prop: #ns[ $@p ];
+  indirect-prop: #ns   [   $@p   ];
+}