diff --git a/changelog_unreleased/less/19782.md b/changelog_unreleased/less/19782.md new file mode 100644 index 000000000..7520dcc33 --- /dev/null +++ b/changelog_unreleased/less/19782.md @@ -0,0 +1,19 @@ +#### Remove extra spaces after `[$` in indirect property lookups (#19782 by @kovsu) + + +```less +// Input +.foo { + value: #namespace[$@prop-name]; +} + +// Prettier stable +.foo { + value: #namespace[$ @prop-name]; +} + +// Prettier main +.foo { + value: #namespace[$@prop-name]; +} +``` diff --git a/src/language-css/print/comma-separated-value-group.js b/src/language-css/print/comma-separated-value-group.js index 9b16445f7..291082e17 100644 --- a/src/language-css/print/comma-separated-value-group.js +++ b/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 `\` 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 0b34a9c27..0b8672772 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 @@ -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 diff --git a/tests/format/less/lookup/__snapshots__/format.test.js.snap b/tests/format/less/lookup/__snapshots__/format.test.js.snap index 15b6f44cf..aa78fb7a5 100644 --- a/tests/format/less/lookup/__snapshots__/format.test.js.snap +++ b/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]; +} + +================================================================================ +`; diff --git a/tests/format/less/lookup/lookup-3.less b/tests/format/less/lookup/lookup-3.less new file mode 100644 index 000000000..88f4a17c6 --- /dev/null +++ b/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 ]; +}