From d1badb96aec3750bbfddfddf54aad2a10aac3073 Mon Sep 17 00:00:00 2001
From: Konv Suu <hi@kovsu.com>
Date: Tue, 30 Jun 2026 16:21:04 +0800
Subject: [PATCH] Keep LESS lookups tight (#19503)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: fisker <lionkay@gmail.com>
---
 changelog_unreleased/less/19503.md            | 25 ++++++++++++++++++
 .../print/comma-separated-value-group.js      | 26 ++++++++-----------
 .../__snapshots__/format.test.js.snap         | 16 ++++++------
 3 files changed, 44 insertions(+), 23 deletions(-)
 create mode 100644 changelog_unreleased/less/19503.md

diff --git a/changelog_unreleased/less/19503.md b/changelog_unreleased/less/19503.md
new file mode 100644
index 000000000..0c97da0f6
--- /dev/null
+++ b/changelog_unreleased/less/19503.md
@@ -0,0 +1,25 @@
+#### Remove extra spaces after `[` in map lookups (#19503 by @kovsu)
+
+<!-- prettier-ignore -->
+```less
+// Input
+.foo {
+  color: #theme[ primary];
+  color: #theme[@name];
+  color: #theme[@@name];
+}
+
+// Prettier stable
+.foo {
+  color: #theme[ primary];
+  color: #theme[ @name];
+  color: #theme[ @@name];
+}
+
+// Prettier main
+.foo {
+  color: #theme[primary];
+  color: #theme[@name];
+  color: #theme[@@name];
+}
+```
diff --git a/src/language-css/print/comma-separated-value-group.js b/src/language-css/print/comma-separated-value-group.js
index 8bf080ae3..f0c820aaf 100644
--- a/src/language-css/print/comma-separated-value-group.js
+++ b/src/language-css/print/comma-separated-value-group.js
@@ -1,3 +1,4 @@
+import * as assert from "#universal/assert";
 import {
   breakParent,
   dedent,
@@ -224,31 +225,26 @@ function printCommaSeparatedValueGroup(path, options, print) {
     // Less property/variable lookup
     // https://lesscss.org/features/#detached-rulesets-feature-property-variable-accessors
     if (options.parser === "less") {
-      // `var [@result]`
+      // `foo [@bar]`
       //      ^
       if (iNextNode?.type === "value-word" && iNextNode.value === "[") {
         continue;
       }
 
-      // `var[ @result]`
-      //     ^
-      // `@var [ @@foo ] [ bar ]`
-      //                 ^
+      // Ignore spaces after `[` (i.e. `foo[ @bar]` or `foo[ bar]`)
       if (
         iNode.type === "value-word" &&
-        iNode.value === "[" &&
+        iNode.value.endsWith("[") &&
         (iNextNode?.type === "value-atword" || iNextNode?.type === "value-word")
       ) {
-        continue;
-      }
+        assert.ok(
+          node.groups.some(
+            (node, index) =>
+              index > i &&
+              (node.value?.startsWith("]") || node.value?.endsWith("]")),
+          ),
+        );
 
-      // `@var [ @@foo ][ bar ]`
-      //               ^^
-      if (
-        iNode.type === "value-word" &&
-        iNode.value === "][" &&
-        iNextNode?.type === "value-word"
-      ) {
         continue;
       }
     }
diff --git a/tests/format/less/less-test-suite/__snapshots__/format.test.js.snap b/tests/format/less/less-test-suite/__snapshots__/format.test.js.snap
index 86eadb4a4..781cd6f20 100644
--- a/tests/format/less/less-test-suite/__snapshots__/format.test.js.snap
+++ b/tests/format/less/less-test-suite/__snapshots__/format.test.js.snap
@@ -2783,7 +2783,7 @@ parsers: ["less"]
   color4: @theme[@nested][color];
   color5: @defaults[@@varToGet];
   prop: #ns1[foo];
-  var: #ns1[ @foo];
+  var: #ns1[@foo];
   sub: #ns1.vars[$sub];
 }
 
@@ -2869,7 +2869,7 @@ parsers: ["less"]
 @import "imports/library.less";
 
 .bar {
-  width: #library.sizes[ @width];
+  width: #library.sizes[@width];
   height: #library.add-one(1px)[@return];
 }
 
@@ -2881,7 +2881,7 @@ parsers: ["less"]
 }
 
 .foo {
-  width: #library.sizes[ @width];
+  width: #library.sizes[@width];
 }
 
 .foods() {
@@ -2891,7 +2891,7 @@ parsers: ["less"]
 @key-to-lookup: dessert;
 
 .lunch {
-  treat: .foods[ @@key-to-lookup];
+  treat: .foods[@@key-to-lookup];
 }
 
 ================================================================================
@@ -2978,7 +2978,7 @@ parsers: ["less"]
 @media (min-width: @breakpoints[mobile]) {
   .toolbar {
     width: @map[@width];
-    height: #ns.mixin[ @height];
+    height: #ns.mixin[@height];
     background: @map[@colors][toolbar-background];
     color: @map[@colors][toolbar-foreground];
   }
@@ -3080,7 +3080,7 @@ parsers: ["less"]
   .colors() {
     #library.core.colors();
   }
-  width: .alias[ @a];
+  width: .alias[@a];
   background: .colors[primary];
   color: .colors[foreground];
 }
@@ -3479,7 +3479,7 @@ parsers: ["less"]
 }
 .example {
   // #lookup[@var](); -- fails, need the following alias
-  @dr: #lookup2[ @var];
+  @dr: #lookup2[@var];
   @dr();
 }
 
@@ -3523,7 +3523,7 @@ parsers: ["less"]
     @small: 600px;
   }
   .breakpoint(@size) {
-    @val: #ns.sizes[ @@size];
+    @val: #ns.sizes[@@size];
     @min: (min-width: @val);
     @max: not all and @min;
   }