diff --git a/changelog_unreleased/less/14034.md b/changelog_unreleased/less/14034.md new file mode 100644 index 000000000000..02d0d2d5f04f --- /dev/null +++ b/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) + + +```less +// Input +@var: { + preserveCase: 0; +}; + +// Prettier stable +@var: { + preservecase: 0; +}; + +// Prettier main +@var: { + preserveCase: 0; +}; +``` diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index a0014a2b6779..13b42c4670f2 100644 --- a/src/language-css/parser-postcss.js +++ b/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; } } diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index d9894d4ce4fc..c847279b3910 100644 --- a/src/language-css/printer-postcss.js +++ b/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 ? "" : " ", diff --git a/tests/format/less/case/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/case/__snapshots__/jsfmt.spec.js.snap index 9bc7e90032bf..9abe3bd1d0b1 100644 --- a/tests/format/less/case/__snapshots__/jsfmt.spec.js.snap +++ b/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]; +} + +================================================================================ +`; diff --git a/tests/format/less/case/variable.less b/tests/format/less/case/variable.less new file mode 100644 index 000000000000..29fdd9052f67 --- /dev/null +++ b/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]; +}