Do not change case of property name if inside a variable declaration in LESS (#14034)

Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/less/14034.md

@@ -0,0 +1,19 @@
+#### Do not change case of property name if inside a variable declaration in LESS (#14034 by @mvorisek)
+
+<!-- prettier-ignore -->
+```less
+// Input
+@var: {
+  preserveCase: 0;
+};
+
+// Prettier stable
+@var: {
+  preservecase: 0;
+};
+
+// Prettier main
+@var: {
+  preserveCase: 0;
+};
+```

src/language-css/parser-postcss.js

@@ -492,13 +492,21 @@ function parseNestedCSS(node, options) {
           node.params[0] === ":"
         ) {
           node.variable = true;
-          node.value = parseValue(node.params.slice(1), options);
+          const text = node.params.slice(1);
+          if (text) {
+            node.value = parseValue(text, options);
+          }
           node.raws.afterName += ":";
         }
 
         // Less variable
         if (node.variable) {
           delete node.params;
+
+          if (!node.value) {
+            delete node.value;
+          }
+
           return node;
         }
       }

src/language-css/printer-postcss.js

@@ -158,7 +158,11 @@ function genericPrint(path, options, print) {
 
       return [
         node.raws.before.replace(/[\s;]/g, ""),
-        insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
+        // Less variable
+        (parentNode.type === "css-atrule" && parentNode.variable) ||
+        insideICSSRuleNode(path)
+          ? node.prop
+          : maybeToLowerCase(node.prop),
         trimmedBetween.startsWith("//") ? " " : "",
         trimmedBetween,
         node.extend ? "" : " ",

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

@@ -204,7 +204,7 @@ svg[viewBox] linearGradient,
 }
 
 @KeepDetachedRuleset: /*:*/ {
-  background: RED;
+  BACKGROUND: RED;
 };
 
 %KeepScssPlaceholderSelector {
@@ -321,3 +321,145 @@ TABLE {
 
 ================================================================================
 `;
+
+exports[`variable.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// Do not change case of property name if inside a variable declaration
+
+@var: {
+  notVar: 0;
+  @notVarNested: {
+    notVar: 1;
+    notVar2: 2;
+  };
+};
+
+@var    :    {
+  preserveCase: 5;
+};
+
+@var:    {
+  preserveCase: 5;
+};
+
+@var    :{
+  preserveCase: 5;
+};
+
+@var /* comment */ : /* comment */ {
+  preserveCase: 5;
+};
+
+@var: /* comment */ {
+  preserveCase: 5;
+};
+
+@var /* comment */ :{
+  preserveCase: 5;
+};
+
+@var // comment
+: // comment
+{
+  /* FIXME: should not change case */
+  preserveCase: 5;
+};
+
+@var: // comment
+{
+  preserveCase: 5;
+};
+
+@var // comment
+:{
+  /* FIXME: should not change case */
+  preserveCase: 5;
+};
+
+// Known css properties
+@var: {
+  COLoR: RED;
+};
+
+@not-var {
+  canChangeCase: @var[@notVarNested][notVar];
+  canChangeCase: @var[    @notVarNested][notVar];
+  canChangeCase: @var[@notVarNested    ][notVar];
+  canChangeCase: @var[@notVarNested][    notVar];
+  canChangeCase: @var[@notVarNested][notVar    ];
+  canChangeCase: @var[notVar];
+}
+
+=====================================output=====================================
+// Do not change case of property name if inside a variable declaration
+
+@var: {
+  notVar: 0;
+  @notVarNested: {
+    notVar: 1;
+    notVar2: 2;
+  };
+};
+
+@var: {
+  preserveCase: 5;
+};
+
+@var: {
+  preserveCase: 5;
+};
+
+@var: {
+  preserveCase: 5;
+};
+
+@var: /* comment */ {
+  preserveCase: 5;
+};
+
+@var: /* comment */ {
+  preserveCase: 5;
+};
+
+@var: {
+  preserveCase: 5;
+};
+
+@var // comment
+: // comment
+{
+  /* FIXME: should not change case */
+  preservecase: 5;
+}
+
+@var: // comment
+{
+  preserveCase: 5;
+};
+
+@var // comment
+: {
+  /* FIXME: should not change case */
+  preservecase: 5;
+}
+
+// Known css properties
+@var: {
+  COLoR: RED;
+};
+
+@not-var {
+  canchangecase: @var[ @notVarNested][notVar];
+  canchangecase: @var[ @notVarNested][notVar];
+  canchangecase: @var[ @notVarNested ][notVar];
+  canchangecase: @var[ @notVarNested][ notVar];
+  canchangecase: @var[ @notVarNested][notVar ];
+  canchangecase: @var[notVar];
+}
+
+================================================================================
+`;

tests/format/less/case/variable.less

@@ -0,0 +1,65 @@
+// Do not change case of property name if inside a variable declaration
+
+@var: {
+  notVar: 0;
+  @notVarNested: {
+    notVar: 1;
+    notVar2: 2;
+  };
+};
+
+@var    :    {
+  preserveCase: 5;
+};
+
+@var:    {
+  preserveCase: 5;
+};
+
+@var    :{
+  preserveCase: 5;
+};
+
+@var /* comment */ : /* comment */ {
+  preserveCase: 5;
+};
+
+@var: /* comment */ {
+  preserveCase: 5;
+};
+
+@var /* comment */ :{
+  preserveCase: 5;
+};
+
+@var // comment
+: // comment
+{
+  /* FIXME: should not change case */
+  preserveCase: 5;
+};
+
+@var: // comment
+{
+  preserveCase: 5;
+};
+
+@var // comment
+:{
+  /* FIXME: should not change case */
+  preserveCase: 5;
+};
+
+// Known css properties
+@var: {
+  COLoR: RED;
+};
+
+@not-var {
+  canChangeCase: @var[@notVarNested][notVar];
+  canChangeCase: @var[    @notVarNested][notVar];
+  canChangeCase: @var[@notVarNested    ][notVar];
+  canChangeCase: @var[@notVarNested][    notVar];
+  canChangeCase: @var[@notVarNested][notVar    ];
+  canChangeCase: @var[notVar];
+}